CSS Problems (hover)

[mellzie]

I was adjusting the layout to fit all browsers, but now it's gone a bit weird in firefox and mozilla. It works for the most part, but when you hover over a link the divs go all weird (they move out of place and everything) including the one inside the iframe. It was working fine in firefox previously (not well in opera), but I don't know what's the big difference. Here is the link:

http://www.crescent-dreams.net

[_Aerospace_Eng_]

Well it doesn't help that you have 85 errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.crescent-dreams.net%2F&charset=%28detect+automatically%29&doctype=Inline&verbose=1) in your code. You can't really expect bad coding to work cross browser. Try preloading your images with some javascript or put in the widths and heights of your images inside the image tags.

[mellzie]

Thanks! I'm never good at validating, it really bores me. I validated it and fixed all the errors, and the css too (apart from the scrollbars). But I still have the same problem. Hmmm... I'm not sure what else to do. The only way it seems to work is to take out the a:hover property (is that what you call it?) completely.

Is there another option? I don't really like using javascript.

[zro@rtv]

the css doesnt validate (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.crescent-dreams.net%2Fstyle.css&usermedium=all)

AND when i pop open FF EditCSS window, I get Crazy madness... (full of non-printable characters)

what editor are you using?

[mellzie]

sorry, i just found out. it validates when you enter the css into the field, but it keeps popping up: can't parse document tree. when you do it that way (i just learnt how to). I'm trying to find out what the document tree is, can anyone explain? I'm trying to find it on the web and w3 but I still don't understand it :S. Sorry, I'm new to this validating thing.
i use notepad2/notepad. i opened the css file in firefox and it was ok, is that what you meant by ff edit?

EDIT: I figured out the problem with the css. I saved it as unicode instead of ansi. it mostly validates now, apart from the scrollbars. Unfortunately, I still have the same problem. Thanks for your help!

[mellzie]

Figured out the problem... at least that's done! Seems to be the

overflow:auto;

that is the problem. I tried changing it to scroll, and changing positions, padding, margin, but a no go. Then I tried fixing the position:absolute/relative (after searching for a solution on the internet) but it's still not working.

I'm still looking for more solutions... Hope someone can help. I'm a newbie when it comes to adjusting to all browsers.