homepage Welcome to WebmasterWorld Guest from 54.196.63.93
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS :Hover FF: ok IE6: Noway
Cannot get the div a span hover to work in IE
jelle76

5+ Year Member



 
Msg#: 3602365 posted 10:16 pm on Mar 16, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3602365 posted 11:10 pm on Mar 16, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3602365 posted 11:33 pm on Mar 16, 2008 (gmt 0)

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

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



 
Msg#: 3602365 posted 1:03 am on Mar 17, 2008 (gmt 0)

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

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



 
Msg#: 3602365 posted 6:35 am on Mar 17, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3602365 posted 8:55 am on Mar 17, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3602365 posted 7:17 pm on Mar 17, 2008 (gmt 0)

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

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



 
Msg#: 3602365 posted 7:25 pm on Mar 17, 2008 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved