Hey:

I'm working on a redesign for my site: http://beta.nplsolutions.com/ and everything is working pretty well, but I am having some problems under IE6. The :hover action works great and swaps the image, but when you rollout, the image doesn't go back as it does in IE7, Firefox.

I know there are a plethora of options for this sort of effect in CSS, but I'd like to stick to what I have as much as possible. That being said, I'm using a transparent gif as the "button" which controls the div below it. Taking a look at my source should make this pretty obvious, and I have a stylesheet just for this menu at: http://beta.nplsolutions.com/nav.css

Thanks in advance.

Nicky

Try changing your id's to classes for "Home", "Company" "Selected Work", and "Contact".
In your css, you have something like "a.home:hover". This is refering to a class, and you have id tags set up.

Good eye! I see exactly what you're talking about. (The div's are declared in another CSS file, so I changed the name of the anchor classes I was referring to.) Unfortunately, even after giving the classes a more unique name, the problem persists in IE6. (I've changed everything back the way it was before, no sense in having extra code, right?)

Thanks!

Nicky

Why don't you putt everything in one css file (just to avoid confrontations)

Ok, here's a couple of suggestions.
1 - there is no reason to use multiple divs for that menu, you really should put it in an unordered list - that is, after all, what it is.
2 - You have defined the a:hover state, but you have NOT defined a default a:link state nor the a:active or a:visited states. You'll need to define at least the a:link as well as the a:hover in order for things to work properly.

You must also define them in a specific order: Link, Visted, Hover, Active - just remember LoVeHAte .

Originally Posted by LadynRed

You have defined the a:hover state, but you have NOT defined a default a:link state nor the a:active or a:visited states. You'll need to define at least the a:link as well as the a:hover in order for things to work properly.

I made the change, but I'm not currently around a computer with IE6; however, isn't the :link state assumed when no other state is defined in an anchor class? Maybe just a finicky IE6 specification?

Thanks.

Nicky

Nope, not when you're dealing with pseudo classes.

I found the solution on the following site:
http://www.quirksmode.org/css/ie6_purecsspopups.html

More or less, I needed to declare a general a:hover state with one of the following states: border, display, position, overflow or background. A simple bit of code got everything working for me:

a:hover{
border:0px none;
}

Interestingly enough, adding the :link selector actually caused more problems. I have since removed it, but for some reason, it would only show one of the buttons normally, then the hover states for the others once they had been rolled over. I validated the CSS and could find no differences between any of the declarations. Regardless, I think I've got it working now and my thanks go out to everyone who contributed a solution.

Nicky