SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot YAHA's Avatar
    Join Date
    Jan 2008
    Location
    MD, US
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy CSS Hover Pop-Out Menu IE 7 Bug

    I built a menu for my website using one of the tutorials on the web. The CSS of the menu uses the famous csshover.htc file to overcome IE bugs like white spaces between blocks, positioning, etc. The menu works great in all non-IE browsers + IE 5,6 . However, I cannot get it to work in IE 7. When you roll the cursor over the menu item, it registers the hover event, changes color like it is supposed to but the sub items don not show up. Has any one had a similar problem before?

    P.S. I am posting the html and css parts of the menu

    You can also check the menu at

    http://partsdepotgoodyear.com/performancedepot/


    Any help is greatly appreciated.


    Code:
    <div id="menu">
    <ul>
      <li><h2>Main Menu</h2>
        <ul>
          <li><a href="promotions/specials.pdf" title="SEO Consultants Directory">Promotions</a>
    	  		<ul>
    				<li><a href="#" title="SEO Consultants Directory">Detailing</a><li>
    				<li><a href="promotions/specials.pdf" title="SEO Consultants Directory">Installations</a><li>
    			</ul>
    	  </li>
          <li><a href="#" title="SEO Consultants Directory">Detailing</a>
          		<ul>
                	<li><a href="#" title="SEO Consultants Directory">Interior Services</a>
                    </li>
    				<li><a href="#" title="SEO Consultants Directory">Exterior Services</a>
                    </li>
    				<li><a href="#" title="SEO Consultants Directory">Combination Packages</a>
                    </li>
    				<li><a href="#" title="SEO Consultants Directory">Ala Carte</a>
                    </li>
    
                </ul>
          </li>
    
    	  <li><a href="#" title="SEO Consultants Directory">Electronics</a>
    	  		 <ul>
    				<li><a href="" title="SEO Consultants Directory">Remote Starters</a></li>
    				<li><a href="" title="SEO Consultants Directory">Alarm Systems</a></li>
                    <li><a href="" title="SEO Consultants Directory">Audio</a>
                    	<ul>
                        	<li><a href="" title="SEO Consultants Directory">Head Units</a></li>
                            <li><a href="" title="SEO Consultants Directory">Speakers</a></li>
                            <li><a href="" title="SEO Consultants Directory">Subwoofers</a></li>
                            <li><a href="" title="SEO Consultants Directory">Amplifiers</a></li>
                            <li><a href="" title="SEO Consultants Directory">Complete Systems</a></li>
                        </ul>
                    </li>    
    				<li><a href="" title="SEO Consultants Directory">Video</a>
                    	<ul>
                        	<li><a href="" title="SEO Consultants Directory">Flip Out TV</a></li>
                            <li><a href="" title="SEO Consultants Directory">Flip Down TV</a></li>
                            <li><a href="" title="SEO Consultants Directory">Head Rest TV</a></li>
                            <li><a href="" title="SEO Consultants Directory">Sun Visor TV</a></li>
                            <li><a href="" title="SEO Consultants Directory">Reverse Camera</a></li>
                        </ul>
    			</ul>
    	  </li>
    
    	  <li><a href="#" title="SEO Consultants Directory">Rims and Tires</a>
    	  		<ul>
    				<li><a href="#" title="SEO Consultants Directory">Rims</a></li>
    				<li><a href="#" title="SEO Consultants Directory">Performance Tires</a></li>
                    <li><a href="#" title="SEO Consultants Directory">Rim / Tire Packages</a></li>
    			</ul>
    	  </li>
    	  <li><a href="#" title="SEO Consultants Directory">Performance and Accessories</a>
          		<ul>
    				<li><a href="#" title="SEO Consultants Directory">Engine</a>
                    	<ul>
                    		<li><a href="#" title="SEO Consultants Directory">Engine Dress Up</a></li>
                            <li><a href="#" title="SEO Consultants Directory">Ignition Components</a></li>
                            <li><a href="#" title="SEO Consultants Directory">Bolt on Components</a></li>
                            <li><a href="#" title="SEO Consultants Directory">Internal Parts</a></li>
                            <li><a href="#" title="SEO Consultants Directory">Engine Assembly / Swaps</a></li>
                            <li><a href="#" title="SEO Consultants Directory">Miscellaneous</a></li>
                         </ul>
                    </li>
    				<li><a href="#" title="SEO Consultants Directory">Transmission</a>
                    		<ul>
                            	<li><a href="#" title="SEO Consultants Directory">Clutch</a></li>
                                <li><a href="#" title="SEO Consultants Directory">Torque Coverter</a></li>
                                <li><a href="#" title="SEO Consultants Directory">Flywheel / Flex Plate</a></li>
                                <li><a href="#" title="SEO Consultants Directory">Transmission Assembly</a></li>
                            </ul>
                    </li>
                    <li><a href="#" title="SEO Consultants Directory">Drive Line</a>
                    		<ul>
                            	<li><a href="#" title="SEO Consultants Directory">Drive Shafts</a></li>
                                <li><a href="#" title="SEO Consultants Directory">CV Axles</a></li>
                                <li><a href="#" title="SEO Consultants Directory">Rear End Assembling</a></li>
                            </ul>
                    </li>
    				<li><a href="#" title="SEO Consultants Directory">Suspension</a>
                    		<ul>
                            	<li><a href="#" title="SEO Consultants Directory">Shocks</a></li>
                                <li><a href="#" title="SEO Consultants Directory">Springs</a></li>
                                <li><a href="#" title="SEO Consultants Directory">Lowering Kits</a></li>
                                <li><a href="#" title="SEO Consultants Directory">Lift Kits</a></li>
                                <li><a href="#" title="SEO Consultants Directory">Coil Overs</a></li>
                                <li><a href="#" title="SEO Consultants Directory">Miscellaneous</a></li>
                            </ul>
                    </li>
                    <li><a href="#" title="SEO Consultants Directory">Brakes</a>
                    		<ul>
                            	<li><a href="#" title="SEO Consultants Directory">Disc Conversion</a></li>
                                <li><a href="#" title="SEO Consultants Directory">Perforated / Slotted Discs</a></li>
                                <li><a href="#" title="SEO Consultants Directory">Miscellaneous</a></li>
                            </ul>
                    </li>
                    <li><a href="#" title="SEO Consultants Directory">Intake</a>
                    </li>
                    <li><a href="#" title="SEO Consultants Directory">Exhaust</a>
                    </li>
                    <li><a href="#" title="SEO Consultants Directory">Miscellaneous</a>
                    </li>
    
    			</ul>
          </li>
           <li><a href="#" title="SEO Consultants Directory">Custom Paint and Body</a>
           		<ul>
    				<li><a href="#" title="SEO Consultants Directory">Custom Painting</a></li>
    				<li><a href="#" title="SEO Consultants Directory">Fabrications</a></li>
                    <li><a href="#" title="SEO Consultants Directory">Body Styling</a></li>
    			</ul>
    	  </li>
    	  <li><a href="#" title="SEO Consultants Directory">About Company</a>
    	  		<ul>
    				<li><a href="#" title="SEO Consultants Directory">History</a></li>
    				<li><a href="#" title="SEO Consultants Directory">Careers</a></li>
    				<li><a href="#" title="SEO Consultants Directory">Diversity</a></li>
    				<li><a href="#" title="SEO Consultants Directory">Mission</a></li>
    			</ul>
    	  </li>
    	  <li><a href="#" title="SEO Consultants Directory">Community</a>
    	  		<ul>
    				<li><a href="#" title="SEO Consultants Directory">Solicitation Requests</a></li>
    				<li><a href="#" title="SEO Consultants Directory">Events Calendar</a></li>
    			</ul>
    	  </li>
        </ul>
      </li>
    </ul>
    				
    </div>

    Code:
    /* CSS Document */
    
    #menu {
    width: auto;
    background: #CCCCCC;
    text-align:center;
    }
    
    
    #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    
    #menu a, #menu h2 {
    font: bold 11px/16px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 2px 3px;
    width:auto;
    }
    
    #menu h2 {
    color: #fff;
    background: #333333;
    text-transform: uppercase;
    width:auto;
    }
    
    #menu a {
    color: #CCCCCC;
    background: #66CC00;
    text-decoration: none;
    }
    
    #menu a:hover {
    color: #FFFF05;
    background: #FF6600;
    }
    
    #menu ul ul ul {
    position: absolute;
    top: 0;
    left: 0;
    }
    
    #menu li {position: relative;}
    
    #menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    }
    
    div#menu ul ul ul 
    {display: none;}
    
    div#menu ul ul li:hover ul 
    {display: block;}
    
    div#menu ul ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}
    
    div#menu ul ul li:hover ul 
    {display: block;}
    
    div#menu ul ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}
    
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {display: block;}
    
    
    
    <!--[if IE]>
    <style type="text/css" media="screen">
    body {
    behavior: url(csshover.htc); /* call hover behaviour file */
    font-size: 100%; /* enable IE to resize em fonts */
    } 
    
    #menu ul li {
    float: left; /* cure IE5.x "whitespace in lists" problem */
    width: 100%;
    }
    #menu ul li a {
    height: 1%; /* make links honour display: block; properly */
    } 
    
    #menu a, #menu h2 {
    font: bold 0.7em/1.4em arial, helvetica, sans-serif; 
    /* if required use em's for IE as it won't resize pixels */
    } 
    </style>
    <![endif]-->

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The if IE conditonal comment is placed in the css. That is not the right place, it should be placed inside the html head instead.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Zealot YAHA's Avatar
    Join Date
    Jan 2008
    Location
    MD, US
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    where exactly does it have to go? I tried having it within the <head> tags of the html file and it still doesnt work. The browser definitely processes the If section but nothing happens in IE 7.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •