CSS tabbed list and hover

corblimey

I was just putting the finishing touches to an admin function for a client, when I decided to test it out in Firefox to make sure it works okay. It looks fine, but I have a problem with the css-driven tabbed list I'm using.

Each tab consists of a simple box with text inside and when you hover over it, it changes colour. Simple enough. However, in ff, it only works when I hover over it, but away from from the text inside. Hovering over the text has no effect, cursor doesn't change, nothing, it's like ff doesn't even recognise it.

It works fine in ie, but I've not seen this problem on any of the myriad of pages showing tabbed lists these days, so it must be something dumb I've done.

I'm not sure what further info I can supply, but if somebody has been there, fixed that, I'd appreciate any pointers you might have.

bpmurray

Is the text really text or is it a link? If it's a link, then you must have the appropriate settings on the text too for it to work.

corblimey

The text is the link, the styling is down to css

<ul id="tabnav">
    <li><a href="">help</a></li>
</ul>

where ul#tabnav has all the styling on it in the stylesheet plus

#tabnav a:hover a:focus {
    background: #fff;
    color: #666;
}

corblimey

Well, I found the problem. I had added some code to the right of the tabbed list, just a copyright notice, but with it there, the hover fails to work on ff. No idea why, but the simplest solution seems to be to move the sodding text.

Civilian_Target

I don't quite understand what you're trying to do here (tabbed list?), but the problem sounds to me like you're trying to create blocks and you've somehow put the copyright block in the wrong place...