...

View Full Version : IE span a:hover display issue



BenDesign
07-25-2007, 06:31 PM
Hello,

I am working on a page that has a <span> that displays only on hover. Works fine in FF, but not in IE. I assume I am just need a script, but am unsure. Can someone point me in the right direction?

http://www.benworsleydesign.com/products/clamp-on/270/index.htm

In a similar, but unrelated, issue, I am also having trouble with my CSS drop-down in IE as well. Under the entry for "Indoor Air Quality" the secondary drop-down (ul ul li) is displaying fine in FF but not in IE. I've been banging my head trying to figure it out, so if anyone has guidance there, I'd really appreciate it.

Again, thank you very much for your help!!!!

Jutlander
07-25-2007, 07:21 PM
:hover only works on links in IE, unfortunately.

BenDesign
07-25-2007, 08:16 PM
Thank you for replying!

So, even though I have it coded as <a href="#"> it won't see it as a link? Here's the code i used. Is there anything I can do?




<li>Slim jaw and body<a href="#" class="glossary"> Benefit<span>Safe and easy to use in crowded electrical panels</span></a></li>

Jutlander
07-25-2007, 08:30 PM
What you have there is an empty span tag, which doesn't do anything as it is. It needs to be connected with an ID or a class. If you show all of your code, we might be able to help a bit further.

BenDesign
07-25-2007, 08:43 PM
Thanks again for your help!

So here is the html and css for this span:

HTML:


<div id="centerColumn">
<div id="productFeaturesBox">
<p><strong>The 270 with slim jaw and body is ideal for use in cramped work areas and crowded electrical panels. Capture in-rush current using peak hold mode. The 270 is cULus approved.</strong></p>
</div>
<ul>
<li>Slim jaw and body<a href="#" class="glossary"> Benefit<span>Safe and easy to use in crowded electrical panels</span></a></li>
<li>Analog peak hold to capture in-rush current<a href="#" class="glossary"> Benefit<span>Accurately capture actual peak in-rush current</span></a></li>
<li>Relative mode<a href="#" class="glossary"> Benefit<span>Enables temperature differential and low resistance &nbsp; measurements to be performed</span></a></li>
<li>Non-contact voltage detection<a href="#" class="glossary"> Benefit<span>Confirm voltage is present (24VAC or more) without using the test leads.</span></a></li>
<li>Capacitance<a href="#" class="glossary"> Benefit<span>Measure motor run and start capacitors </span></a></li>
<li>0.1 millivolt DC resolution<a href="#" class="glossary"> Benefit<span>Accurately measure thermocouples</span></a></li>
<li>Frequency<a href="#" class="glossary"> Benefit<span>Measure and adjust variable speed drives</span></a></li>
<li>AC/DC volts up to 600V and AC amps up to 400<a href="#" class="glossary"> Benefit<span>Enough range to safely perform measurements </span></a></li>
<li>Temperature function<a href="#" class="glossary"> Benefit<span>Measure temperature in ducts and rooms</span></a></li>
<li>DC microamps<a href="#" class="glossary"> Benefit<span>Measure flame safety current</span></a></li>
<li>Auto power off<a href="#" class="glossary"> Benefit<span>Increases battery life by turning off the tester when not in use. </span></a></li>
<li>CAT III 600V rated<a href="#" class="glossary"> Benefit<span>Safety for the operator and meter. </span></a></li>
<li>Diode, resistance, and audible continuity </li>
<li>4000 count display with 41 segment analog bar graph </li>
</ul>
</div>


CSS:


.glossary {
font-size: 7pt;
line-height: 8pt;
}
#centerColumn {
display:inline;
margin-top: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-right: 200px;
width: 220px;
}
#centerColumn li {
margin-left: 20px;
list-style-image: url(/images/bullet.gif);
margin-bottom: 3px;
}
#centerColumn ul li span {
display: none;
}
#centerColumn ul li a span {
position: absolute;
width: 180px;
padding: 15px;
margin: 0px;
z-index: 100;
border: 1px solid #000000;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #666666;
background-color: #e9e9e9;
font-size: 10pt;
line-height: 12pt;
}
#centerColumn ul li a:link span {
display: none;
}
#centerColumn ul li a:visited span {
display: none;
}
#centerColumn ul li a:hover span {
display: block;
text-indent: 0pt;
}
#centerColumn ul li a:active span {
display: none;
}

Jutlander
07-25-2007, 08:47 PM
OK, good with the code. Now, what is it you're trying to achieve exactly?

_Aerospace_Eng_
07-25-2007, 09:22 PM
http://psacake.com/web/jl.asp

BenDesign
08-06-2007, 05:55 AM
So I changed the CSS to use the tip from http://psacake.com/web/jl.asp, and now the pop-up span appears as it should in IE6. However, the word "Benefit" is appearing above the box even though it's z-index is lower than the window's is. Anyone understand why?

http://www.benworsleydesign.com/products/clamp-on/270/index.htm

Thank you so much for your help!

koyama
08-06-2007, 08:41 AM
So I changed the CSS to use the tip from http://psacake.com/web/jl.asp, and now the pop-up span appears as it should in IE6. However, the word "Benefit" is appearing above the box even though it's z-index is lower than the window's is. Anyone understand why?

http://www.benworsleydesign.com/products/clamp-on/270/index.htm

For me, the pop-up span isn't even showing up in IE6?

BenDesign
08-06-2007, 08:17 PM
Uh-oh. Upon further investigation, the problem I mention above is with IE7, and it's not working at all in IE6. Can anyone help me solve either problem?

Thank you for your help!!!

BenDesign
08-07-2007, 09:55 PM
So I found this workaround (http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp), but it still doesn't seem to take. It's still having layering issues in IE7 and doesn't appear at all in IE6. I also saw somewhere that it could be a hasLayout problem. Can anybody point me in the right direction?

Thank you for your help ...

garydarling
08-07-2007, 10:39 PM
A little help from Microsoft, if you can call it that:

http://msdn2.microsoft.com/en-us/library/ms533776.aspx

In a nutshell, two items that return a value of HasLayout=true cannot occupy the same space without some difficult workarounds. You gave span Layout when you gave it the style display:block.

The following elements always have layout: BODY, IMG, INPUT, TABLE and TD.

IE forces elements into separate space when they both have layout.

Google HasLayout and zoom:-1 for possible workarounds.

BenDesign
08-07-2007, 11:12 PM
So are you saying if I give the .info Layout, it will work? Or is it better no have only one item the span have Layout since 2 items with Layout can't occupy the same space. I'm sorry if that's a stupid question, but this stuff really doesn't make any sense to me. But if I should give Layout to .info, that's easy enough to do ...

garydarling
08-07-2007, 11:44 PM
I see what you mean in IE7, the A text underlying the SPAN box shows thru the box, almost as if the box were transparent. This doesn't appear to fit the description of a HasLayout issue. Hmmmm.

garydarling
08-08-2007, 12:21 AM
Try adding this style:


a .info:hover {
z-index:20;
}

BenDesign
08-08-2007, 05:23 PM
I thought that sounded like it would fix the IE7 problem, but alas, no dice. This is really a frustrating problem! I'm starting to wonder if this is even possible perhaps it's something I can do with javascript?

Thanks for your help ...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum