Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts

    IE span a:hover display issue

    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/prod.../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!!!!

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    :hover only works on links in IE, unfortunately.
    .
    .

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts

    links within span either?

    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?

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

  • #4
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    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.
    .
    .

  • #5
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Code for span

    Thanks again for your help!

    So here is the html and css for this span:

    HTML:
    Code:
    <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:
    Code:
    .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;
    }

  • #6
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    OK, good with the code. Now, what is it you're trying to achieve exactly?
    .
    .

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts

    a:hover span working better in IE6, but still not quite there

    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/prod.../270/index.htm

    Thank you so much for your help!

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by BenDesign View Post
    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/prod.../270/index.htm
    For me, the pop-up span isn't even showing up in IE6?

  • #10
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!!!

  • #11
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    So I found this workaround (http://www.tanfa.co.uk/css/articles/...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 ...
    Last edited by BenDesign; 08-07-2007 at 10:06 PM.

  • #12
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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.

  • #13
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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 ...

  • #14
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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.

  • #15
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Try adding this style:

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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •