Tuesday, September 18, 2007

fixing IE checkbox padding/margin

Support for CSS is built in to every modern browser so theoretically we shouldn't have to deal with too many layout issues. Unfortunately, a lot of browser specific quirks still exist. One I've dealt with recently is getting a checkbox to line up exactly to the left of a div. Setting the left margin and padding did not work in IE and I was going to try really drastic measures like setting float or absolute positioning until I found a really easy solution. To fix the extra padding for checkboxes in IE, we just need to give the checkbox a fixed width. I've summarized the results in the table with some screenshots. The markup I want to style is:

<div>
<p>some text before</p>
<input type="checkbox"/> checkbox 1<br/>
<input type="checkbox"/> checkbox 2<br/>
<p>some text after</p>
</div>


FireFox IE CSS notes
div {border: solid 1px #000;width:150px;} p {padding:0;margin:0;} no styling on checkbox
div {border: solid 1px #000;width:150px;} p {padding:0;margin:0;} input {padding-left:0;margin-left:0;} style checkbox to have no left padding or margin. only Firefox behaves as expected
div {border: solid 1px #000;width:150px;} p {padding:0;margin:0;} input {padding-left:0;margin-left:0;width:15px;} added a fixed width and now IE7 looks fine too!

22 comments:

Anonymous said...

Thx ^^
Nice solution

John said...

Thanks for the tip Dave, saved me a lot of head-scratching.

Anonymous said...

thank you, it helped me.

Anonymous said...

большое спасибо

Anonymous said...

Thanks for the solution. It's frustrating to make things look the same in different browsers sometimes. Then pages like this are very helpful.

dfecticon said...

thanks david, much appreciated, i was wondering what was going on with IE, now i have to stop asp.net rendering tables around checkbox lists... uggh

Anonymous said...

Thanks for that, its been bugging me for ages!!

Anonymous said...

thanx

Anonymous said...

GREAT Thanks!

Unknown said...

That worked for me, thanks!

Anonymous said...

Thanks - a similar problem was infuriating me. I wanted to align things vertically, and after reading your post, I tried setting the height of the checkbox. Tada! It works! :)

hedkase said...

Thanks, this helped a lot... FYI 12px works better for radio boxes for me...

MacBen said...

Thanks for posting, very nice solution! You saved me from ripping out the last hair :)

Lamine said...

Thank you buddy , very much appreciated !

Petkov said...

This is very useful!

Anonymous said...

Wow, it seems I tried everything else except that. Thanks a lot!

Anonymous said...

dlee is wiener

PJ said...

Thanks,,Thanks,,Thanks,,Thanks,,Thanks,, :) :D :PThanks,,Thanks,,Thanks,,Thanks,,Thanks,, :) :D :PThanks,,Thanks,,Thanks,,Thanks,,Thanks,, :) :D :PThanks,,Thanks,,Thanks,,Thanks,,Thanks,, :) :D :PThanks,,Thanks,,Thanks,,Thanks,,Thanks,, :) :D :PThanks,,Thanks,,Thanks,,Thanks,,Thanks,, :) :D :PThanks,,Thanks,,Thanks,,Thanks,,Thanks,, :) :D :P

Anonymous said...

Just want to add that this is cross-browser solution (tested in FF3-4, latest webkit, IE7-9).

Anonymous said...

Thanks, fixed height and width in css on the checkbox solved my problem.

Anonymous said...

Thanks a ton.... it helps...

Anonymous said...

thanks a bunch. IE11 still has this problem and this saved me some headache