Link to home
Start Free TrialLog in
Avatar of pmagony
pmagony

asked on

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

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!
Avatar of oceanbeach
oceanbeach

Hello pmagony,

Have you tried using a:hover instead of li:hover?

I hope this helps!

oceanbeach
first you need to apply the behavior to your css:
behavior:url('whatever.htc');

I'm not sure what needs to be in the .htc file though.
Avatar of pmagony

ASKER

Hi Ocean,

I switched all the hover behaviors over to the the anchor tag and nothing is happening:

#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 { /* Top Level UL */
      list-style-type: none;
      position: relative;
      margin: 0px;
      padding: 0px;
      cursor: default;
}
#globalNav ul li  { /* Top Level LI */
      display: block;
      float: left;
      font-size: 12px;
      color: #FFFFFF;
      position: relative;
}
#globalNav ul li a:link, #globalNav ul li a:visited {
      color: #FFFFFF;
      text-decoration: none;
      display: block;
}
#globalNav ul li ul { /* Sub Level 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 a:hover ul { /* Sub Level UL */
      display: block;
      position: absolute;
      color: #F9C3DC;
}

#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;
}

Jason,

Like this:

<!--[if gt IE 6.0]>
<style type="text/css">
ul li {
  behavior: url( hover.htc );
}
</style>
<![endif]>-->
Avatar of pmagony

ASKER

Jason, in my previous post i forgot to remove "gt" out of the opening IF statement.  Please disregard it.

Ocean, in my css, some of the deeper level UL/LIs still have the :hover on the IL but it doesn't factor in since I can't get the first level of menus to appear in FF, IE7, or IE6.
ASKER CERTIFIED SOLUTION
Avatar of oceanbeach
oceanbeach

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hello pmagony,

I made several changes to your code, but you can try...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>document</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
      var sfEls = document.getElementById("globalNav").getElementsByTagName("LI");
      for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                  this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                  this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
      }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>
<style type="text/css">
/* - - - - - - - - - - */
/* from: http://www.htmldog.com/articles/suckerfish/dropdowns/ */
#globalNav, #globalNav ul { /* all lists */
      padding: 0;
      margin: 0;
      list-style: none;
      line-height: 1;
      
/*added*/      position: relative;
}
#globalNav a {
      display: block;
      /*width: 100px;*/
}
#globalNav li { /* all list items */
      float: left;
      width: 130px; /* width needed or else Opera goes nuts */
}
#globalNav li ul { /* second-level lists */
      position: absolute;
      width: 130px;
      left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */

/*added*/      top: 43px;
}
#globalNav li ul ul { /* third-and-above-level lists */
      /*margin: -1em 0 0 130px;*/
/*added*/      margin: -0.8em 0 0 130px;
}
#globalNav li:hover ul ul, #globalNav li:hover ul ul ul, #globalNav li.sfhover ul ul, #globalNav li.sfhover ul ul ul {
      left: -999em;
}
#globalNav li:hover ul, #globalNav li li:hover ul, #globalNav li li li:hover ul, #globalNav li.sfhover ul, #globalNav li li.sfhover ul, #globalNav li li li.sfhover ul { /* lists nested under hovered list items */
      left: auto;
}
/* - - - - - - - - - - */
#globalNav a { text-decoration: none; }
#globalNav {
      width: 100%;
      top: 115px;
      margin: 0px;
      padding: 0px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: .8em;
      height: 43px;
      background: #E71F7D url(../images/gNavBar-bg.gif) no-repeat 0px 0px;
}
#globalNav ul li  {
      font-size: 12px;
      background: #FE95C9 url(../images/subnav-bg.jpg) no-repeat left top;
      border-bottom: 1px solid #E71F7D;
      border-left: 3px solid #E71F7D;
}
#globalNav ul li a { padding: 10px; }
#globalNav #b1 {
      padding-top: 5px;
      height: 38px;
}
#globalNav #b2, #globalNav #b3, #globalNav #b4 {
      padding-top: 5px;
      height: 38px;
}
#globalNav #b5 {
      padding-top: 5px;
      height: 38px;
}
#globalNav #b6 {
      padding-top: 15px;
      font-size: 16px;
      font-weight: bold;
}
#globalNav span {
      font-size: 16px;
      font-weight: bold;
      margin-top: 5px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 3px;
      line-height: .85em;
}
#globalNav a:link, #globalNav a:visited {
      color: #FFFFFF;
}
#globalNav a:hover {
      color: #F9C3DC;
}
</style>

</head>
<body>
...code...
</body>
</html>

I hope this helps!

-OB
You could also use an HTC file... try removing the script & adding this style:

* html #globalNav,
* html #globalNav ul { /* all lists */
behavior: url('csshover.htc');
}

csshover.htc:
http://www.xs4all.nl/~peterned/htc/csshover.htc

-OB