engfer(s)

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…

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