Checkbox padding in IE

How can I remove this?

[Jimmy Turnip]

I need a checkbox to be flush against the left hand side of it's containing element, yet IE 6 (not tested it fully in IE 7 yet, but seems similar at first glance) puts some padding around it that I can't remove.

I can't use hacks because I have to use in-line styles so I can't position it relative just for IE.

Anyone got some clever solution they'd like to share?

[benihana]

have you tried margin:0;?

[Jimmy Turnip]

Yes. Sorry should've said. I've tried:

margin:0;
padding:0;
font-size:1%;
line-height:1%;
float:left;

All to no avail.

[Jimmy Turnip]

You can see, with this simple demonstration:

<div style="border: solid 1px #000">
<input type="checkbox" style="margin:0;padding:0;font-size:1%;line-height:1%;float:left;" />
<br style="clear:both;" />
</div>

In FF the checkbox is flush to the left, but in IE there is about a 4 or 5 pixel gap between the checkbox and the surrounding div. Grrr.

[Jimmy Turnip]

Right, it's almost become a mission of mine to try and neutralise the position of a checkbox now.

I've got it really close:

<div style="border: solid 1px #000">
<input type="checkbox" style="overflow:hidden;width:14px;padding:0;margin:0;" />
</div>

In IE and FF the checkbox appears flush to the left, but how to get rid of the top and bottom padding in IE? Anyone want to take the torch?

[edited by: Jimmy_Turnip at 2:36 pm (utc) on Mar. 15, 2007]

[SuzyUK]

you've got the bit between your teeth JT ;)
.. closest I can get

div {
border: solid 1px #000;
vertical-align: top; /* IE likes this */
height: 13px;
line-height: 13px;
font-size: 10px; /* for IE (to enforce the smaller than default line height for div) */
}

input {
background: #0f0; /* for visual */
margin:0; /* for FF */
width: 13px; /* for IE */
height: 13px; /* For IE */
}

Suzy

[Jimmy Turnip]

Thanks for the encouragement Suzy.

Yeah, I got it. Damn white space in IE was confusing me. I put the input on the same line as the div and eureka. Here we go:

<div style="border: solid 1px #000;"><input style="margin:0;width:13px;height:13px;overflow:hidden;" type="checkbox" /></div>

Now with that little bit of neutralisation code on my checkboxes they behave exactly the same in IE and FF. Sweet.