3 tier navigation

Struggling · #1 Jan 4th, 2007, 12:32

I have created the following page and finally got a 3 tier dropdown menu to work in FF opera etc and the page works perfectly. However in IE I have trouble

1. IE6 shoes the 3rd tier as soon as you click on the 1st tier
2. IE7 same as above but the page isn't centered either.

(The about us section and locations is where the 3rd tier should be)

Does anyone have any suggestions as to what might be causing these problems?? Or maybe another way to go about what am trying to achieve I like everyting else about the design just these 2 problems although there not major the majority of the sites users are IE so it is quite important. I have read the sticky tutorials but still can'tget the problems to work

Thank you for any advice

Here is the code I've trimed it down for easier reading

HTML

Code: Select all

 
<!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>
<title>Engineering manufacturers of Gears, simon johnstone Engineering</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="davidbrowncss.css" />
<script language="javascript" type="text/JavaScript">startList = function() { 
if (document.all&&document.getElementById) { 
navRoot = document.getElementById("nav"); 
for (i=0; i<navRoot.childNodes.length; i++) { 
node = navRoot.childNodes[i]; 
if (node.nodeName=="LI") { 
node.onmouseover=function() { 
this.className+=" over"; 
  } 
  node.onmouseout=function() { 
  this.className=this.className.replace 
   (" over", ""); 
   } 
   } 
  } 
 } 
} 
window.onload=startList; 
</script>
 
</head>
<body>
<div id="container"> 
   <div id="header">
 
 </div>
<div id="banner">
 
 </div>
 
 
   <div id="center"> 
 
  <h1 class="h1">simon johnstone Engineering</h1>
 
 
  </div>
 
 <div id="leftmenu"> 
  <ul id="nav"> 
 <li><a href="#">Home</a></li> 
 
 <li><a href="#">About Us</a>
  <ul>
  <li><a href="#">Case Studies</a></li>
  <li><a href="#">Locations</a>
   <ul>
   <li><a href="#">China</a></li>
   <li><a href="#">Australia</a></li>
   <li><a href="#">South Africa</a></li>
   <li><a href="#">Thailand</a></li>
   <li><a href="#">Sweden</a></li>
   </ul>
   </li>
  <li><a href="#">News</a></li>
  </ul>
  </li> 
              <li><a href="#">Support &amp; Downloads</a> 
        <ul>
          <li><a href="#">Installation &amp; Maintenance</a></li>
          <li><a href="#">Catalogues</a></li>
          <li><a href="#">Calculators &amp; Converters</a></li>
         </ul>
      </li> 
 
   <li><a href="#">Distributors</a> 
        <ul>
          <li><a href="#">Distributor Login</a></li>
          <li><a href="#">Distributor Locations</a></li>
          </ul>
      </li> 
<li><a href="#">Help</a> 
        <ul>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">Glossary</a></li>
          <li><a href="#">Sitemap</a></li>
        </ul>
      </li> 
      <li><a href="#">Contact Us</a></li> 
 
</ul> 
 
<img src="images/tl.gif" class="curve" alt="" /><img src="images/tr.gif" class="curve1" alt="" /><h2 class="h2">Powerful Brands</h2>
<div class="box">
<p class="boxtext">
<br />
 Working together allows us to offer a full range of gear products and provide global services and support.
 </p>
</div>
  </div>
 
 
 
<div id="rightmenu"> 
 
 <img src="images/tl.gif" class="curve" alt="" /><img src="images/tr.gif" class="curve1" alt="" /><h2 class="h2">Quick Info</h2>
<div class="box">
<p class="boxtext">Quickly find what your looking for:</p>
 
</div>
<img src="images/tl.gif" class="curve" alt="" /><img src="images/tr.gif" class="curve1" alt="" /><h2 class="h2">Latest News</h2>
<div class="box">
<p class="boxtext"><span class="rightdate">31/12/2006:</span><a href="#" class="rightlink">simon johnstone announce record profits for the year.</a> </p>
<p class="boxtext"><span class="rightdate">31/12/2006:</span><a href="#" class="rightlink">simon johnstone announce record profits for the year.</a> </p>
<p class="boxtext"><span class="rightdate">31/12/2006:</span><a href="#" class="rightlink">simon johnstone announce record profits for the year.</a> </p>
</div>
 
  </div>
 
 
 
  <div id="footer"><a href="" class="footerlink">Privacy Policy </a>
  <a href="" class="footerlink">Terms &amp; Conditions</a>
  <a href="" class="footerlink">Trademarks </a>
   <a href="" class="footerlink">Sitemap</a>
   <a href="mailto:webmaster@davidbrown.com" class="footerlink">Webmaster</a><br />
 <p class="pfooter">Copyright 2007 Limited All Rights Reserved</p></div>
