Underline not showing on some links in IE6 et IE7

Hi all,

I’m having an issue in IE6 and IE7: some of my text links, which should be underlined, are not underlined in these 2 browsers. They are in FF, Chrome, Safari and IE8 though.

I have stated “text-decoration: underline;” on the A tag with specific classes so I don’t know why it’s not showing. I’ve even tried “!important”.

I’ve tried to look for a pattern but it’s not clear: some these text links are floated, others are contained in floated containers, and others are absolutely positioned. I can’t figure it out!

Have you come across this issue before?

The only way around it I’ve found is to use border-bottom instead of the underline but I’d rather avoid this solution.

Thanks in advance


We’d need to see some code to debug as it is probably something simple. Have you perhaps styled visited links differently? Or it may be a cascade issue somewhere in your code.

Either way we’d need some code to test.:slight_smile:

fair enough, here is some code, I hope it’s enough.

The links of this simple secondary navigation are not underlined in IE6 and IE7:

<div id="secondary_nav">
    <ul id="yw1">
        <li><a href="/site/login">connexion</a></li>
        <li><a href="/site/account">mon compte</a></li>
        <li><a href="/site/parameters">paramètres</a></li>

#secondary_nav {

#secondary_nav ul {

#secondary_nav li {

#secondary_nav ul li a:link, #secondary_nav ul li a:visited {

#secondary_nav ul li a {

I am using Eric Meyer’s CSS reset but I don’t think that should cause any problems.

Not sure I can give you more code, it’s a large web application so there would be hundreds of lines.



The error isn’t in that section of code unfortunately as the code above renders fine in IE6/7.

Without seeing the code I can only make a few suggestions.

First validate html and css to avoid any obvious typos that may be tripping IE up (one stray bracket or extra semi:colon in the wrong place can often cause havoc) .

If the parent list item is floated then try floating the anchors also so that they have a “layout”.

If the elements have small heights or negative margins then add position:relative to any non positioned anchors.

You say you have tried this:

#secondary_nav ul li a:link, #secondary_nav ul li a:visited {
 [B] text-decoration:underline!important;[/B]

If that’s not working then it’s unlikely to be a cascade issue. IE does have trouble with link specificity but the above !important should over-rule anything else.

There’s obviously a bug or error somewhere as this should be an easy thing to solve. However without the full code I can only give guesses.:slight_smile:

Is this site online so we can view it?

thanks for your time Paul.

Unfortunatelly it’s not live yet. It’s for a big web application I’m working, so it’s difficult to show more code and css (there is loads).

I will do what you suggested. It could very well be a missing bracket somewhere or a semi colon instead of a colon or something silly like that.

thanks again

Ok no problem:)

In cases like this the problem is in just narrowing the bug down. Once you can make a reduced test case the solution is usually obvious.

It’s difficult in large applications I know but keep trying to find the real bug/error otherwise it may catch you out later on.:wink:

you’re so wise :wink:

Here is how I managed to fix this bug.

It turns out it had to do with my CSS reset. I used Eric Meyer’s in which there is

body {
    line-height: 1;

For some reason, links in IE6 and IE7 didn’t like this so in a stylesheet targeting these 2 browsers only, I put the following css and it worked.

    line-height: 1.1;

I’m not particularly happy with this fix because I still don’t understand why it occured. I have used Eric Meyer’s reset before and I haven’t had that problem.

Browser compatibility issues which is purely CSS related and you are not supposed to use 1.1 or 1.5 it’s always in the numbers 1, 2, 3 etc.

actually I don’t think that’s true. Look at the W3schools website, they say that the value can be “A number that will be multiplied with the current font size to set the line height”. They don’t say anything against decimals.

Even on the [http://reference.sitepoint.com/css/line-height"]Sitepoint reference website](http://reference.sitepoint.com/css/line-height) they show an example with a line-height of 1.5.

Plus I know from experience it validates so it’s definitely OK to set a line-height to 1.1 or 1.5.

In my case I was hoping to find a more elegant solution to my problem. I might look into it further later but for now this will do.


Unitless line height values are fine and the preferred way to specify them.:slight_smile:

However a line height of 1.0 wont leave IE6/7 enough room to place the underline at small font-sizes. The reset sets the line height to 1.0 but you should change it to something suitable and readable which would be at least 1.2 or 1.3. (Just as you should set the default margins for p element and not leave them at zero as the reset does.)

The reset is not a default set of rules for your elements but a removal of all defaults to create an initial level playing field on which you can then build apply suitable rules without fear of conflict.

In a small test you can see that IE just doesn’t have room for the underline at small font sizes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
body {
a {
p {clear:both;margin:0;}
.a {font-size:9px}
.b {font-size:10px}
.c {font-size:11px}
.d {font-size:12px}
.e {font-size:13px}
.f {font-size:14px}
.g {font-size:15px}
.h {font-size:16px}
.i {font-size:17px}
.j {font-size:18px}

<p class="a"><a href="#">testing</a></p>
<p class="b"><a href="#">testing</a></p>
<p class="c"><a href="#">testing</a></p>
<p class="d"><a href="#">testing</a></p>
<p class="e"><a href="#">testing</a></p>
<p class="f"><a href="#">testing</a></p>
<p class="g"><a href="#">testing</a></p>
<p class="h"><a href="#">testing</a></p>
<p class="i"><a href="#">testing</a></p>
<p class="j"><a href="#">testing</a></p>