473,729 Members | 2,401 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS hover bug in IE and 2 other cliches.

2 New Member
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.

Here is the code

Expand|Select|Wrap|Line Numbers
  1. #nav ul
  2. {
  3. list-style: none;
  4. padding: 0;
  5. margin: 0;
  6. }
  8. #nav li
  9. {
  10. float: left;
  11. margin: 0 0em;
  12. }
  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. }
  31. /* Hide from IE5-Mac \*/
  32. #nav li a
  33. {
  34. float: none;
  35. }
  36. /* End hide */
  41. #nav li ul {
  42.     position: absolute;
  43.     width: 9em;
  44.     left: -999em;
  45. }
  47. #nav li:hover ul {
  48.     left: auto;
  50. }
  52. #nav li:hover ul, #nav li.sfhover ul {
  53.     left: auto;
  55. }
  57. #nav li ul ul {
  58.     margin: -1em 0 0 10em;
  59. }
  63. #nav, #nav ul {
  64.     padding: 0;
  65.     margin: 0;
  66.     list-style: none; 
  67.     line-height: 1;
  68. }
  72. #nav li:hover ul, #nav li li:hover ul {
  73.     left: auto;
  75. }
  77. #nav li:hover a
  78. {
  79. background: url(images/background2.jpg) #fff bottom left repeat-x;
  80. }
<ul id="nav">
<li><a>Main Menu</a>
<li><a href="http://www.gwenmedia.c om/index2.html">Ho me Page</a></li>
<li><a href="http://www.gwenmedia.c om/news.html">Last est News</a></li>
<li><a href="http://www.gwenmedia.c om/forum/">Forum Page</a></li>
<li><a href="http://www.gwenmedia.c om/2257.html">Comp liance</a></li>

<li><a href="http://www.gwenmedia.c om/tour.html">Take A Tour</a></li>
<li><a href="http://www.gwenmedia.c om/latest.html">La stest Updates</a></li>
<li><a href="http://www.gwenmedia.c om/aboutus.html">A bout GwenMedia</a></li>
<li><a href="http://www.gwenmedia.c om/models.html">Ou r Models</a></li>
<li><a href="http://www.gwenmedia.c om/join.html">Join Now</a></li>

<li><a>Member s</a>
<li><a href="http://www.gwenmedia.c om/members/photos1.html">P hoto Galleries</a></li>
<li><a href="http://www.gwenmedia.c om/members/videoclips.html ">Video Clips</a></li>
<li><a href="http://gwenmedia.com/members/stories.html">F etish Stories</a></li>
<li><a href="http://gwenmedia.com/members/v_o_d.html">Vid eo on Demand</a></li>

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

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

<li><a href="http://www.gwenmedia.c om/toplist/">Toplist</a></li>
<li><a href="http://www.gwenmedia.c om/girlfriends.htm l">Girlfrien ds</a></li>
<li><a href="http://www.gwenmedia.c om/links.html">Lin ks</a></li>
<li><a href="http://www.gwenmedia.c om/ourbanners.html ">Our Banners</a></li>

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

<li><a>Contac t</a>
<li><a href="http://www.gwenmedia.c om/contactus.html" >Contact Us</a></li>
<li><a href="http://www.gwenmedia.c om/forum/">Requests</a></li>
<li><a href="http://www.gwenmedia.c om/contactus.html" >Report Problem</a></li>

Expand|Select|Wrap|Line Numbers
  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>

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 2583
7,435 Recognized Expert Expert
Please validate and fix your 52 html errors and two css errors.
Oct 8 '07 #2
2 New Member
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
7,435 Recognized Expert Expert
:hover does not work in IE except on <a> elements.
Oct 13 '07 #4

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

Similar topics

by: LRW | last post by:
Below I'll paste my CSS and the HTML in question. But what's happening is, I'm trying to establish a link behavior for a class that's separate from the normal link class. I've established a: 's with no underline and then an underline for hover...but oddly, only ONE link will actually show the underline on hover. All the rest, even with the same HTML, won't pop up an underline. I just don't get it! If I could get any advice I'd really...
by: Nikolaos Giannopoulos | last post by:
If I have simplified html (I have removed height, weight, alt, etc... attributes to simplify the example) such as: <div id="header"> <a href="blah.html"><img src="img/blah.jpg"></a> </div> and the following CSS rule to apply a background color to text links on hover:
by: Sander Tekelenburg | last post by:
Trying to make some images disappear on hover (works), and others appear on hover (works not). In tested browsers, this gives the expected result: IMG.disappear {visibility: visible} IMG.disappear:hover {visibility: hidden} this does not: IMG.appear {visibility: hidden} IMG.appear:hover {visibility: visible}
by: Michael Rozdoba | last post by:
I've had some trouble getting IE to behave in respect of applying absolute positioning to a span on an a:hover. I can get it to work, but I don't understand why certain code causes it to fail to display the repositioned block. See an example at http://www.digitalrat.co.uk/test2/index.html Can anyone explain what IE thinks it's doing? The page is ugly as I've ripped most of the content & styling out to
by: Robert Mark Bram | last post by:
Hi All! Problem I began with: Netscape/Opera supports hover for different elements, IE only supports hover for <a> and I want to use hover for <td class="menu"> I then found a fix using some Javascript here: http://webpages.charter.net/mmmbeer/code/arbitrary-hover/ It works ok for IE now.
by: skipc | last post by:
I posted a recent message regarding navigating a table using arrow keys. I've got the code for the navigation working. My table contains rows of links (anchors). I can get to a specific link using the code for capturing a key. However, once I get to the link, I can focus(), for example... but what I really want is to activate the "hover" styles. I can fake the hover effect using javascript, but how do I do this and still allow the...
by: fehays | last post by:
Hello, I'm having a problem with the css hover effect in IE. I have an <a> tag with the following CSS: a.subNavItem { display:block; color:#464645; padding:2px 7px 4px 6px; font-family:verdana,arial,helvetica,sans-serif;
by: Cate Archer | last post by:
I want to have a border around an image that changes color when the mouse hovers over it. The following code works perfectly in FireFox but not in Internet Exploiter. The text link changes color but the image link stays the same. Anybody know how I can make it work in IE? I saw a web site where the guy got it to work in both browsers. <html> <head> <title>TEST</title>
by: Sigilaea | last post by:
My previous post got squashed because m post is too long. Sorry for that: I have an AJAX page with a CSS menu at the top. My problem is the hover functionality stops working after someone clicks on one of the details in the main blue section. This only occurs in IE6. IE7 and FF work correctly. The URL to the page is: http://www.coralap.com/dies281css.aspx Steps to reproduce: 1. Mouse over the top menu and verify the hover works. 2....
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.