Welcome to WebmasterWorld Guest from 54.159.26.69

Forum Moderators: not2easy

Message Too Old, No Replies

CSS :Hover FF: ok IE6: Noway

Cannot get the div a span hover to work in IE

     

jelle76

10:16 pm on Mar 16, 2008 (gmt 0)

5+ Year Member



Hi All,

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;
}

edit: You might want to know the doctype defs:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" encoding="UTF-8">

MarkFilipak

11:10 pm on Mar 16, 2008 (gmt 0)

5+ Year Member



First look: Unrelated to your problem, you can replace this:
<div class="browsefloati"> <img src="SomeImage.jpg" width="120"> </div>

with this:
<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?

jelle76

11:33 pm on Mar 16, 2008 (gmt 0)

5+ Year Member



Hi,

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 ..

DrDoc

1:03 am on Mar 17, 2008 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



fwiw, I always toggle the
display
property, as it elements with
display:none
are removed from the flow, and are ignored if/when tabbing through links, for example.

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.

SuzyUK

6:35 am on Mar 17, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



IE6 Bug :(

an oldie but goodie "Pure CSS Popups bug [webmasterworld.com]"

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 */

jelle76

8:55 am on Mar 17, 2008 (gmt 0)

5+ Year Member



Hi SuzyUK,

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.

jelle76

7:17 pm on Mar 17, 2008 (gmt 0)

5+ Year Member



ok.. seems like the thread is deemed solved.. I will start a new thread with the new issue; please let me know if this is not the preferred path to take..

DrDoc

7:25 pm on Mar 17, 2008 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Since it's a related issue, the discussion can just as well continue here :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month