...

View Full Version : CSS woes in IE -- yes again



bobber205
12-28-2007, 03:06 AM
One is my fault for sure, the other maybe not.
http://67-42-48-70.eugn.qwest.net/seiyuu/displayseries2.php

That's my site. If it's down, it basically some links that when hovered, display an image. The css is below.



.seriesbox
{


height: auto;
width: auto;

}


.flashybox
{

/*float: left;*/
display: block;
height: auto;
width: auto;

}



.flashybox a span
{

display: none;
float: left;
color: yellow;
}

.flashybox a:hover span
{
display: inline;
float: none;
color: blue;
}

It works well in FF etc etc. But not IE6.
Also there's a weird purple line at the bottom of the image. Like this
http://i146.photobucket.com/albums/r248/bobber205/Picture7.png

Here is the relevant HTML for the rollover issue.



<div class="flashybox">

<b>G</b><br/><a href="addcharacter.php?series=Gankutsuou&addnewcharacter=false">Gankutsuou<br/>
<span><img src="pictures/gankutsuou.jpg" ></span></a>
<br/></div>

Any ideas on what I could do?

Note
Normally I would give a link to the actual site and not my local webserver, but my hosting company is having trouble with my site atm. <_<

koyama
12-28-2007, 08:07 AM
http://67-42-48-70.eugn.qwest.net/seiyuu/displayseries2.php

That's my site. If it's down, it basically some links that when hovered, display an image.
I navigated to your site, and it looks like you have changed your CSS a bit compared to what you have posted above. This is from your current CSS:


.flashybox a img
{
display: none;
float: left;
}

.flashybox a:hover img
{
display: inline;
float: none;
text-decoration: none;
border: 0px;
}

IE6 bug
There is a bug in IE6 for selectors like .flashybox a:hover img. They seem to be completely ignored unless you at the same time specify styles for the .flashybox a:hover selector which involve a background-position (even without background-image) or a change in background-color.

The solution
If you for example add this to your CSS then it should work in IE6 too:


.flashybox a:hover {
background-position: 0 0;
}


Related sources:

http://www.satzansatz.de/cssd/pseudocss.html#hoverdesc
http://friendlybit.com/css/ie6-bug-ignored-selector-hover-bug/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum