5 replies [Last post]
tobi
tobi's picture
Offline
Regular
Last seen: 10 years 38 weeks ago
Timezone: GMT+2
Joined: 2007-03-22
Posts: 38
Points: 4

Hello
Here comes a probably really stupid question, but I don´t get the a:hover (underline) effect to work in FF, but well in IE, I am sure it´s a slip, but I can´t find it.. Could any kind soul have a look and see what I´m missing - please Smile

In the red div to the right, the text is linked, and in IE it gets underlined when hovered, but not in FF. The really weird thing is that it does work for the bottom link (within the red) in FF - have a look:

http://tobiasstrollo.se/test/3/assistent.html

And if somebody prefers code - it looks like this in the html:

<div id="newsContent"">
				<div class="paddingContainer">
				<h2>Nyheter</h2>
 
					<div class="newsPuff">
					<i>9 - 11 september 2008</i>
					<a href="nyheter.html"><em>Ett bra liv - p&aring; stockholms&auml;ssan</em>
					<p>Mässan erbjuder allt för att förenkla livet för människor i livets olika skeenden...</p></a>
 
					<i>31 maj 2008</i>
					<a href="nyheter.html"><em>Stockholm Marathon</em>
					<p>Vid årets Stockholm Marathon sprang 13 deltagare f&ouml;r Fredrik och Petra Rundqvists...</p></a>
 
					<p><a href="nyheter.html" class="pil"><b>Se alla nyheter</b></a></p>
					</div>
 
 
				</div>
			</div>

And the css for that:

#newsContent a.pil   {background: url(../pics/news_pil1.gif) no-repeat center right; padding-right: 18px; }
#newsContent a.pil:hover {text-decoration:underline; background: url(../pics/news_pil2.gif) no-repeat center right; padding-right: 18px;}
 
#newsContent a   {font: normal 1em Georgia, Times News Roman, Times, serif; color:#fff; text-decoration:none;  }
#newsContent a:hover {text-decoration:underline; }

Hope somebody sees the obvious (that I don´t see)

THanx a million!
/Tobias

alexvorn2
Offline
Regular
Last seen: 11 years 32 weeks ago
Joined: 2008-07-05
Posts: 22
Points: 0

try to use css style for "a"

try to use css style for "a" tag only not for "div".

mpoveda
mpoveda's picture
Offline
Enthusiast
Costa Rica
Last seen: 8 years 9 weeks ago
Costa Rica
Timezone: GMT-6
Joined: 2007-06-22
Posts: 104
Points: 29

try: a.newsPuff:hover

try:
a.newsPuff:hover {text-decoration:underline;}

..."Many of my friends have moved away. They search in other places for happiness. Little do they know that there is nothing to be found out in the world to give you happiness for happiness does not originate from "out there"...

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 11 years 42 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

Run your code through CSS

Run your code through CSS validator.

You will see that you are not supposed to put a "p" tag inside of an "a" tag.

But if you want to just do it the wrong way, you can just do this:

a:hover {text-decoration:underline;display:block};

MikePixel
MikePixel's picture
Offline
Enthusiast
Everett, WA
Last seen: 6 years 3 weeks ago
Everett, WA
Timezone: GMT-7
Joined: 2008-06-20
Posts: 91
Points: 8

Validation

Validation Rocks!

Validating markup helps a lot to fix issues it is good practice especially before posting.

tobi
tobi's picture
Offline
Regular
Last seen: 10 years 38 weeks ago
Timezone: GMT+2
Joined: 2007-03-22
Posts: 38
Points: 4

Wow - thank you all for all

Wow - thank you all for all the good answers!
Many good solutions, thanx for your time! Hm - I didn´t know you couldn´t put a p-tag inside an a-tag.. Live and learn! And YES! Validation! Missed that there - good one!

Once again
Thanx a million!
Laughing out loud Tobias