No underlined links in Firefox?

...now what...

[Emperor]

Hi guys,

All of a sudden my links don't become underlined when I hover them in Firefox. I don't think I changed anything, in IE6 they work fine.

div.link a:link {
color: #ff8000;
text-decoration: none;
}

div.link a:hover {
color: #ffff00;
text-decoration: underline;
}

<div class="link"><a href="http://www.somewhere.com">Test Link</a></div>

What the hell is going on?

Take care,
Emperor

[BlobFisk]

Have you tried putting in a visited and active pseudo class? Could be something to do with the fact that the link is "visited", yet the CSS does not specify a style for it...

[iamlost]

Your test code works fine in Firefox 1.0PR.

<edit update>Now it doesn't ... will look at some more</edit>

[iamlost]

It was my mistake - I trashed the external css file between looks.

I reiterate:

Your code looks and works fine in Firefox 1.0PR.

Did you test with just the posted code? Perhaps there is some other code affecting it?

[DrDoc]

Have you checked your browser settings to make sure you don't have it set to never underline links? Does the color change on hover like it should?

[Emperor]

Hi guys,

Well, it works now. I have no idea what was causing it or why it started working again (or why it stopped to begin with.) The color was changing but the underline was not showing up.

Maybe it's a little bug in Firefox, because after I reset my computer this morning it worked fine; the only thing I did between last night when it wasn't working and today was reset, the code is exactly the same.

Take care,
Cyrus

[Emperor]

Well, it stopped working again and I figured it out. When I decrease the font size (from the gigantic and ugly default size that doesn't remember my settings) the links don't underline.

Maybe it has to do with the font-family or white-space: pre I use. Here is the exact code:

div.linklist {
font-family: courier, monospace;
}

div.link {
overflow: hidden;
width: 100%;
white-space: pre;
}

div.link a:link {
color: #c0c0c0;
text-decoration: none;
}

a:visited = same as above

div.link a:hover {
color: #ffffff;
text-decoration: underline;
}

a:active = same as above

<div class="linklist">
<div class="link">88888888 4444 <a href="http://www.somesite.org">Test Link</a></div>
</div>

If you load Firefox it has the default font size set, decrease it only once and you will see what I mean. It sucks because I worked hard getting the font sizes just right for default (medium in IE) and one level smaller.

Take care,
Cyrus

IE6 rules!

[createErrorMsg]

IE6 rules!

By "rules," I assume you mean "insists that people bow and scrape to it's inferior proprietary garbage merely because it holds the majority of the market share"?
;)

I'll take some minor text-decoration display bug at decreased font sizes (if that's what's happening here) over, say, the Peekaboo Bug, the Guillotine Bug, the Whitespace in Lists Bug, the Unscrollable Content Bug, that funky 100%+ thing IE6 does with float-adjacent <div>s, the Three Pixel Text Jog, the Double Margin Bug, the Missing Images Bug, the Escaping Floats Bug, ... need I go on? These are ALL IE specific issues.

If IE6 rules, it's only because it's the inbred, thin-blooded heir to a once great (debateable?) empire.

[bedlam]

If you load Firefox it has the default font size set, decrease it only once and you will see what I mean. It sucks because I worked hard getting the font sizes just right for default (medium in IE) and one level smaller.

Can't reproduce your bug using the code you posted in an xhtml strict document (it's the fourth [ctrl][-] before the underline disappears, and by then the text is only about one pixel high anyhow...) It makes no difference whether the link is 'fresh', or visited.

Is the browser in quirks mode or standards mode when the problem occurs?

-B

[Emperor]

Here you go, I made a simple version that won't underline in Normal size (default at startup.)

linkbug.css

body {
background-color: #000000;
color: #c0c0c0;
}
div.linklist {
font-family: courier,monospace;
}
div.link {
overflow: hidden;
width: 100%;
}
a:link {
color: #c0c0c0;
text-decoration: none;
}
a:hover {
color: #ffffff;
text-decoration: underline;
}

linkbug.htm

<!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">
<head>
<title>Firefox Bug</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="linkbug.css" />
</head>
<body>
<div class="linklist">
<div class="link"><a href="http://www.google.com">Google</a></div>
<div class="link"><a href="http://www.yahoo.com">Yahoo</a></div>
</div>
</body>
</html>

Both the CSS and the XHTML validate with zero errors. I'm using WIn XP Pro SP2.

Take care,
Cyrus

[bedlam]

Hiya,

Ok, I can see the problem now. I didn't test it a lot, but I found (at least in your example file) that if you explicitly declare a font-size and line-height in the css, the problem disappears.

Maybe give that a try...

-B

[Emperor]

Hi,

No, that doesn't do anything on my end. I added this:

font-size: 100%;
line-height: normal;

...to every container. I guess I won't worry about it. Maybe the latest build of Firefox fixed it, who knows.

See ya,
Cyrus

[bedlam]

I've found three ways to solve the problem:

1. Set the line height explicitly (to a numerical value; you're having trouble with the default, so setting it to 'normal' doesn't help anything.

   This method is a little unreliable, and so is obviously not the best solution, but works well with values in the range of 1.5em.
   

2. Give the <div> containing the links an explicit height. This seems to reliably prevent the problem, and led me to what I think is the actual solution:

3. Get rid of "overflow:hidden" on that div. Your underline seems to be overflowing the container and is being hidden.
   

It does seem like a bug, but it's pretty benign - and, as it turns out, easy to solve.

-B

[Emperor]

Hi again,

Yes, I did notice that removing the overflow: hidden fixed the problem but that part is essential in my code, that's why I have the links in containers in the first place.

The code I gave only fails when the text size is Normal in Firefox, they are underlined when it is increased or decreased so it's realy weird.

Instead of having each link in it's own container I can probably just make a big container and use the white-space: pre to line everything up but I really didn't want to do it that way.

I think I will just leave it alone, I can't start altering my code because of a tiny bug in Firefox; this does certainly show that Firefox probably has some deep-rooted problems though.

Thanks for the help.

Take care,
Cyrus

[createErrorMsg]

Removing the whitespace:pre; makes things work correctly, as well.

<added>Sorry, my mistake. Styled as an unordered list, removing whitespace:pre works, but inside of your <divs> it does not.</added>

[edited by: createErrorMsg at 8:18 pm (utc) on Oct. 30, 2004]

[Robin_reala]

Seeing as you've got a reduced testcase, have you thought about submitting this as a bug in Bugzilla?

[rsp_123]

Greetings - I have a similar underlining issue. My site - <snip> - looks ok in Firefox and IE except for the underlining.

Bizarrely, my links *do* underline on hover - but only visited links! Mouse over unvisited links and no underline...

Any ideas?

Robin

<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>

[edited by: SuzyUK at 6:49 pm (utc) on Feb. 16, 2005]