Border-bottom of link not showing in IE7

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. I thought I was setting it up correctly, and it seems towork 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), it doesn’t work. I’d like to be able to use this link style in any text throughout the site, and have it maintain the font properties, changing only the color and add a bottom border on hover.

I have another type of link called “more” which also specifies a bottom border and it does work in IE7.

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 IE7?

Thanks,
Laura

its not border-bottom style, rather use
text-decoration: underline

Thanks, but I purposely used bottom-border instead of text-decoration. It gives more control over the styling and looks a bit nicer. I figure text-decoration a back-up solution, but I wondered if there might be another.

Laura

Hey LauraFig, I think the problem may be in the order you are declaring your pseudo class. Instead of just declaring
a{
color: #d06b63;
}
try adding
a:link {color:#d06b63;} /* unvisited link /
a:visited {color:#d06b63;} /
visited link /
a:hover {color:#do6b63;
border-bottom:solid 1px #d06b63;} /
mouse over link /
a:active {color:#do6b63;} /
selected link */
This may solve the issue, if not I would use an alternate style sheet for IE 7or less
<!–[if lt IE 8]> <link rel=“stylesheet” type=“text/css” href=“ie7-and-down.css” /> <![endif]–>
Then you could use text-decoration: underline as a fall back only on these browsers and everyone else will see your true design

Hope this helps

Thanks very much for your reply. Since I didn’t get any additional responses earlier, I tried another forum and got the following solution:

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

As far as I can tell, it seems to be working.

Again, thanks for your thoughts and I’ll keep this in mind in case the first solution fails.

Laura Fig