</div>
</body>
</html>

CSS

Code: Select all

 
* {margin:0;padding:0}
body 
{
background-color: #fbfbfb;
color:#000;
}
#container 
{
width: 800px;
margin: 0px auto 0px auto;
margin-left:auto;
margin-right:auto; 
border-left: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
background: #fff;
}
 
* html #container
{
width: 810px;
w\idth: 800px;
}
#header 
{
width: 800px;
height: 110px;
background-color: #e72130;
}
 
#banner 
{
width: 800px;
height: 175px;
margin: 1px 0px 10px 0px;
padding: 0px;
}
#leftmenu 
{
width: 151px;
height: auto;
margin: 0px 0px 0px 2px;
padding: 0px 0px 0px 0px;
background-color: #fff;
display: inline;
float: left;
position:relative;
left:-448px
}
#center 
{
width: 450px;
background-color: #fff;
color: #000;
float:left;
position:relative;
left:175px;
margin: 0px;
padding: 0px;
}
#rightmenu 
{
width: 146px;
height: auto;
margin: 0px 2px 0px 0px;
padding: 0px;
background-color:#fff;
display: inline;
float: right;
}
* html #rightmenu
{
width: 146px;
w\idth: 145px;
}
#footer 
{
width: 800px;
background-color: #ebeced;
color: #fff;
text-align: center;
clear: both;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
 
 
ul 
{ 
margin: 0px 0px 20px 0px; 
padding: 0px; 
list-style: none; 
width: 151px; 
border-bottom: 1px solid #a7a7a7; 
font: 11px "Arial", Helvetica, Sans-serif;
} 
ul li 
{ 
position: relative; 
} 
li ul 
{ 
position: absolute; 
left: 150px; 
top: 0; 
display: none; 
} 
ul li a 
{ 
display: block; 
text-decoration: none; 
text-align: left; 
color: #333; 
background-color:#ebeced; 
padding: 2px 2px 2px 7px; 
border: 1px solid #a7a7a7; 
border-bottom: 0; 
} 
 
ul li a:hover 
{
background-color: #e72130;
color: #fff; 
}
li:hover ul li ul, li.over ul li ul { 
top: 0; 
display: none; 
}
li:hover ul, li.over ul, li ul li:hover ul, li.over ul li ul {
display: block;
background: #ffffff;
color: #3565aa;
} 
/* Fix IE. Hide from IE Mac \*/ 
* html ul li { float: left; height: 1%; } 
* html ul li a { height: 1%; } 
/* End */
 
 
.box
{
background-color: #ebeced;
margin: -2px 0px 20px 0px;
padding: 0px 0px 10px 0px;
}
.h1
{
font: 17px "Arial", Helvetica, Sans-serif;
font-weight: Bold;
text-align: center;
background-color: #fafafa;
color: #e72130;
margin: 0px 0px 20px 20px;
padding: 2px;
}
.h2 
{
font: 12px "Arial", Helvetica, Sans-serif;
font-weight: Bold;
text-align: center;
background-color: #e72130;
color: #ebeced;
margin: 0px;
padding: 1px;
}

ukgeoff · #2 Jan 4th, 2007, 16:40

I'd prefer if you could put the page somewhere with a link so I can look at in the browsers and manipulate it.

I have cut-n-pasted your code to try it and can tell you that the problem is with the JavaScript.

If you remove this script, you will find that things still work ok in Firefox, etc., and also in IE7.

This script is trying to make up for the IE6 lack of compliance in handling the pseudo : hover action on elements other than the <a> element.

I would direct you back to the menu tutorial and the use of the csshover.htc file and the way it is hooked into the xhtml pages.

Come back if you need more help.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Navigation	inkz	Web Page Design	2	Apr 22nd, 2008 15:33
CSS Navigation Help	penguin	Starting Out	3	Mar 15th, 2008 13:43
CSS Navigation Help!	crackafaza	Web Page Design	3	Jan 21st, 2008 15:56
CSS navigation	AdRock	Web Page Design	1	Jul 15th, 2006 10:56
2-tier ASP application	riclage	Classic ASP	6	Jan 29th, 2004 09:43

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
3 tier navigation