troubleshooting Question

CSS :hover issues with IE6 & .HTC - looking to make it WORK.

Avatar of pmagony
pmagony asked on
Web DevelopmentCSSWeb Browsers
7 Comments1 Solution2455 ViewsLast Modified:
Hi Guys,

I've created a horizontal css navigation with 1 & 2 level drop down menus.  Here it comes... steady, steady, ok, in IE6 (IE5+) the menu doesn't work because of the :hover state on my LI's.  I've been digging around the 'Net for a work-around to make this compliant.

I've come across what I believe to be a decent solution, but I am having a hard time implementing it and getting it to work.  The solution is to utilize an hover.htc file with javascript commands that replace all :hover states with onmouseover & onmouseout commands so that our fearless IE users can navigate like the rest of us.

I'll present you with the HTML markup first:

<div id="globalNav">
  <ul>
    <li id="b1">
    <a href="#">About <br /><span>Company</span></a>
          <ul>
              <li>Overview</li>
            <li>Affiliations &amp; Memberships</li>
            <li>Press Room</li>
            <li>Careers</li>
      </ul>
    </li>
   
    <li id="b2"><a href="#">Plants &amp; <br /><span>Products</span></a>
          <ul>
               <li>Link 2a</li>
          <li class="sub">Link 2b
                <ul>
                  <li>Sub Link 2a</li>
                <li>Sub Link 2b</li>
            </ul>
          </li>
          <li>Link 2b</li>
          <li>Link 2b</li>
      </ul>
    </li>
   
    <li id="b3"><a href="#p">Availability &amp; <br /><span>Catalog</span></a>
          <ul>
               <li>Link 3a</li>
          <li class="sub">Link 3b
          <ul>
                  <li>Sub Link 3a</li>
                <li>Sub Link 3b</li>
            </ul>
          </li>
          <li>Link 3b</li>
          <li>Link 3b</li>
      </ul>
    </li>
   
    <li id="b4"><a href="#">Bougie<br /><span>Resource</span></a>
          <ul>
               <li>Link 4a</li>
          <li>Link 4b</li>
          <li>Link 4b</li>
          <li>Link 4b</li>
      </ul>
    </li>
   
    <li id="b5"><a href="#">Contact <br /><span>BGI</span></a>
          <ul>
               <li>Link 5a</li>
          <li>Link 5b</li>
          <li>Link 5b</li>
          <li>Link 5b</li>
      </ul>
    </li>
   
    <li id="b6"><a href="#">Shop</a></li>
  </ul>
</div>

Now the CSS:

#globalNav {
      background-image: url(../images/gNavBar-bg.gif);
      background-repeat: no-repeat;
      background-position: 0px 0px;
      background-color: #E71F7D;
      position: absolute;
      width: 100%;
      top: 115px;
      margin: 0px;
      padding: 0px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: .8em;
      height: 43px;

}
#globalNav ul {
      list-style-type: none;
      position: relative;
      margin: 0px;
      padding: 0px;
      cursor: default;
}
#globalNav ul li  {
      display: block;
      float: left;
      font-size: 12px;
      color: #FFFFFF;
      position: relative;
}
#globalNav ul li:hover, #globalNav ul li  {
      color:#F9C3DC;
      cursor: pointer;
}
#globalNav ul ul {
      list-style-type: none;
      margin: 0px;
      padding: 0px;
      position: absolute;
      top: 41px; /* Adjust this to 41px if menu is jumpy.*/
      display: none;
      margin-left: -20px;
}
#globalNav ul li > ul {
      display: none;
      position:absolute;
}

#globalNav ul li:hover > ul {
      display: block;

}
#globalNav ul ul {
      display: block;
}
#globalNav ul ul li {
      float: none;
      padding: 10px;
      position: relative;
      background-color: #FE95C9;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #E71F7D;
      border-left-width: 3px;
      border-left-style: solid;
      border-left-color: #E71F7D;
      display: block;
      text-decoration: none;
      margin: 0px;
      width: 110px;
      background-image: url(../images/subnav-bg.jpg);
      background-repeat: no-repeat;
      background-position: left top;
}
#globalNav ul ul li.sub {
      background-color: #FE95C9;
      background-image: url(../images/subsub-bg.jpg);
      background-repeat: no-repeat;
      background-position: right bottom;
}
#globalNav ul ul ul { /* Sub Sub Level UL UL UL */
      list-style-type: none;
      margin: 0px;
      padding: 0px;
      position: absolute;
      left: 130px;
      top: 0px;
      display: none;
}
#globalNav ul li ul li > ul{ /* Sub Sub Level UL UL UL*/
      display: none;
      position:absolute;
}
#globalNav ul li ul li:hover > ul { /* Sub Sub Level UL UL UL */
      display: block;

}
#globalNav ul ul ul li {
      float: none;
      padding: 10px;
      position: relative;
      background-color: #FE95C9;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #E71F7D;
      display: block;
      text-decoration: none;
      margin: 0px;
      width: 100px;
      border-left-width: 3px;
      border-left-style: solid;
      border-left-color: #E71F7D;
}
#globalNav #b1 {
      padding-left: 20px;
      padding-top: 5px;
      left: 0px;
      top: 0px;
      height: 38px;

}
#globalNav #b2, #globalNav #b3, #globalNav #b4 {
      padding-left: 45px;
      padding-top: 5px;
      height: 38px;
}

#globalNav #b5 {
      padding-left: 50px;
      padding-top: 5px;
      height: 38px;
}
#globalNav #b6 {
      padding-left: 50px;
      padding-top: 15px;
      font-size: 16px;
      font-weight: bold;
}
#globalNav span {
      font-size: 16px;
      font-weight: bold;
      display: block;
      margin-top: 5px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 3px;
      line-height: .85em;
}
#globalNav a:link, #globalNav a:visited {
      color: #FFFFFF;
      text-decoration: none;
      display:block;
}
#globalNav a:hover {
      color: #F9C3DC;
}

HTC File

<public:component>
<public:attach event="onmouseover" onevent="hover()" />
<public:attach event="onmouseout"  onevent="restore()" />
<script language="JavaScript">
   var normalClass;

   function hover()
   {
      normalClass  = element.className;
      element.className = normalClass + 'hover';
   }

   function restore()
   {
      element.className = normalClass;
   }
</script>
</public:component>

In theory, I would like for the .htc file to kick-in only if its IE6 or less, so I imagine I need a conditional statement at the head of my code that calls it in.

I've uploaded what I have, and all works as intended in IE7 & FF but not in IE6.  Nothing happens.  I'm not sure if I need to change anything in the .htc file or leave it as is.  

The catch here is that I do not have any classes that command :hover. I have :hover directly applied to LI element.  How can I get this to work?

Thanks!
ASKER CERTIFIED SOLUTION
oceanbeach

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 7 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros