Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2007-07-20
7
Medium Priority
?
2,407 Views
Last Modified: 2013-12-08
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!
0
Comment
Question by:pmagony
  • 4
  • 2
7 Comments
 
LVL 12

Expert Comment

by:oceanbeach
ID: 19531719
Hello pmagony,

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

I hope this helps!

oceanbeach
0
 
LVL 17

Expert Comment

by:jasonsbytes
ID: 19531729
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.
0
 
LVL 9

Author Comment

by:pmagony
ID: 19532207
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]>-->
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 9

Author Comment

by:pmagony
ID: 19532227
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.
0
 
LVL 12

Accepted Solution

by:
oceanbeach earned 2000 total points
ID: 19532626
Hi pmagony,

Sorry about that...it would be more than just the simple change I suggested.  Cross browser css-only menus can get a little messy.

You may want to check these out:

menu using htc:
http://www.htmldog.com/articles/suckerfish/dropdowns/
http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones3.html

css-only menus (some need permission to use):
http://www.cssplay.co.uk/menus/

If you are still having trouble later, I will try to re-review your current code.

I hope this helps!

oceanbeach
0
 
LVL 12

Expert Comment

by:oceanbeach
ID: 19540307
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
0
 
LVL 12

Expert Comment

by:oceanbeach
ID: 19540314
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
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

No other job is as rewarding and demanding as building an iPhone app is. It is not really in the hands of the developer for the success of an iPhone app. Many factors operate jointly for every iOS application's success in the market.
Each password manager has its own problems in dealing with certain websites and their login methods. In Part 1, I review the Top 5 Password Managers that I've found to be the best. In Part 2 we'll look at which ones co-exist together and why it'…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
Suggested Courses
Course of the Month11 days, 12 hours left to enroll

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question