Firefox hover problem

[ozchris]

Hi.

I'm creating a new local site, so there's not much there yet.

It uses php includes for the menu and ads, source-ordered columns, css.

My problem is that Firefox is not recognising the links.

They work fine in IE.

In FF the links are not clickable, and hover doesn't work.

If I view the file through FF from my disk the non-php links work ok.

Any ideas? Everything validates.

Also, I was trying to make it robust, to see how it handles text expansion. When in IE, using ctl+= (zoom, not text increase), I noticed the right margin goes in. Anybody got ways of preventing that? I've seen it on a few other sites too.

cheers
Chris

it's www.dogs-only.com.au.
(when finished, it will be my first sql database ever)

[httpman]

Hi,

It's a bit late to answer, no ?
I didn't look at your CSS file, coz it's in a separate file, but most - if not all - issues in CSS files with FF come from the syntax.
IE is cool, you can make mistakes it still correct them and works. At the opposite, FF is very strict and ignore any line with an error.
The "hover" style works fine within FireFox & Mozilla. Therefore in your case, I would suspect the code. Check your lines of code. You coul forget a "." in the begining of class name, or a } at the end etc. : IE will correct, but FF will ignore the whole definition.

JP

[Faglork]

Since the Code and the CSS both validate (Good!) it must be something different.

I don't have the time to investigate, but from a quick glance it is

#rightcolumn	{position: absolute; top: 5.5em; right: 0}

Using FF's Web Developer Extension, you can see that the #rightcolumn *overlaps* - it "shields the links form clicking", so to speak.

If you switch off "position: absolute" your links start to work ...

When you find the solution, please post it.

hth,
faglork

[ozchris]

Faglork, you're beautiful.

I put a width on the right column and it worked. So it was an overlapping problem.

I had installed the developers bar, but not really used most features.

Do you personally usually worry about the non-error warnings from css validation - re background colours, spare fonts etc? I guess it depends on whether I want to be a perfectionist or not.

Many thanks

[Faglork]

Originally Posted by ozchris

Do you personally usually worry about the non-error warnings from css validation - re background colours, spare fonts etc? I guess it depends on whether I want to be a perfectionist or not.

Usually, I don't worry. But as I typed this response, I got an idea.

These warnings occur because we habitually don't specify a background color when the background color of an ancestor element is used. So we can cover that issue by extending the "global whitespace reset" (which is a good idea to start your CSS with) to include background colors:

* {padding: 0; margin: 0; background-color: transparent;}

This might solve it - I have to check this.

UPDATE: It does not work as intended. Don't get me wrong, on the CSS level it works perfectly. The validator just does not recognize it ...

But it seems to be a validator issue - I noticed that the W3C CSS validator sometimes does not work correctly, it warned about elements without background-color where in fact the background-color was explicitely declared.

So we have a solution, you just can't validate it. So what.

Regarding the question of "spare fonts", you should always declare several fallback fonts. Like

font-family: yourfancyfont, arial, helvetica, sans-serif;

for non-serif fonts.

faglork