CODEWITHSUNDEEP
css
user249493
user249493

Reputation: 2333

Underlining Hyperlinks - Text-decoration vs. Border-bottom and Browser Inconsistencies

I'm not a big fan of the default text-decoration. I ususally set it to "none" then do a "border-bottom: 1px dotted somecolor" on 'a' and a "border-bottom: 1px solid someothercolor" on 'a:hover'

I've noticed something recently that I don't think was happening before. Even with padding-bottom on the text's

container set to 0, there's too much vertical space between the bottom of the letters and my border-bottom.

What's odder is that Chrome still seems to behave nicely and respect my 0 padding, but Firefox and IE appear to be adding about 4 or 5 pixels of vertical space.

When I temporarily revert to "text-decoration: underline" I still see too much space.

Any idea what's going on here?

Upvotes: 2

Views: 1261

Answers (2)

Makc
Makc

Reputation: 1132

Change line-height, for example:

a{ line-height:1em; }

Upvotes: 0

ScottS
ScottS

Reputation: 72261

I'm going to bet the culprit is inline-block as a display setting. See the difference (in Firefox) at http://jsfiddle.net/s8FYS/6/.

EDIT: Some further investigation reveals that inline Firefox (looking in Firebug) sets the height to auto which ends up less than the actual line-height, whereas inline-block calculates the height (since it is now acting like a block) equal to line-height * font-size, which pushes the border down.

You can "compensate" for it by setting the height (in this fiddle, a 1.35em worked with my default font-size of 16px), but I'm not sure that doing such would necessarily compensate correctly at all times.

Upvotes: 2

Related Questions