in IE, a:hover is green. but not in FF!?
Hey all,
My simple text website is acting funny. When hovering over a link, I want it to turn from blue to green. So in my css, I have
a { color: #00008B; background-color: #FFF; text-decoration: none; font-weight: bold; }
a:hover { color: #009900; background-color: #FFF; }In IE, this works as expected. But not Firefox 1.5, nor Opera.
Any idea why? TIA
-edit-
Here's more info:
the links are encased in an , and appear within two divs. The nearest div is just formatting of content:
#content { margin-right: 0; margin-left: 0; }'
the code is:
h2 { color: black; background-color: #FFF; font-size: 20px; font-family: Arial, Helvetica, sans-serif; text-align: center;} '
and the outer div is a container for the whole page:
#container {
color: black;
background-color: #FFF;
margin-top: 0;
margin-left: 5px;
margin-right: 310px;
font-family: "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2em;
text-decoration: none;
}There's nothing fancy in the html, here it is, simplified:
div container
div content
h2 LINK /h2
/div
/div
check it out here. The title of each post is a link to a news site, and that's the one that's supposed to turn green. The "Permalink" link at the foot of each post is supposed to stay blue, and does. You'll notice on the right margin, there's a pile of links to other posts, and those turn green properly. But for those, I had to write a special div to get them to turn green, because those links are fed from a Feedburner javascript.
Lastly, it's not just my pc. I checked it on my other pc, with an older FF, and the links don't turn green either. What's the deal? TIA!
DaveyBoy posted this at 00:33 — 30th January 2006.
They have: 453 posts
Joined: Feb 2003
i was going to suggest it was because the # was missing from the HEX code, but it seems to be there. Bit stumped really! Is it definitely happening on other's people's computers too?
MrDiaz posted this at 01:02 — 30th January 2006.
He has: 21 posts
Joined: Jan 2006
Well it works perfectly for me, I tried the code and it works fine. Post here your html, the error might be in there.
YOu can see what I did here:
planetdiaz.com/test
Admin and CEO of StackedTech and Planet Diaz
Renegade posted this at 01:15 — 30th January 2006.
He has: 3,022 posts
Joined: Oct 2002
Don't know if you quoted it wrong but, try closing the a:hover.
Anita.Bonghit posted this at 01:29 — 30th January 2006.
They have: 43 posts
Joined: Sep 2005
oh, sorry, I did quote it wrong. In my css it's closed properly. I'll fix the above post.
I'll also add more info above.
Roo posted this at 01:58 — 30th January 2006.
She has: 840 posts
Joined: Apr 1999
I think you need to edit the part of the stylesheet that is native to your blog system...Further down in your css file I se this and I'll bet it is overiding what you have at the top of your css file:
#nav a, a:visited, a:active, a:link {
text-decoration: none;
color: #00008B;
background-color: #FFF;
}
#nav a:hover {
color: #FFF;
background-color: #00008B;
}
Roo
demonhale posted this at 03:09 — 30th January 2006.
He has: 3,278 posts
Joined: May 2005
FF here its green on hover...
MrDiaz posted this at 05:27 — 30th January 2006.
He has: 21 posts
Joined: Jan 2006
Yeah that's what I've been saying but no one listens... :S
Busy posted this at 09:11 — 30th January 2006.
He has: 6,151 posts
Joined: May 2001
Have you tried h2 a:hover { ...}
I didn't check all your code (site took ages to load) but if you use other h2's you may have to .class it ... type thing
demonhale, is the headings, not the side links, they work ok
demonhale posted this at 09:44 — 30th January 2006.
He has: 3,278 posts
Joined: May 2005
KK just add this to your CSS
#content a:hover{
color: #009900;
background-color: #FFF;
text-decoration: none;
}
MrDiaz posted this at 09:50 — 30th January 2006.
He has: 21 posts
Joined: Jan 2006
I don't think that will work demon
demonhale posted this at 09:54 — 30th January 2006.
He has: 3,278 posts
Joined: May 2005
It will... Trust me... Again add to the CSS...
#content a:hover{
color: #009900;
background-color: #FFF;
text-decoration: none;
}
Anita.Bonghit posted this at 19:54 — 30th January 2006.
They have: 43 posts
Joined: Sep 2005
yeah demon, it works, just uploaded the change.
Thx everybody
steve40 posted this at 21:34 — 1st February 2006.
He has: 490 posts
Joined: May 2005
Works on some but not all. This one guaranteed to work every where, and not to tear, rip, or run down at the heels.
Colors, and actions at your digressions of course!.
demonhale posted this at 01:19 — 2nd February 2006.
He has: 3,278 posts
Joined: May 2005
Steve she got all covered in her css, classes she used all work well... she uses classes with different a , a:hover , a:link , and a:visited tags... thats why it caused the problem before... she just forgot that tags for the container class...
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.