Problem with padding

[Porl123]

I've noticed how in internet explorer there's extra padding around html objects like divs, which is a problem for my website design. My design uses an inline div which I need to have no padding. In most other browsers there seems to be a gap of 1 pixel all around the text inside the div, however in IE it looks about 2 pixels, which isn't much but it knocks my design out of balance. This is what I have:

 

<div style="display:inline; padding:0; margin:0px;">Text</div>

 

Is there a way to remove this extra padding in IE? Thanks in advance

[haku]

What IE - there are three in common use, all render differently.

 

Check to make sure you have no HTML errors in your code. Also check to see that you have a doctype - without one IE goes into quirks mode which makes stuff render funny.

[Porl123]

Yeah I've just used the validator but it didn't return any errors or warnings. I've advanced with the design now and I've got this:

 

<div style="display:inline-block; height:16px; padding:2px 0px 0px 15px; margin-right:10px; background:url(/im/icons/email-1.gif) no-repeat; color:#555;">[email protected]</div>

 

It looks fine in browsers like safari, firefox and opera but again in internet explorer 8 the text seems to be 1 pixel further down than in other browser. Normally I'd just accept it but because of the icon it looks more off than it is.

[haku]

If you've got no errors, then your best bet is to add a conditional comment for IE8 and move it up one pixel.