IE6/IE7 Anchor Y-Axis Border And Padding Fix

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.

Here is what the final result compared looks like…

IE Link Border / Padding Fixed with "position: relative"

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)…

6 thoughts on “IE6/IE7 Anchor Y-Axis Border And Padding Fix

  1. 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…

  2. thanks for solving my problem related to border not sported in ie7 but this site reference i solve my problem……… thanks a lot

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>