PDA

View Full Version : ul menu hover stopped working



Excavator
Jan 11th, 2007, 06:43 AM
I think I've been at it too long. It's probably right in front of me but I just can't see it.
I've pulled enough hair out so I'm going to give up for the night - go watch the boob tube, have a beer and relax!

Everything was working fine. Then I moved the CSS out of the document and into seperate linked files ... that's when things stopped working. I messed with the paths and anything else I could think of but, by now, I've changed so much there's no way to go back to when it worked.

Have a look at http://www.nopeople.com/break

ronaldb66
Jan 11th, 2007, 10:06 AM
There may be a problem with the specificity of the selectors used in the various CSS rules.
You've got a confusing mix of ids and classes going on in there, with for instance both a rule with a selector "#menu li a:hover" and one with ".button1 a:hover"; although they don't contain conflicting property settings these still may get into eachother's hair.

This rule:

#menu li a:hover {
float: left;
}
doesn't seem to add a whole lot; begin with removing this one. If that doesn't fix things, increase the specificity of the ".buttonx" rules by adding "#menu" to them.

Excavator
Jan 11th, 2007, 04:19 PM
Thanks for the help ronaldb66, I did all that and it didn't change anything.

On what may be a related problem...only because it happened at the same time. When viewing the site in FF2, opening the edit CSS window (of the Developers Toolbar) causes all the images that are loaded with CSS to disapear. ???

Graft-Creative
Jan 11th, 2007, 07:11 PM
On what may be a related problem...only because it happened at the same time. When viewing the site in FF2, opening the edit CSS window (of the Developers Toolbar) causes all the images that are loaded with CSS to disapear. ???

Probably not related, happens to me a lot, either all bg images disappear, or just some.

Gary

Excavator
Jan 11th, 2007, 07:39 PM
Probably not related, happens to me a lot, either all bg images disappear, or just some.

I've seen it a lot too but this is the first time it's happened to me. The edit CSS window worked fine while I was writing the page and the CSS was in the head. After I moved the CSS to the seperate attached files, both the menu hover and FF's edit CSS window started messing up. Of course, I chaned a few other things and now can't get back to what I had before.:mad: :mad: :mad:

Not such a big deal I guess, it's not my site or anything. I'm just doing a favor for a guy on another forum. Still, I'd REALLY like to know what happened so I don't do it again, and so I can fix it if I do.

Excavator
Jan 11th, 2007, 07:44 PM
You've got a confusing mix of ids and classes going on in there, with for instance both a rule with a selector "#menu li a:hover" and one with ".button1 a:hover"; although they don't contain conflicting property settings these still may get into eachother's hair.


It is kind of confusing. It's my own solution to pure CSS rollovers where each button, as well as that buttons hover state, is different.
Have a look at my original experiment:
horizontal (http://www.nopeople.com/CSS/menu_buttons_horizontal/)
vertical (http://www.nopeople.com/CSS/menu_buttons_vertical/)

I'm sure there is room for improvement!

Excavator
Jan 12th, 2007, 01:01 AM
I fixed the hover by moving the class off the li and onto the a itself (not my idea).

Still don't know why FF Developers Toolbar CSS edit makes the images disapear.

_Aerospace_Eng_
Jan 12th, 2007, 03:38 AM
The CSS edit will make the images disappear if the stylesheet is in a different folder from where the root document is at. The editor doesn't understand the paths, it uses a local path looking for images in the same directory as the site. In your stylesheet if you did something like

/break/break_files/image.gif the images wouldn't disappear because the extension knows how to get to it.

Excavator
Jan 12th, 2007, 04:58 AM
Thanks _Aerospace_Eng_,
that fixed it.
I kind of thought it was a path issue but the fact it worked most everywhere else kind of threw me.

Now I know not to do it again.