Problem:
Internet Explorer truncates and does not display any vertical padding nor top and bottom borders on an inline element, such as an anchor, inside of a table cell. Firefox and Safari display correctly without any problems.
Here is an example situation where we want to style an anchor tag with some padding inside of a table cell…
Well, we expect to see some border on all sides of the anchor tag with some gray background; however, as we open it in IE, we see… WHAT?!?!… the top and bottoms are gone?!?! See below…
Solution:
Add the CSS attribute “position: relative” and it’s fixed; nothing more, nothing less. See below.
![](http://www.engfers.com/wp-content/uploads/2008/08/link-html_fixed.png "Corrected Padding with \\"position: relative\\"")
Here is what the final result compared looks like…
Conclusion:
I wish IE didn’t suck so much. Next issue to tackle… why when you do this the padding overflows out of the outer container (just turn on table borders and you’ll see what I mean)…
Thanks, this helped me just now. (This has always been a problem that I’ve worked around before)
Gotta love solutions that just work. Damn I hate IE. Thanks!
This fix worked perfectly. You are awesome!
You just saved what’s left of my hair. My least favorite part of web design: being the middle man that has to see to it that browsers which are MADE to display things differently, all look the same to the end user. Sigh…
Thanks, IE is really full of nasty surprises. This behavior persists in IE 8.
thanks for solving my problem related to border not sported in ie7 but this site reference i solve my problem……… thanks a lot