Bottom-border for link not working in IE7

Get Started
1

I’m in the beginning development of a site and running into a problem with links. I’d like all links within text areas to get a bottom border when you mouse over them. This is a technique I’ve seen endorsed in a number of places to give more control over the styling of links. I’d rather not use an underline as was suggested in another forum.

I thought I was setting it up correctly, and it seems to work in all Mac based browsers, but when I checked on IE7 on a PC (this is the only version of IE I have access to), the link works but the bottom-border doesn’t appear.

I have another type of link called “more” which also specifies a bottom border and it does work in IE7. It specifies font size, weight and all caps as well as the bottom border (see below). I’d like to be able to use the more generic link style in any text throughout the site, and have it maintain the font properties (size etc), changing only the color and adding a bottom border on hover.

Here’s that section of the CSS:

/===Links===/

a{
color: #d06b63;
}

a:hover {
border-bottom:solid 1px #d06b63;
}

a.more {
font-size: 9px;
font-weight: bold;
text-transform:uppercase;
}

a.more:hover {
border-bottom: solid 1px #d06b63;
}

/===Links end===/

Here’s the link to the page:
http://www.laurafigdesign.com/nbcaf/sub_template.html

Any suggestion on how to get the bottom border to show in IE?

Thanks,
Laura

2

position:relative on the anchor selector should do it.

a{
color: #d06b63;
position:relative;
}
3

Hi and thanks for your suggestion. It did work, but caused all the “a” elements to get left behind when the window is resized. The link below shows this.
http://www.laurafigdesign.com/nbcaf/gallery.html

Of course it only happens in IE7 as far as I know. Any suggestions for how to get around this?

Laura

4

Try this. Remove position:relative; and add a rule targeting IE7:

* + html a {
	border-bottom: 1px transparent solid;
        display: inline-block;
	vertical-align: bottom;
}
5

Thanks very much, this seems to work! If you don’t mind, I’d be curious to know why it works.

Laura

6

Actually there’s a simpler way, that avoids targeting IE7.

Just set the line-height in the rule for p, ul, li (or a new rule for p alone added below to take precedence) to 1.4. This, in my opinion, also makes the text easier to read. An alternative would be to set that line-height value on body and only apply it elsewhere when it needs to differ.

7

Thanks!

8