SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    navigation works in FF but not IE 8

    My site works so far in FF, but not in IE8 (not tested in any other browsers yet). The issue is with my navigation, for some reason the dropdown menus don't seem to work when they go over the section below where my navigation is.
    At the moment I am just putting a black box in there, but eventually I would like a flash animation in there. So need the navigation to work once it drops over the current black box.

    I am not 100% sure as I am no expert but is it something to do with overflow?


    HTML File

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <!--[if gte IE 5.5]>
    <script language="JavaScript" src="dhtml.js" type="text/JavaScript"></script>
    <![endif]-->
    </head>
    
    <body>
    
    <div id="wrapper">
    	<div id="inner_wrap">
        	<div id="header"><ul id="navmenu">
      <li><a href="/">Home</a></li> 
    	
    		<li><a href="aboutus.php">About Us</a>
    			<ul>
    			<li><a href="casestudies.php">Brands</a></li>
    			<li><a href="history.php">History</a></li>
    			<li><a href="locations.php">Locations</a></li>
    			<li><a href="news.php">News</a></li>
           		</ul>
          		</li>
    		
    		<li><a href="services.php">Services</a> 
            <ul>
              	<li><a href="onsiteservices.php">Industrialr</a></li>
              	<li><a href="onsiteservices.php">Service </a></li> 
            	<li><a href="onsiteservices.php">Gearbox </a></li>  
    		</ul>
    		</li> 
    		
    		<li><a href="services.php">Industries</a></li> 
    			
          <li><a href="products.php">Products</a> 
            	<ul>
    			<li><a href="geared-motors.php">Motors</a>
    				<ul>
    				<li><a href="">Geared </a></li>
    				<li><a href="">Geared </a></li>
    				<li><a href="">Geared </a></li>
    				<li><a href="">Geared </a></li>
    				<li><a href="">Geared </a></li>
    				<li><a href="">System</a></li>
    				<li><a href="">Construction</a></li>
    				<li><a href="">Connection</a></li>
    				</ul>
    		  		</li>
    
    			<li><a href="">Flexible Couplings</a>
    				<ul>
    				<li><a href="">Nylicon</a></li>
    				<li><a href="">ush</a></li>
    				<li><a href="">Coup</a></li>
    				<li><a href="">Grid s</a></li>
    				<li><a href="">Flex</a></li>
    				</ul>
    		  		</li>
    				
    			<li><a href="whp">Worm Gears</a>
    				<ul>
    				<li><a href="w">Compact </a></li>
    				<li><a href="whp">Small </a></li>
    				<li><a href="whp">Medium </a></li>
    				<li><a href="whp">Large </a></li>
    				<li><a href="rahp">Worm</a></li>
    				</ul>
    		  		</li>
    
    			<li><a href="i"> Gearboxes</a>
    				<ul>
    				<li><a href="in">Gearboxes </a></li>
    				<li><a href="i">Gearboxes </a></li>
    				</ul>
    		  		</li>
    			<li><a href="gea">Geared </a></li>
    			<li><a href="scp">Jacks</a></li>
                <li><a href="prp">Product Enquiry</a></li>
    			 <li><a href="http" target="_blank">Configurator/Drawings </a></li>
                </ul>
                </li> 
    	
    			<li><a href="services.php">News</a></li> 
    		<li><a href="services.php">Downloads</a> 
            <ul>
              	<li><a href="onsiteservices.php">Brochures</a></li>
    			<li><a href="onsiteservices.php">Catalogues</a></li> 
    			<li><a href="onsiteservices.php">Installation &amp; Maintenance</a></li>
    			<li><a href="onsiteservices.php">Calculators &amp; Converters</a></li> 
    												 
    		</ul>
    		</li> 		
    		<li><a href="services.php">Distribution</a> 
            <ul>
              	<li><a href="onsiteservices.php">Locator</a></li> 
    			<li><a href="onsiteservices.php">Distributor</a></li> 
    		</ul>
    		</li> 
          <li><a href="contactus.php">Contact Us</a></li> 
    </ul> <!-- close clearfix -->
         
            </div> <!-- close header -->
    
     <div id="content">
           			<div id="banner"><img src="images/radicon-animation.png" width"800 height"300" /></div>       	
                <div id="home_page">
    
                    
                    <div class="clearfix" style="margin-left: 15px;">
    				<h1>heading</h1>
                    	<div class="section">
    <p class="img"><img src="images/home/gearbox-repair-service.jpg" alt="" /></p>
    <h2><a href="services.php">text</a></h2>
    <h3>test</h3>
    <p>text.</p>
    <p class="view"><a href="services.php">Read More</a></p>
                        </div> <!-- close section -->
                        
                        <div class="section">
    <p class="img"><img src="images/home/seriesg-product.jpg" alt="" /></p>
    <h2><a href="products.php">text</a></h2>
    <h3>text</h3>
    <p>text</p>
    <p class="view"><a href="products.php">Read More</a></p>
                        </div> <!-- close section -->
                        
                        <div class="section">
    <p class="img"><img src="images/home/radicon-industries.jpg" alt="" /></p>
    <h2><a href="industries.php">text</a></h2>
    <h3>text</h3>
    <p>text </p>
    <p class="view"><a href="industries.php">Read More</a></p>
                        </div> <!-- close section -->
                        
                        <div class="section last">
    <p class="img"><img src="images/home/customer-service.jpg" alt="" /></p>
    <h2><a href="downloads.php">text</a></h2>
    <h3>text</h3>
    <p>text </p>
    <p class="view"><a href="downloads.php">Read More</a></p>
                        </div> <!-- close section -->
                    </div> <!-- close clearfix -->
    
                    
                </div> <!-- close home_page -->
            	
                
                    
            </div> <!-- close content -->
            
            
            <div id="footer" class="clearfix">footer section</div> <!-- close footer -->
    
        </div> <!-- close inner_wrap -->
    </div> <!-- close wrapper -->
    
    </body>
    </html>
    
    </body>
    </html>

    CSS navigation coding

    Code:
    /********************/
    /*GENERAL*/
    /*******************/
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000;
    	background: #fff;
    }
    
    p {margin-bottom: 15px;}
    
    a,
    a:link,
    a:visited {color: #d92926; outline: none; text-decoration: none;}
    a:hover {text-decoration: underline;}
    
    a.more,
    a.more:link,
    a.more:visited {
    	padding-left: 13px;
    	background: url("../images/arrows/red.gif") no-repeat 0 3px;
    }
    
    a img {border: 0;}
    
    h1 {
    	font-family: Myriad Pro, Arial, Helvetica, sans-serif;
    	font-weight: normal;
    	font-size: 24px;
    	text-transform: uppercase;
    	margin-bottom: 20px;
    	color: #d92926;
    }
    
    
    /*************/
    /* structure */
    /*************/
    
    #wrapper {
    	width: 972px;
    	margin: 25px auto 25px auto;
    }
    
    #inner_wrap {
    	width: 922px;
    	margin: 0 auto;
    	background: url("../images/chrome/shadow.gif") no-repeat center bottom;
    	padding-bottom: 40px;
    }
    
    /**********/
    /* header */
    /**********/
    
    #header {margin-bottom: 5px;}
    
    #header .top {
    	margin-bottom: 15px;
    }
    
    #searcher {
    	float: left;
    	display: inline;
    	width: 500px;
    }
    
    
    
    
    /**********/
    /* search */
    /**********/
    
    #logo {
    	float: left;
    	display: inline;
    	width: 251px;
    	margin-left:20px;
    }
    
    #banner {
    	text-align: center;
    	padding-bottom: 30px;
    	background: url("../images/chrome/dots.gif") repeat-x center bottom;
    	margin: -100px 0px 20px 0px;
    }
    
    /**************/
    /* navigation */
    /**************/
    
    ul#navmenu {
      margin: 0;
      padding: 0;
      width: 800px; /*For KHTML*/
      list-style: none;
      height: 24px;
      background-color:#fff;
    }
    
    ul#navmenu li {
      margin: 0;
      padding: 0;
      float: left; /*For Gecko*/
      display: inline;
      list-style: none;
      position: relative;
      height: 24px;
      width:70px;
    }
    
    ul#navmenu ul {
      margin: 0;
      padding: 0;
      width: 190px;
      list-style: none;
      display: none;
      position: absolute;
      top: 24px;
      left: 0;
    }
    
    ul#navmenu ul:after /*From IE 7 lack of compliance*/{
      clear: both;
      display: block;
      font: 1px/0px serif;
      content: ".";
      height: 0;
      visibility: hidden;
    }
    
    ul#navmenu ul li {
      width: 160px;
      float: left; /*For IE 7 lack of compliance*/
      display: block !important;
      display: inline; /*For IE*/
    }
    
    /* Root Menu */
    ul#navmenu a {
      padding: 0px;
      float: none !important; /*For Opera*/
      float: left; /*For IE*/
      display: block;
      background: #fff;
      color: #000;
      font: 11px/22px Arial, Helvetica, sans-serif;
      text-decoration: none;
      height: auto !important;
      height: 1%; /*For IE*/
    }
    
    /* Root Menu Hover Persistence */
    ul#navmenu a:hover,
    ul#navmenu li:hover a,
    ul#navmenu li.iehover a {
      background: #fff;
      color: #E8542A;
    }
    
    /* 2nd Menu */
    ul#navmenu li:hover li a,
    ul#navmenu li.iehover li a {
      float: none;
      background: #fff;
      color: #000;
    }
    
    /* 2nd Menu Hover Persistence */
    ul#navmenu li:hover li a:hover,
    ul#navmenu li:hover li:hover a,
    ul#navmenu li.iehover li a:hover,
    ul#navmenu li.iehover li.iehover a {
      background: #fff;
      color: #E8542A;
    }
    
    /* 3rd Menu */
    ul#navmenu li:hover li:hover li a,
    ul#navmenu li.iehover li.iehover li a {
      background: #fff;
      color: #000;
    }
    
    /* 3rd Menu Hover Persistence */
    ul#navmenu li:hover li:hover li a:hover,
    ul#navmenu li:hover li:hover li:hover a,
    ul#navmenu li.iehover li.iehover li a:hover,
    ul#navmenu li.iehover li.iehover li.iehover a {
      background: #fff;
      color: #E8542A;
    }
    
    /* 4th Menu */
    ul#navmenu li:hover li:hover li:hover li a,
    ul#navmenu li.iehover li.iehover li.iehover li a {
      background: #EEE;
      color: #666;
    }
    
    /* 4th Menu Hover */
    ul#navmenu li:hover li:hover li:hover li a:hover,
    ul#navmenu li.iehover li.iehover li.iehover li a:hover {
      background: #CCC;
      color: #FFF;
    }
    
    ul#navmenu ul ul,
    ul#navmenu ul ul ul {
      display: none;
      position: absolute;
      top: 0;
      left: 160px;
    }
    
    /* Do Not Move - Must Come Before display:block for Gecko */
    ul#navmenu li:hover ul ul,
    ul#navmenu li:hover ul ul ul,
    ul#navmenu li.iehover ul ul,
    ul#navmenu li.iehover ul ul ul {
      display: none;
    }
    
    ul#navmenu li:hover ul,
    ul#navmenu ul li:hover ul,
    ul#navmenu ul ul li:hover ul,
    ul#navmenu li.iehover ul,
    ul#navmenu ul li.iehover ul,
    ul#navmenu ul ul li.iehover ul {
      display: block;
    }
    
    
    
    /********/
    /* main */
    /********/
    
    #main {
    	float: left;
    	display: inline;
    	width: 623px;
    	margin-left: 20px;
    }
    
    #main p {line-height: 1.7em; margin-bottom: 20px;}
    
    #main p.intro {
    	font-size: 16px;
    	color: #838181;
    	margin-bottom: 20px;
    	line-height: 1.3em;
    }
    
    #main h3 {
    	font-size: 14px;
    	font-weight: normal;
    	margin-bottom: 5px;
    	color: #d92926;
    }
    
    #main h4 {
    	font-size: 12px;
    	font-weight: bold;
    	color: #d92926;
    	margin-bottom: 10px;
    }
    
    #main ul {
    	margin-bottom: 20px;
    	list-style-type: disc;
    	margin-left: 15px;
    }
    
    #main li {
    	margin-bottom: 3px;
    }
    
    #main .content_left {
    	float: left;
    	display: inline;
    	width: 300px;
    }
    
    #main .content_right {
    	float: right;
    	display: inline;
    	width: 300px;
    }
    
    #main .print {
    	font-size: 14px;
    }
    
    #main .print a,
    #main .print a:link,
    #main .print a:visited {
    	background: url("../images/icons/print.gif") no-repeat;
    	padding-left: 38px;
    	padding-top: 11px;
    }
    
    
    /***********/
    /* sidebar */
    /***********/
    
    #sidebar {
    	float: right;
    	display: inline;
    	width: 253px;
    }
    
    #sidebar h2 {
    	font-size: 14px;
    	font-weight: bold;
    	text-transform: uppercase;
    	margin-bottom: 15px;
    	color: #8b8b8b;
    }
    
    #sidebar p.img {
    	margin-bottom: 5px;
    }
    
    #sidebar p.enlarge {margin-bottom: 10px;}
    
    #sidebar .enlarge a,
    #sidebar .enlarge a:link,
    #sidebar .enlarge a:visited {
    	color: #838181;
    	background: url("../images/icons/enlarge.gif") no-repeat 0 0;
    	padding-left: 18px;
    }
    
    #sidebar .info_box {
    	border: 1px solid #000;
    	padding: 15px;
    }
    
    #sidebar .info_box h3,
    #sidebar .info_box p {
    	margin-left: 8px;
    }
    
    #sidebar .info_box h3 {
    	color: #d92926;
    	font-size: 14px;
    	font-weight: normal;
    	text-transform: uppercase;
    	margin-bottom: 5px;
    }
    
    #sidebar .info_box p {
    	font-size: 14px;
    	margin-bottom: 10px;
    	line-height: 1.5em;
    }
    
    #sidebar .info_box p.more {
    	font-size: 12px;
    }
    
    #sidebar .info_box .more a,
    #sidebar .info_box .more a:link,
    #sidebar .info_box .more a:visited {
    	background: url("../images/arrows/blue_double.gif") no-repeat 0 3px;
    	padding-left: 18px;
    }
    
    #sidebar .info_box .transmission {
    	background: url("../images/sidebar/info_box/transmission.jpg") no-repeat;
    	padding-top: 170px;
    }
    
    /* contact_box */
    
    #sidebar .contact_box {
    	color: #afafaf;
    	font-size: 12px;
    	font-weight: bold;
    	padding: 0px;
    	margin-bottom: 10px;
    }
    
    #sidebar .contact_box p {margin-bottom: 5px;}
    
    #sidebar .contact_box .phone {
    	color: #d92926;
    	font-size: 24px;
    	margin-bottom: 0;
    }
    
    /* industries_box */
    
    #sidebar .industries_box {
    	color: #afafaf;
    	font-size: 12px;
    	font-weight: bold;
    	background: url("../images/sidebar/bg_industries.jpg") no-repeat right top;
    	padding: 10px 130px 10px 10px;
    	border: 1px solid #afafaf;
    	margin-bottom: 20px;
    }
    
    #sidebar .industries_box p {margin-bottom: 5px;}
    #sidebar .industries_box p a {color: #6C6F70;}
    #sidebar .industries_box p a:hover {color: #d92926;}
    
    #sidebar .industries_box .box_title {
            font-weight: normal;
    	color: #d92926;
    	font-size: 19px;
    	margin-bottom: 5px;
    }
    
    /* promo */
    
    #sidebar .promo {
    	border: 1px solid #afafaf;
    	padding: 3px;
    	color: #fff;
    	margin-bottom: 20px;
    }
    
    #sidebar .promo h3 {
    	font-size: 14px;
    	color: #fff;
    	font-weight: bold;
    	margin-bottom: 5px;
    }
    
    #sidebar .promo .inside {
    	background: #60080a url("../images/sidebar/promo_gradient.jpg") no-repeat 0 0;
    }
    
    #sidebar .promo .text {
    	float: left;
    	display: inline;
    	width: 150px;
    	margin-top: 10px;
    	margin-left: 10px;
    	font-size: 11px;
    }
    
    #sidebar .promo .pic {
    	float: right;
    	display: inline;
    	width: 82px;
    }
    
    #sidebar .promo p {margin-bottom: 5px;}
    
    #sidebar .promo p.more {margin-bottom: 0;}
    
    #sidebar .promo a.more,
    #sidebar .promo a.more:link,
    #sidebar .promo a.more:visited {
    	color: #fff;
    	font-size: 12px;
    	background: url("../images/arrows/white_promo.gif") no-repeat 0 4px;
    }
    
    /* news */
    
    #sidebar .news {margin-bottom: 20px;}
    
    #sidebar .news .pic,
    #sidebar .news .date {
    	float: left;
    	display: inline;
    	width: 38px;
    	margin-right: 15px;
    	border: 1px solid #afafaf;
    }
    
    #sidebar .news .date .num {
    	margin: 0;
    	font-size: 20px;
    	color: #d92926;
    	text-align: center;
    }
    
    #sidebar .news .date .month {
    	color: #fff;
    	background-color: #afafaf;
    	margin: 0;
    	text-align: center;
    	font-weight: bold;
    	text-transform: uppercase;
    }
    
    #sidebar .news .text {
    	float: left;
    	display: inline;
    	width: 195px;
    	color: #6e6e6e;
    }
    
    #sidebar .news a,
    #sidebar .news a:link,
    #sidebar .news a:visited {
    	font-weight: bold;
    	text-decoration: underline;
    }
    	
    /* quote */
    
    #sidebar .quote {
    	background: #e2e2e2;
    	padding: 15px 15px;
    	font-size: 15px;
    }
    
    #sidebar .quote p {
    	margin-bottom: 5px;
    }
    
    #sidebar .quote p.more {margin-bottom: 0;}
    
    #sidebar .quote a.more,
    #sidebar .quote a.more:link,
    #sidebar .quote a.more:visited {
    	padding-left: 18px;
    	font-weight: bold;
    	background: url("../images/arrows/blue_solid.gif") no-repeat 0 3px;
    }
    
    #sidebar .quote_bottom {
    	width: 47px;
    	height: 17px;
    	background: url("../images/sidebar/quote_bottom.gif") no-repeat;
    }
    
    
    /************/
    /* list_box */
    /************/
    
    .list_box {
    	background: #d92926;
    	padding: 10px 20px;
    	color: #fff;
    	margin-bottom: 15px;
    	width: 603px;
    }
    
    .list_box h4 {
    	font-weight: bold;
    	color: #fff;
    	font-size: 12px;
    	margin-bottom: 8px;
    	text-align: left;
    }
    
    .list_box ul {
    	margin-left: 15px;
    }
    
    .list_box li {
    	margin-bottom: 8px;
    }
    
    
    /**********/
    /* footer */
    /**********/
    
    #footer {
    	background: url("../images/chrome/dots.gif") repeat-x;
    	padding-top: 30px;
    	color: #838181;
    	font-size: 11px;
    }
    
    #footer .logo {
    	float: left;
    	display: inline;
    	width: 187px;
    }
    
    #footer .links {
    	float: right;
    	display: inline;
    	width: 680px;
    	padding-top: 10px;
    	text-align: right;
    }
    
    #footer .links span {
    	padding: 0 15px;
    }
    
    
    /*************/
    /* home page */
    /*************/
    
    #home_page {margin-bottom: 20px;}
    
    
    
    #home_page .section {
    	float: left;
    	display: inline;
    	width: 191px;
    	padding: 0 15px;
    	border-right: 1px solid #c3c3c3;
    }
    
    #home_page .last {
    	border-right: none;
    }
    
    #home_page .section .img {
    	margin-bottom: 20px;
    }
    
    #home_page .radiconsection {
    	float: left;
    	display: inline;
    	width: 382px;
    	padding: 0 15px;
    	border-right: 1px solid #c3c3c3;
    }
    
    
    
    #home_page .section .img {
    	margin-bottom: 20px;
    }
    
    #home_page h2 {
    	font-size: 18px;
    	font-weight: normal;
    	margin-bottom: 3px;
    	color: #d92926;
    }
    
    #home_page h2 a,
    #home_page h2 a:link,
    #home_page h2 a:visited {
    	color: #d92926;
    }
    
    #home_page h3 {
    	font-size: 12px;
    	font-weight: normal;
    	color: #838181;
    	margin-bottom: 3px;
    }
    
    
    #home_page .view {
    	margin-bottom: 5px;
    }
    
    #home_page .view a,
    #home_page .view a:link,
    #home_page .view a:visited {
    	background: url("../images/arrows/blue_double.gif") no-repeat 0 3px;
    	padding-left: 18px;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    It's not possible to tell from the above snippet as the menu seems to be working in IE8 but of course all the images are missing so things may be in different places. If you have a link to the page it would be easier to debug.

    Make sure your header has a high z-index and position relative added to keep it on top of anything underneath.

    #header{position:relative;z-index:99}

    That seems like some old menu code and there are too many hacks than are needed for simple dropdown.

    Why are you giving that script to all IE versions above 5.5.?
    Code:
    <!--[if gte IE 5.5]>
    <script language="JavaScript" src="dhtml.js" type="text/JavaScript"></script>
    <![endif]-->
    It's only ie6 that doesn't understand hover on anything other than anchors so only target ie6 and below.

  3. #3
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, it was just one I had in my old folder, that version you have linked to I will use in future. Thank You

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    (link received via PM)

    Remove the overflow:hidden from .ulheader-section{} otherwise the dropdown menu can't escape.

    If you were using overflow to clear floats then use the clearfix that you already have in your page instead.
    Code:
    <ul class="ulheader-section clearfix">

  5. #5
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant thanks Paul.


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
  •