PDA

View Full Version : IE pseudo-selectors question



butlins
02-09-2007, 12:29 PM
Just a quickie, to stop me from wasting time. I was looking at Gaddygirl's layout for her Education Consumers ClearingHouse site, and had an idea with regards CSS rollovers, which involved loading both a link img file and a rollover image file, adding a class to identify each, and using display:block and display:none to generate the rollover.

I know that IE won't apply pseudo-selectors to html elements other than links (the 'a' element), but I thought I was being rather clever in still applying the pseudo-selector to a link with a class applied to an image that sat within it which controlled the display.

This is the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rollover test</title>
<style>
* {
margin:0;
padding:0;
border:0;
}

#answers {
width:179px;
}

a img.link {
display:block;
}

a:hover img.link {
display:none;
}

a img.hover {
display:none;
}

a:hover img.hover {
display:block;
}
</style>
</head>
<body>
<div id="answers"> <a href="#"><img class="link" src="ECC_Head_06.gif" alt="Join discussion" width="179" height="43" /><img class="hover" src="ECC_Head_06_OVER.gif" alt="Join discussion" width="179" height="43" /></a> </div>
</body>
</html>


The file's also saved here (http://www.johndixon.org.uk/CodingForumStuff/rollovertest/rollovertest.htm), and predictably works nicely in FF, but not in IE.

Is this something worth pursuing as a technique, or is it all part of the same inability of IE to apply pseudo-selectors to anything but a link?

butlins
02-09-2007, 12:58 PM
I should look around a bit first - there's an article here (http://www.satzansatz.de/cssd/pseudocss.html) which explains the bug in IE, and how to fix it using:

a:hover {
background-position:0 0;
}
Which triggers a redraw event, apparently.

I still think this is quite a neat way to produce a pure CSS rollover.

ahallicks
02-09-2007, 03:01 PM
The easiest way to create pure CSS rollovers is to display the image you want in the CSS:

#image1 a {
background-image: url(blah);
width: 100px;
height: 50px;
float: left;
}

#image1 a:hover {
background-image: url(blah_over);
}

And the HTML:

<div id="image1"><a href="index.html"></a></div>

A nice rollover

Excavator
02-09-2007, 04:02 PM
Goodmorning Butlins,
That's a pretty cool idea... It seems to work really well in IE7 and FF2.
I'm not sure if generating more markup is better or not.

I would probably avoid it only because this (http://www.nopeople.com/CSS/CSS_rollover/) is proven to work so well already with no hacks.