CSS hover

[ktwilight]

i've found a website that does great with using css to hover a div container with the span tag nested inside...
i went 'bout an hack is up to suit my needs, but the main problem is find is that it doesn't work well with IE6, all other browsers work perfect... ;-/
and not only is that a main problem, i couldn't seem to get my html validated correctly... ;-/

here's the CSS code
div {
overflow: hidden;
cursor: crosshair;
background-repeat: no-repeat;
}
div.QnA {
background-image: url(../images/07.png);
width: 45px;
height: 12px;
}
div.QnA:hover {
background-image: url(../images/07_7.png);
width: 45px;
height: 12px;
}

in HTML it has the following
<td colspan="4"><a href="QnA.php" target="content"><div class="QnA"></div></a></td>

2 problems, IE doesn't like css hovering, and it seems that div containers don't like to be empty?

how can i solve both problems effectively? ;-/
i have come across other threads which are similar like this one [webmasterworld.com] and this too [webmasterworld.com] but rather, both of 'em do not have the main difference that i've hacked... ;-/

any help appreciated... ^^

[D_Blackwell]

IE only accepts :hover with the a tag:) You can't put it with a div in IE.

[DrDoc]

Actually, you can... If you use a .htc behavior file [xs4all.nl].

What you can't do, however, is put a div inside an anchor element [validator.w3.org]. The div is a block level element, and as such it is not allowed within the anchor, which is an inline element.

[ktwilight]

thanks DrDoc, i've just had a quick run on .htc and it works well... ^^ except the fact that it hovers the wrong image... ;-/ i'll contact the person to solve this... ^^ thanks once again...

it would be great if someone can help me with an alternative to the div anchor problem...
since i wouldlike to stay away from javascript, i can't seem to crack my head open in finding another solution in making this world well.

any suggestions is appreciated... ^^

[encyclo]

I know you said you wanted to avoid javascript, but you could try something like this:

<td onmouseover="this.style.background='url(../images/07.png)';" onmouseout="this.style.background='url(../images/07_7.png)';" onclick="location.href='QnA.php';" style="cursor:hand;">Your text here with a <a href="QnA.php">standard link</a> for when JS is disabled</td>

It's messy, but it validates, and could be what you're looking for.

[ktwilight]

but i am not using any text, it's pure images for links as my main navigation for the website... ;-/ that's why i have div inside the <a href> tag...

[DrDoc]

it's pure images for links as my main navigation

Why not just put the <img> inside the anchor then?

[ktwilight]

hmmm...afaik, i can't hover using the <img> tag unless i use javascript...
i'm trying to keep to the minimum on using javascript ya see... ^^;

[DrDoc]

Sure you can ;) The way I see it, there are two optimal solutions:

1) Use a transparent gif, and change the "background" of it using CSS
a:hover img { background-image: url(foobar.gif); }

2) Use a span tag instead of the div tag. It validates, and it serves the same purpose. If a forced line break is important, assign display:block to both the anchor and the span

[ktwilight]

wow! perfect...!
thanks alot DrDoc! great help! never thought of using the <span> tag to replace <div>...very good idea... :D

thanks once again! ^^

[ktwilight]

i can't seem to find the edit button... -.-;;
anywayz...problem solved... ^^ i've replaced the <div> to <span> and it works well, and it's validated :thumb:

one last problem... >.<
css doesn't seem to fully load everything, so whenever the mouse moves over the img, it needs to load up. should the external css supposed to finish loading in the background by the time the page is up? 'cuz i've tested by also waiting for a while before going over the img, and yet it still doesn't load up... ;-/

is there a good fix around it?