label + checkbox concerns

By Luke Smith on April 21, 2008 3:27 PM

You have a label with a nested checkbox input element like so:

<label><input type="checkbox" value="foo">foo</label>

When you click in the label area, all browsers except IE6 will fire the onclick event for the label followed by the onclick event for the input. IE6 will only fire the input's onclick if the label's for attribute is set and points to the id of the input.

<label for="x"><input id="x" type="checkbox" value="foo">foo</label>

Also, both IE6 and IE7 will incorrectly render the following style:

label { background: #def; padding: 2em 4em; }
input { margin-right: 2em; }

Firefox

Firefox rendering.  Solid blue label background

IE

IE rendering. Blue label divided by margin

And the icing: neither IE6 nor IE7 will fire the label's onclick event for clicks occurring in the marginal space.

IE rendering with dead zone in margin area indicated

Your comment?

HTML is ok

No TrackBacks (http://lucassmith.name/mt/mt-tb.cgi/108)

ls.n

LucasSmith.name

Luke and Heidi

I'm Luke. I am a front end engineer at Yahoo! on the YUI team.

Mostly I write about code stuff, but occassionally I'll mix in some real life. You've been warned.

Archives

Tags

Feeds

Subscribe to feed Recent entries

Content licensed under Creative Commons

Code licensed under BSD license

©2005 - 2010 Lucas Smith

Powered by Movable Type