on :hover over an image - displaying text

msie not playing!

[richardtape]

Hello one and all! I've been absent for a while, but I'm back in the ball game now! Hope you all had an excellent festive period. Without further ado...

Using Eric Meyer's wonderful example [meyerweb.com] I have designed a page where amongst other things, there are 2 images (the same picture). One is float: left and one float: right - both in the same div.

The idea being that when a user hovers their cursor over the left hand image some text explaining what it is appears in the centre of the 2 images - and likewise for the right-hand image.

All is good in Firefox. msie simply wont play. It seems to work fine when, as in Meyer's example, he uses text as the link item, but when trying to use an image, it seems to die.

Is there a workaround for this, or am I going to have to lump it?

<div id="signup_images" class="signup_images"> 
<p> 
<a href="http://www.somesite.com/page1.php"> 
<img style="float:left" src="http://www.somesite.com/images/left_image.jpg" width="125" height="147" alt="alt text"> 
<span class="left_text"> 
<h2>Recommended</h2>Lorem Ipsum Dolet etc 
</span> 
</a> 
<a href="http://www.somesite.com/page2.php"> 
<img style="float:right; border: none" src="http://www.somesite.com/images/image2.jpg" width="125" height="147" alt="Alt2"> 
<span class="right_text"> 
<h2>Heading_Right</h2>Lorem Ipsum Dolet etc 
</span> 
</a> 
</p> 
</div> 

This has been styled as follows:

div#signup_images a span { 
display: none; 
} 
div#signup_images{ 
position:relative; 
} 
div#signup_images a:hover span.left_text{ 
position: absolute; 
 top:0px; 
 margin-left:130px; 
 margin-right:130px; 
display:block; 
 padding: 1px; 
z-index: 100; 
 color: black; 
 font: 10px Verdana, Arial, sans-serif; 
 text-align: left; 
} 
div#signup_images a:hover span.right_text{ 
position: absolute; 
 top:0px; 
 margin-left:130px; 
 margin-right:130px; 
display:block; 
 padding: 1px; 
z-index: 100; 
 color: black; 
 font: 10px Verdana, Arial, sans-serif; 
 text-align: right; 
} 

Any thoughts on how to get this to work in MSIE? As always, thanks in advance. Trust you are all well,

RT

[SuzyUK]

There's a known IE issue with this technique, there is a bug "pure css popups bug" ~ but also IE likes you declare
an plain a:hover rule before it's recognises the a:hover span rule ;)

so simply adding:
div#signup_images a:hover {text-indent: 0;}
should help, the text-indent is not important I just chose something that wouldn't conflict with your other CSS.

You could just move some of the a:hover span rule into the a:hover instead..
e.g.
div#signup_images a:hover {font: 10px Verdana, Arial, sans-serif;}

Suzy

[richardtape]

Ah! Thanks suzy! There's so many CSS browser bugs around that I'm not familiar with.

Time to google for some sort of repository for them!

Thanks again,

RT