Hi,

I've asked a similar question a while back, but i've got a new problem with my navigation menu on http://screwtheschool.com

when you hover, in IE7 and FF, it works fine. In IE6, everything is messed up as well as some boxes that arent aligned like they should be. Could someone help me out, where the problem is? It's really getting me frustrated that I cant get a nav with two background images o work properly.

Thanks to those who have helped me already so far.



Also, a few other questions in the meanwhile:
1. Does anyone have any portable versions of IE6, IE5, Mozilla, etc? So I can test these myself instead of running between two pc's?
2. Any ways optimizing my site to remove unnecessary images? I like my design, so I need someone else's input on what I can throw away to still make the site look similar to what it is now.

First, make it valid, secondly, this could be one of the parts of IE that is broken, it shows up fine in Opera, so that's what I'd bet it is.

The template itself is valid xhtml/css, but when I added in all the php, its those <? and uppercase tags in the actual script core that are causing it to be invalid.
I've removed a comma that I accidentally left in the style.css file which was the only error in that file.

Speaking of php, is there any way to validate those tags, or will it always display as invalid?

thanks

PHP tags get parsed, they don't show up in HTML. Remove the uppercase tags and attributes and make them lowercase. Here is an introduction on why you need the page to validate. http://en.wikipedia.org/wiki/Quirks_mode
http://validator.w3.org/check?uri=ht...Inline&group=0
As you can see there is a lot of things to fix.

yea I was just running through the validator so I'll be digging through the code soon...do people code in uppercase in php just so that we have to go back and fix it?

anyways, that still doesn't solve my a:hover problem.

.listSmallText a:active {
text-decoration: none;
font-family: 'Trebuchet MS', Tahoma, Verdana !important;
font-size: 14px;
margin: 0 0 0 5px;
color: #009ECF;
text-align: left;
}

.listSmallText a:hover {
text-decoration: underline;
}
I'm not sure if that's the area you're having the problem crop up or not, but try reversing those two.
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
http://www.w3schools.com/css/css_pseudo_classes.asp

Actually, the thing to remember with pseudo classes is LoVeHAte - link , visited, hover, active