471,598 Members | 1,153 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,598 software developers and data experts.

CSS hover bug in IE and 2 other cliches.

2
I have found other bugs related to using hover is CSS with IE, but I cannot find a fix for my issue. I have checked it in both IE 6 & 7 with the same results.

I have built a drop-down menu using CSS and a touch of Javascript, by combining a couple tutorials I found online. The bug is when you mouse-over the menu in IE, the sub-menu pops out, but will disappear when you mouse-over it, but it doesn't happen everytime. Sometimes, it works fine.

This site is adult related, but there is are no explict images on this page.
http://www.gwenmedia.com/blog/

Here is the code


Expand|Select|Wrap|Line Numbers
  1. #nav ul
  2. {
  3. list-style: none;
  4. padding: 0;
  5. margin: 0;
  6. }
  7.  
  8. #nav li
  9. {
  10. float: left;
  11. margin: 0 0em;
  12. }
  13.  
  14. #nav li a
  15. {
  16. background: url(images/background.jpg) #fff bottom left no-repeat;
  17. height: 1.2em;
  18. line-height: 1.2em;
  19. float: left;
  20. width: 9.5em;
  21. display: block;
  22. border: 1px solid #b3b3b3;
  23. color: #ffffff;
  24. font-family: arial;
  25. font-weight: bold;
  26. font-size: 11px;
  27. text-decoration: none;
  28. text-align: center;
  29. }
  30.  
  31. /* Hide from IE5-Mac \*/
  32. #nav li a
  33. {
  34. float: none;
  35. }
  36. /* End hide */
  37.  
  38.  
  39.  
  40.  
  41. #nav li ul {
  42.     position: absolute;
  43.     width: 9em;
  44.     left: -999em;
  45. }
  46.  
  47. #nav li:hover ul {
  48.     left: auto;
  49.  
  50. }
  51.  
  52. #nav li:hover ul, #nav li.sfhover ul {
  53.     left: auto;
  54.  
  55. }
  56.  
  57. #nav li ul ul {
  58.     margin: -1em 0 0 10em;
  59. }
  60.  
  61.  
  62.  
  63. #nav, #nav ul {
  64.     padding: 0;
  65.     margin: 0;
  66.     list-style: none; 
  67.     line-height: 1;
  68. }
  69.  
  70.  
  71.  
  72. #nav li:hover ul, #nav li li:hover ul {
  73.     left: auto;
  74.  
  75. }
  76.  
  77. #nav li:hover a
  78. {
  79. background: url(images/background2.jpg) #fff bottom left repeat-x;
  80. }
  81.  
[html]
<ul id="nav">
<li><a>Main Menu</a>
<ul>
<li><a href="http://www.gwenmedia.com/index2.html">Home Page</a></li>
<li><a href="http://www.gwenmedia.com/news.html">Lastest News</a></li>
<li><a href="http://www.gwenmedia.com/forum/">Forum Page</a></li>
<li><a href="http://www.gwenmedia.com/2257.html">Compliance</a></li>
</ul>
</li>

<li><a>Tour</a>
<ul>
<li><a href="http://www.gwenmedia.com/tour.html">Take A Tour</a></li>
<li><a href="http://www.gwenmedia.com/latest.html">Lastest Updates</a></li>
<li><a href="http://www.gwenmedia.com/aboutus.html">About GwenMedia</a></li>
<li><a href="http://www.gwenmedia.com/models.html">Our Models</a></li>
<li><a href="http://www.gwenmedia.com/join.html">Join Now</a></li>
</ul>
</li>

<li><a>Members</a>
<ul>
<li><a href="http://www.gwenmedia.com/members/photos1.html">Photo Galleries</a></li>
<li><a href="http://www.gwenmedia.com/members/videoclips.html">Video Clips</a></li>
<li><a href="http://gwenmedia.com/members/stories.html">Fetish Stories</a></li>
<li><a href="http://gwenmedia.com/members/v_o_d.html">Video on Demand</a></li>
</ul>
</li>

<li><a>Store</a>
<ul>
<li><a href="http://www.gwenmedia.com/catalog/">Online Store</a></li>
</ul>
</li>

<li><a>On Demand</a>
<ul>
<li><a href="http://gwenmedia.com/ondemand.html">Video On Demand</a></li>
</ul>
</li>

<li><a>Links</a>
<ul>
<li><a href="http://www.gwenmedia.com/toplist/">Toplist</a></li>
<li><a href="http://www.gwenmedia.com/girlfriends.html">Girlfriends</a></li>
<li><a href="http://www.gwenmedia.com/links.html">Links</a></li>
<li><a href="http://www.gwenmedia.com/ourbanners.html">Our Banners</a></li>
</ul>
</li>

<li><a>Join</a>
<ul>
<li><a href="http://www.gwenmedia.com/join.html">How to Join</a></li>
</ul>
</li>

<li><a>Contact</a>
<ul>
<li><a href="http://www.gwenmedia.com/contactus.html">Contact Us</a></li>
<li><a href="http://www.gwenmedia.com/forum/">Requests</a></li>
<li><a href="http://www.gwenmedia.com/contactus.html">Report Problem</a></li>
</ul>
</li>



</ul>
[/html]
Expand|Select|Wrap|Line Numbers
  1.  
  2. <script type="text/javascript">
  3. sfHover = function() {
  4.     var sfEls = document.getElementById("nav").getElementsByTagName("LI");
  5.     for (var i=0; i<sfEls.length; i++) {
  6.         sfEls[i].onmouseover=function() {
  7.             this.className+=" sfhover";
  8.         }
  9.         sfEls[i].onmouseout=function() {
  10.             this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  11.         }
  12.     }
  13. }
  14. if (window.attachEvent) window.attachEvent("onload", sfHover);
  15. </script>
  16.  


Here are two other smaller issues with the same menu system.

When mousing over the menu, the background is supposed to change to a light grey image. It works in Mozilla and Safari, but not in IE.

Last is when mousing over the menu is Safari on a Mac, some of the text is cut off from one of the items in the sub-menu.




Any help would be super appreciated!
Oct 8 '07 #1
3 2517
drhowarddrfine
7,435 Expert 4TB
Please validate and fix your 52 html errors and two css errors.
Oct 8 '07 #2
noize
2
Ok, so now my style sheet is clean, and I have the HTML as clean as I can get it. I am still having the same problems as before.

Any advice anyone? Please. =)
Oct 13 '07 #3
drhowarddrfine
7,435 Expert 4TB
:hover does not work in IE except on <a> elements.
Oct 13 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

7 posts views Thread by LRW | last post: by
6 posts views Thread by Nikolaos Giannopoulos | last post: by
12 posts views Thread by Sander Tekelenburg | last post: by
15 posts views Thread by Robert Mark Bram | last post: by
2 posts views Thread by skipc | last post: by
24 posts views Thread by fehays | last post: by
7 posts views Thread by Cate Archer | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.