CSS

On a page I am trying to get a series of floating divs, which have a link at the bottom, which -when hovered- show an explanation div. Seemed straighforward, and it was in FF. In IE6 it just will not work.. At the moment the latest version looks as follows, and works in FF, not IE. Hope someone can suggest where I am going wrong & how to fix it!

Cheers!

the box:

<div class="browsefloat"> 
 <div class="browsefloati"> 
 <img src="SomeImage.jpg" width="120"> 
 </div> 
 <div class="specs"> 
 <a href="SomeLink">Visit site</a><br /> 
 <a href="">Information 
 <span> 
 The Info 
 </span> 
 </a> 
 </div> 
</div> 

the css:

div.browsefloat { 
margin: 3px; 
border: 1px solid #A0ACC0; 
height: auto; 
float: left; 
text-align: center; 
height: 160px; 
} 
.browsefloat a span { 
display:none 
} 
.browsefloat a:hover span  
{ 
text-align: left; 
width: 250px; 
display: block; 
background-color: #ffffff; 
border: 1px solid #A0ACC0; 
position: relative; 
left: -150px; 
top: -200px; 
padding:10px; 
} 
div.browsefloati 
{ 
width: 120px; 
height: 120px; 
overflow: hidden; 
} 
.browsefloat a:hover img  
{ 
border: 1px solid black; 
} 

<div class="browsefloati"> <img src="SomeImage.jpg" width="120"> </div>

<img class="browsefloati" src="SomeImage.jpg">

I'm looking for something like :hover{visibility:visible} somewhere and not finding it.

From your problem description, it sounds like you want a tool tip to pop up when the visitor hovers over the a-element, correct?

The easiest, most x-browser way to do this is to toggle the {visibility:...} of the details-text (the tool tip) rather than switching between {display:none} and {display:block}.

Also, your a:hover span{position:relative} may screw up the flow of other things when the span's display property is changed to block. To get around that you may need to put each .browsefloat in its own z-index context to prevent them interacting with each other or with the main content (assuming that the tool tips may overlap other things). With only one sample of .browsefloat it's hard to guess about flow interaction. Try these suggestions and get back with results.

About IE, the only problem I see is (possibly) .browsefloat{height:auto}. It should not be needed and I think IE doesn't like it -- related to hasLayout?

Thanks for your reply. With regards to your points:

- the div around the images is to allow an overflow: hidden for the image area, so my images will all display the same max height, even if the dimensions are not right..

- I did the visibility through display: none vss block. The reason is that otherwise you have hover effects on the display:none span, I found (Maybe this could be solved using z-index, but I could not get it to do anything). I did try it again, but it did not help: IE is not displaying it.

The z-index: I couldn't get it to do anything useful :(

In FF the display: block; position relative does it exactly the way I want it: An information box neatly aligning with the box. in IE it doesn't do anything. The height: auto I removed; was a leftover from trials; it has a fixed height of 160px.

.. confused ..

The visibility property merely hides the elements, but they still affect the flow etc.

Anyway ... I just tested your code, and it appears to reveal the hidden span ... just, off screen. Where is it supposed to appear? Try it without positioning it first, and then you'll see what happens.

an oldie but goodie "Pure CSS Popups bug"

although there a couple things to note first,
I presume you also have some styling on the <a> links themselves? if not you'll need something because then you also have to give IE an a:hover rule

In general IE even in 7 (although this popups bug is itself fixed in 7) struggles with any extended <element>:hover selectors if the simple one isn't there, especially when the display: none/block toggle is being used.

you want:
<E>:hover span
<E>:hover img

you need first:
<E>
<E>:hover

and then because of the bug above, for IE6, when you do declare the hover rule you have to change more than just the color property, but you can simply declare a default property:value; if you don't want any changes to your link text on hover

e.g. to make your code work as it is
.browsefloat a {color: #000;}
.browsefloat a:hover {margin: 0;} /* mostly any default */

What a simple solution, and what a silly issue.. Adding a styling to the a:hover indeed helped, and now the span is shown.

However.. Gets me to a new troublesomy.. When the span is displayed, it affects the div.browsefloat. It blows it up to allow for the span, and then moves the span to where I would like to have it, leaving an bloated empty space at the bottom of the div.

Adding z-index to the .browsefloat {z-index:2} and to the a:hover span {z-index:3;} does not affect it (Which I think is because z-index only works on positioned element, and the div is float:left?).

Anybody a suggestion as to how to avoid the span affecting the other objects? Again: in FF not a problem, IE6 -as per usual- major headache..

J.