Links in IE & Opera works, but not in FF

[Storyman]

For a couple of hours now I've been trying to figure out why css links work in IE and Opera, but do not work in FireFox. Obiviously, I'm overlooking something because I've done this before on other sites.

Here's the CSS code.

#menu { background-color: #007742; text-decoration: none; height: 17px; width: 720px; left: 0; top: 210px; position: absolute; right: 0; visibility: visible; margin: 0; padding: 0; border-right: thin outset #745622; border-bottom: thin outset #745622; display: inline; }

#menu ul { text-decoration: none; text-align: center; margin: 0; padding: 0; }

#menu li { font-size: 13px; font-weight: bold; text-decoration: none; margin: 0 15px; padding: 0; list-style-type: none; display: inline; }

#menu a:link { color: #d6ff1c; font-size: 13px; text-decoration: none; display: inline; }

#menu a:visited { color: #d6ff1c; font-size: 13px; text-decoration: none; display: inline; }

#menu a:hover { color: #1cf0ff; font-size: 13px; text-decoration: none; display: inline; }

#menu a:active { color: #d6ff1c; font-size: 13px; text-decoration: none; display: inline; }

[vincevincevince]

Which part of the link display does not work? Or do you mean they are not clickable?

[Storyman]

They are not clickable. In FF the hover doesn't even work.

[Robin_reala]

This is a bit of a long shot, but I see you're using position:absolute on the ul. Have you absolutely positioned any other elements and are they accidently sitting on top of the list?

[Storyman]

Good call. It does have something to do with the postion being absolute. I'm not sure what you mean about the position sitting on top of other code.

There is another layer that is absolutely positioned. They are separate and don't touch.

Here is the revised code:

#menu { height: 17px; width: 720px; left: 0; top: 210px; position: absolute; }

#menu ul { font-size: 12px; text-align: center; margin-right: auto; margin-left: auto; }

#menu li { background-color: #007742; text-decoration: none; margin: 0 5px 0 0; padding: 0 0.5em; border-right: thin solid #dad2ce; border-bottom: thin solid #dad2ce; border-top-color: white; border-left-color: white; list-style-type: none; display: inline; }

#menu a:link { color: #d6ff1c; font-size: 12px; line-height: 1em; text-decoration: none; }

#menu a:visited { color: #d6ff1c; font-size: 12px; line-height: 1em; text-decoration: none; }

#menu a:hover { color: #1cf0ff; font-size: 12px; text-decoration: none; }

[vincevincevince]

I doubt that it's CSS - it could be though. Could you post the format of the actual <A HREF... you're using perhaps?

[Storyman]

The problem turns out to be related to position: absolute; On two layers (Menu & Navigation) that both had absolute positioning. When absolute positioning was removed from the layer the links worked. Absolute positioning absolutely killed the CSS links in FF.

I haven't seen any reference to this problem in the forum and wonder if it is new to FF 1.5.