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.
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.
#secondary_nav {
position:absolute;
right:0;
top:7px;
}
#secondary_nav ul {
float:right;
}
#secondary_nav li {
float:left;
margin-left:1em;
}
#secondary_nav ul li a:link, #secondary_nav ul li a:visited {
text-decoration:underline;
}
#secondary_nav ul li a {
color:#FFFFFF;
font-size:1em;
}
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.
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.
a{
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.
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.
Unitless line height values are fine and the preferred way to specify them.
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.
