IE display bug (inline elements with padding and margins)
Posted: Sat Sep 25, 2004 2:47 pm
please look carefully at this picture:

what you see is:
IE draws transparent(inverted) border around items on the page when you click a link for example...
(you can see this border when you press tab key)
on my picture there is the same border around link but IE displace it left and down...actually the whole active area of a link is displaced
...
I put in the picture just for comparison how the same thing looks in firefox...
there you can see that this thin border is exactly around a link...
after looking for couple of minutes at how this looks in IE i realized that IE simply ignores
padding and margins and renders links exactly as if they were without any styling....
i tried to put links inside list and set display:inline for <li> but this only fixed horizontal displacement but not vertical...
Can i fix it somehow?
thanks
feyd | added [img] and

what you see is:
Code: Select all
<div id="menu">
<a>first</a>
<a>second</a>
<a>third</a>
</div>
#menu a{padding:5px;margin-left:10px;}(you can see this border when you press tab key)
on my picture there is the same border around link but IE displace it left and down...actually the whole active area of a link is displaced
I put in the picture just for comparison how the same thing looks in firefox...
there you can see that this thin border is exactly around a link...
after looking for couple of minutes at how this looks in IE i realized that IE simply ignores
i tried to put links inside list and set display:inline for <li> but this only fixed horizontal displacement but not vertical...
Can i fix it somehow?
thanks
feyd | added [img] and
Code: Select all
tags to make it easier to read.[/color]