csshover.htc promblem in IE

  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

I'm having trouble with csshover.htc on my custom 404 page in IE7. This hover works on all of my other pages except for this custom 404 page in IE7

Below I've posted all my code. Is there anything about a 404 page that would cause this csshover.htc implementation not to work?

CSS:
Code: [ Select ]
<style>
#menu {
            position:relative;
            z-index:2;
}
#menu a {
            display: block;
            color: #444444;
            text-decoration: none;
            padding:0px;
}
#menu a:hover {
            background-repeat: no-repeat;
            color:#EF0000;
            text-decoration:underline;
}
#menu ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
}
#menu li {
            position: relative;
            margin: 0px;
}
#menu li:hover {
            position: relative;
            background-color: #D4D4D4;
}
#menu ul ul {
            position: absolute;
            top: -2px;
            left: 94%;
            width: 100%;
}
#menu ul ul li {
            margin: 0px;
}
div#menu ul ul,
div#menu ul li:hover ul ul {
            display: none;
            padding:0px /* 2px;*/
}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul {
            display: block;
}
div#menu ul a ul,
div#menu ul ul a {
            text-align: left;
            color: #000000;
            font-weight:normal;
}
div#menu ul li:hover ul,
div#menu ul ul li:hover {
            background-color: #D4D4D4;
}
div#menu ul a:hover ul,
div#menu ul ul a:hover {
            background-image:none;
            background-color: #D4D4D4;
}
</style>
  1. <style>
  2. #menu {
  3.             position:relative;
  4.             z-index:2;
  5. }
  6. #menu a {
  7.             display: block;
  8.             color: #444444;
  9.             text-decoration: none;
  10.             padding:0px;
  11. }
  12. #menu a:hover {
  13.             background-repeat: no-repeat;
  14.             color:#EF0000;
  15.             text-decoration:underline;
  16. }
  17. #menu ul {
  18.             list-style: none;
  19.             margin: 0px;
  20.             padding: 0px;
  21. }
  22. #menu li {
  23.             position: relative;
  24.             margin: 0px;
  25. }
  26. #menu li:hover {
  27.             position: relative;
  28.             background-color: #D4D4D4;
  29. }
  30. #menu ul ul {
  31.             position: absolute;
  32.             top: -2px;
  33.             left: 94%;
  34.             width: 100%;
  35. }
  36. #menu ul ul li {
  37.             margin: 0px;
  38. }
  39. div#menu ul ul,
  40. div#menu ul li:hover ul ul {
  41.             display: none;
  42.             padding:0px /* 2px;*/
  43. }
  44. div#menu ul li:hover ul,
  45. div#menu ul ul li:hover ul {
  46.             display: block;
  47. }
  48. div#menu ul a ul,
  49. div#menu ul ul a {
  50.             text-align: left;
  51.             color: #000000;
  52.             font-weight:normal;
  53. }
  54. div#menu ul li:hover ul,
  55. div#menu ul ul li:hover {
  56.             background-color: #D4D4D4;
  57. }
  58. div#menu ul a:hover ul,
  59. div#menu ul ul a:hover {
  60.             background-image:none;
  61.             background-color: #D4D4D4;
  62. }
  63. </style>


IE-6 CSS:
Code: [ Select ]
<!--[if IE]>
    <style type="text/css" media="screen">
    body {
    behavior: url(http://qa.chiefsupply.com/csshover.htc);
    font-size: 100%;
    }
    #menu ul li a {height: 1%;}
    </style>
<![endif]-->
  1. <!--[if IE]>
  2.     <style type="text/css" media="screen">
  3.     body {
  4.     behavior: url(http://qa.chiefsupply.com/csshover.htc);
  5.     font-size: 100%;
  6.     }
  7.     #menu ul li a {height: 1%;}
  8.     </style>
  9. <![endif]-->


HTML:
Code: [ Select ]
<div id="menu"><ul>
             <li><a href="#">Top Brands &raquo;</a>
                    <ul>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li><a href="#">7</a></li>
                        <li><a href="#">8</a></li>
                        <li><a href="#">9</a></li>
                        <li><a href="#">10</a></li>
                    </ul>
             </li>
             <li><a href="#">Top Searches &raquo;</a>
                    <ul>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li><a href="#">7</a></li>
                        <li><a href="#">8</a></li>
                        <li><a href="#">9</a></li>
                    </ul>
             </li>
         </ul>
    </div>
  1. <div id="menu"><ul>
  2.              <li><a href="#">Top Brands &raquo;</a>
  3.                     <ul>
  4.                         <li><a href="#">1</a></li>
  5.                         <li><a href="#">2</a></li>
  6.                         <li><a href="#">3</a></li>
  7.                         <li><a href="#">4</a></li>
  8.                         <li><a href="#">5</a></li>
  9.                         <li><a href="#">6</a></li>
  10.                         <li><a href="#">7</a></li>
  11.                         <li><a href="#">8</a></li>
  12.                         <li><a href="#">9</a></li>
  13.                         <li><a href="#">10</a></li>
  14.                     </ul>
  15.              </li>
  16.              <li><a href="#">Top Searches &raquo;</a>
  17.                     <ul>
  18.                         <li><a href="#">1</a></li>
  19.                         <li><a href="#">2</a></li>
  20.                         <li><a href="#">3</a></li>
  21.                         <li><a href="#">4</a></li>
  22.                         <li><a href="#">5</a></li>
  23.                         <li><a href="#">6</a></li>
  24.                         <li><a href="#">7</a></li>
  25.                         <li><a href="#">8</a></li>
  26.                         <li><a href="#">9</a></li>
  27.                     </ul>
  28.              </li>
  29.          </ul>
  30.     </div>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

Took me a while to sort this one out, but I finally got it...

My custom 404.asp page was including product.asp which was including leftnav.asp

I took the IE specific CSS code (that was on leftnav.asp) and put it directly on the 404.asp page, and the nav started working right away in IE7.

Bada-bing Bada-boom!
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Does it work in IE8 ?

I thought htc behaviors was something Microsoft was going to do away with.
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

I ended up switching to http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html Son of Suckerfish. The csshover.htc, just wasn't stable enough for me. I've been very happy with my switch, thus far.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 112 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.