www.webdeveloper.com
Results 1 to 11 of 11

Thread: Navigation problems

  1. #1
    Join Date
    May 2007
    Posts
    25

    Navigation problems

    Hi, I really hope someone can help me with this, I've got a CSS menu on the company websites, with a drop down on one of the tabs, but when I move my mouse down over the drop down list it vanishes before I can get to anything after the first item.

    I have to point out, that this only happens in IE, firefox works perfectly.

    Its set up with 3 files; the menu, which I've separated into a JS and included in all the html pages; the CSS, which also contains the page CSS; and a IE 5.5 fix called dhtml.js

    Can anyone help me solve this problem?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    We have to see all documents

  3. #3
    Join Date
    May 2007
    Posts
    25
    The Navigation
    Code:
    <ul id="navmenu">
    	<li class="cssnav"><a href="#">Home</a></li>
    	<li class="cssnav"><a href="#">About Us</a></li>
    	<li class="cssnav"><a href="#">Products</a>
    		<ul>
    			<li><a href="#">Nova Express</a></li>
    			<li><a href="#">Nova Urban</a></li>
    			<li><a href="#">Nova Class</a></li>
    			<li><a href="#">MK128 Pedestal</a></li>
    			<li><a href="#">MK250 Height Adjuster</a></li>
    			<li><a href="#">MK300 Pedestal</a></li>
    			<li><a href="#">Trim Service</a></li>
    		</ul>
    	</li>
    	<li class="cssnav"><a href="#">Spares</a></li>
    	<li class="cssnav"><a href="#">Press</a></li>
    	<li class="cssnav"><a href="#">History</a></li>
    	<li class="cssnav"><a href="#">Brochure</a></li>
    	<li class="cssnav"><a href="#">Contact Us</a></li>
     </ul>

    The CSS
    Code:
    /* Root = Horizontal, Secondary = Vertical */
    ul#navmenu {
      margin: 0;
      border: 0 none;
      padding: 0;
      width: 768; /*For KHTML*/
      list-style: none;
      height: 24px;
    }
    
    ul#navmenu li {
      margin: 0;
      border: 0 none;
      padding: 0;
      float: left; /*For Gecko*/
      display: inline;
      list-style: none;
      position: relative;
      height: 24px;
    }
    
    ul#navmenu ul {
      margin: 0;
      border: 0 none;
      padding: 0;
      width: 160px;
      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 {
      border: 1px solid rgb(45,68,146);
      padding: 0 3px;
      float: none !important; /*For Opera*/
      float: left; /*For IE*/
      display: block;
      background: rgb(45,68,146);
      color: rgb(255,255,255);
      font: normal 12px/22px Tahoma, 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: rgb(26,77,129);
      color: #FFF;
    }
    
    /* 2nd Menu */
    ul#navmenu li:hover li a,
    ul#navmenu li.iehover li a {
      float: none;
      background: #EEE;
      color: rgb(0,0,0);
    }
    
    /* 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: rgb(45,68,146);
      color: #FFF;
    }
    
    /* 3rd Menu */
    ul#navmenu li:hover li:hover li a,
    ul#navmenu li.iehover li.iehover li a {
      background: #EEE;
      color: #666;
    }
    
    /* 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: #CCC;
      color: #FFF;
    }
    
    /* 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;
    }
    
    .cssnav{
    	width:96;
    	text-align:center;
    }

    The DHTML.JS
    Code:
    navHover = function() {
    	var lis = document.getElementById("navmenu").getElementsByTagName("LI");
    	for (var i=0; i<lis.length; i++) {
    		lis[i].onmouseover=function() {
    			this.className+=" iehover";
    		}
    		lis[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", navHover);

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Works fine in IE6 and IE7. Maybe some other rule is affecting the menu.

  5. #5
    Join Date
    May 2007
    Posts
    25
    Well the rest of the CSS doesn't have any UL or LI tags in it, but on the website the drop down vanishes on my computer before you can get to the option you want.

    its at http://www.chapmandriverseating.com.

    and the rest of the CSS is
    Code:
    /* Page Setup */
    BODY {
    	background-color:rgb(255,255,255); /* White */
    	color:rgb(0,0,0); /* Black */
    	margin:1pt 0pt 0pt 0pt;
    	scrollbar-face-color:rgb(255,255,255); /* White */
    	scrollbar-shadow-color:rgb(45,68,146); /* CHAPMAN BLUE */
    	scrollbar-highlight-color:rgb(255,255,255); /* White */
    	scrollbar-3dlight-color:rgb(45,68,146); /* CHAPMAN BLUE */
    	scrollbar-darkshadow-color:rgb(255,255,255); /* White */
    	scrollbar-track-color:rgb(255,255,255); /* White */
    	scrollbar-arrow-color:rgb(45,68,146); /* CHAPMAN BLUE */
    }
    
    
    
    /* Font styles for page and tables */
    font, td, div, ilayer, p {
    	font-family:tahoma;
    	font-size:13px;
    	font-style:normal;
    	font-variant:normal;
    	font-weight:normal;
    	letter-spacing:1px;
    	color:rgb(0,0,0); /* Black */
    }
    
    .price {
    	COLOR:rgb(255,51,0); /* RED (#ff3300) */
    	FONT:13px verdana, arial, sans-serif;
    	font-weight:bold;
    }
    
    .rollover {
    	LEFT:0px;
    	position:relative;
    	top:0px;
    	border:rgb(0,0,0) 1px solid; /* BLACK (#000000) */
    	margin-bottom:3px;
    }
    
    .rolloveron {
    	LEFT:2px;
    	position:relative;
    	top:2px;
    	border:rgb(0,0,255) 1px solid; /* DEEP BLUE (#0000ff) */
    	margin-bottom:3px;
    }
    
    
    h1 {
    	color:rgb(45,68,146);
    }
    
    font.red {
    	color:rgb(255,0,0); /* Red */
    	font-size:10px;
    }
    
    font.note {
    	color:rgb(0,0,0); /* Red */
    	font-size:10px;
    }
    
    font.service {
    	color:rgb(0,0,0); /* Black */
    	font-size:9px;
    	font-family:arial;
    }
    
    font.redl {
    	color:rgb(255,0,0); /* Red */
    }
    
    font.redb {
    	color:rgb(255,0,0); /* Red */
    	font-weight:bold;
    }
    
    font.blue {
    	color:rgb(45,68,146); /* CHAPMAN BLUE */
    	font-weight:bold;
    }
    
    font.green {
    	color:rgb(0,155,0); /* Green */
    	font-size:10px;
    }
    
    font.greenl {
    	color:rgb(0,155,0); /* Green */
    }
    
    font.white {
    	color:rgb(255,255,255); /* White */
    }
    
    
    
    /* Change to Standard Tags*/
    b {
    	font-size:16px;
    	font-weight:bold;
    }
    
    i {
    	font-size:20px;
    	line-height:17px;
    	font-style:normal;
    	font-weight:bold;
    }
    
    
    
    /* Bare links set */
    A,A:visited,A:active {
    	color:rgb(45,68,146); /* CHAPMAN BLUE */
    	text-decoration:none;
    	font-weight:None;
    }
    
    A:hover {
    	color:rgb(45,68,146); /* CHAPMAN BLUE */
    	text-decoration:underline;
    	font-weight:none;
    }
    
    /* Navigation links set */
    A.link,A.link:visited,A.link:active {
    	color:rgb(255,255,255); /* White */
    	text-decoration:none;
    	font-weight:None;
    }
    
    A.link:hover {
    	color:rgb(255,255,255); /* White */
    	text-decoration:underline;
    	font-weight:none;
    }
    
    /* Products links set */
    A.linkp,A.linkp:visited,A.linkp:active {
    	color:rgb(255,255,255); /* White */
    	text-decoration:none;
    	font-weight:none;
    }
    
    A.linkp:hover {
    	color:rgb(45,68,146); /* CHAPMAN BLUE */
    	text-decoration:underline;
    	font-weight:None;
    }
    
    /* Tech Supp links set */
    A.tech,A.tech:visited,A.tech:active {
    	color:rgb(0,0,0); /* Black */
    	font-size:11px;
    	font-family:garamond;
    	text-decoration:none;
    	font-weight:none;
    }
    
    A.tech:hover {
    	color:rgb(45,68,146); /* CHAPMAN BLUE */
    	font-size:11px;
    	font-family:garamond;
    	text-decoration:underline;
    	font-weight:None;
    }
    
    
    /* Table Data Attributes */
    td.bg {
    	background-color:rgb(45,68,146); /* CHAPMAN BLUE */
    }
    
    
    
    /* Additional Style */
    .blbord {
    	border:1px;
    	border-color:rgb(0,0,0); /* Black */
    }
    
    
    
    /* Bar Seperator */
    hr {
    	height:1px;
    	color:rgb(45,68,146); /* CHAPMAN BLUE */
    }

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    you must add a DTD
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  7. #7
    Join Date
    May 2007
    Posts
    25
    That didn't help, infact it made the menu all squashed together!

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    You should be using modern methods. DTD, css layout and not tables and depreciated elements.
    Code for Fx first then add a seperate css for IE in conditional comments
    Use the Suckerfish dropdowns menu, it is very robust.
    Use the validators: html and css

  9. #9
    Join Date
    May 2007
    Posts
    25
    Please don't tell me what I should and shouldn't be doing, I didn't write this websites I just fix it, but I'm at a lose with this menu, its been driving me nutty for ages.

    I've also tried many different menu styles and the one thats currently on there IS from suckerfish!

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The Suckerfish menu requires a strict DTD to work correctly.
    Add the DTD as give previously and change the css.

    This is just another fix, sooner or later the site will requite a rewrite.
    Attached Files Attached Files

  11. #11
    Join Date
    May 2007
    Posts
    25
    I am aware of that, but until my boss gives me the right provisions to redesign it, I'm stuck with this rubbish thing.

    Thank you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles