By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,627 Members | 1,149 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,627 IT Pros & Developers. It's quick & easy.

Please help! My css navbar will NOT work in IE6 ...

P: 1
Hi- this is the project that will not end! (sure you've all been there). I had originally purchased a php/css nav bar for the client, but it was buggy as hell, so I decided to do in css, in which I am still [sadly] a novice, I am afraid.

You can see the sample nav bar at www.tangerine-sky.com/horizontal_nav.html (I am pasting source code below)

It's very simple, has the css included in the page ... works fine on a mac, okay on firefox on a PC but is absolutely broken - no color, no dropdown menus, etc. - in IE6 on a PC ...

What am I missing to get it to display and function? I am looking at the code & am wondering if it is perhaps a broken table in the "If" parts ... but I can't tell where. I'm not quite understanding how the "tables" are used in this context. Please help.

Thank you!

my source code:

[code]<style type="text/css">

body {
FONT-FAMILY: Arial, Helvetica, sans-serif;
font-size: 60%;
}

.menu {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-WEIGHT: normal;
PADDING: 3px;
MARGIN: 0px auto 0px auto;
WIDTH: 100%; /* width of the box containing the horizontal menu */
COLOR: #515D5D;

HEIGHT: 18px;
TEXT-ALIGN: left;
z-index:1000;
font-size: .75em;
}

/* draw menu boxes */
.menu a {
CURSOR: hand;
WIDTH: 120px;
COLOR: #515D5D;
HEIGHT: 18px;
BACKGROUND-COLOR: BAD9D9; /* regular background color */
TEXT-ALIGN: left;
TEXT-DECORATION: none;
}

/* rollover */
.menu a:hover {
background: #CCE6DA; /* rollover background color */
COLOR: #666666; /* text color on rollover */
BACKGROUND-REPEAT: no-repeat;
POSITION: relative;
HEIGHT: 18px;
TEXT-ALIGN: left;
TEXT-DECORATION: none; /* remove link underline */
}



/* remove all the bullets, borders and padding from the menu list styling */
.menu ul {
padding: 0px;
margin: 0px auto 0px auto;
list-style: none;
text-align: center;
}

/* position relative so that you can position the sub levels */
.menu ul li {
position: relative;
height:18px;
display: inline;
margin: 0px;
padding: 0px;
float: left;
border: 1px solid grey; /* border around all cells */
}


/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
text-indent:5px;
}


.menu a:hover {
color:#fff;
background:#949e7c;
}

.menu ul li a:hover, .menu .sub ul li a:hover {
color:#666666;
background: #CCE6DA;
}

/* hide the sub levels and give them a position absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top: 18px;
left:0px;
display: block;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
}

/* second level button style */
.menu .sub ul li a {
background-color: #efefef;
background-position: bottom right;
width: 200px;
margin: 0px;
padding: 0px;
}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>



<div class="menu">

<ul>
<li><a href="../index.html"><strong>Home</strong></a>
</li>

<li><a href="how_oview.html"><strong>How It Works</strong></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="how_oview.html">Overview</a></li>
<li><a href="how_indepth.html">In Depth</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>


<li><a href="phys_oview.html"><strong>Physicians Info</strong> </a> <!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="phys_oview.html">Overview</a></li>
<li><a href="phys_features.html">Features</a></li>
<li><a href="phys_treatment_plan.html">Treatment Planning</a></li>
<li><a href="phys_indications.html">Clinical Indications</a></li>
<li><a href="phys_case_studies.html">Case Studies</a></li>
<li><a href="phys_publications.html">Publications</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>


<li><a href="pat_about_rs.html"><strong>Patient Info</strong></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="pat_about_rs.html">About Radio Surgery</a></li>
<li><a href="pat_stories.html">Patient Stories</a></li>
<li><a href="pat_locations.html">Locations</a></li>
<li><a href="pat_faq.html">FAQs</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>


<li><a href="tech_how.html"><strong>Technical Info</strong></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="tech_how.html">How It Works</a></li>
<li><a href="tech_qa.html">Quality Assurance</a></li>
<li><a href="dosimetry.html">Dosimetry</a></li>
<li><a href="tech_treatment_plan.html">Treatment Planning</a></li>
<li><a href="tech_reload.html">Reloading Radiation Source</a></li>
<li><a href="tech_siteplan.html">Site Planning</a></li>
<li><a href="tech_specs.html">Product Specifications</a></li>
<li><a href="tech_pubs.html">Publications</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>


<li><a href="comp_profile.html"><strong>About Us</strong></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="comp_profile.html">Profiles</a></li>
<li><a href="comp_press.html">Articles—Press</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="../contact.html"><strong>Contact</strong></a>
</li>



</ul>

</div>







<!-- end of info -->



<!--

<div class="menu">

<ul>



<li class="sub"><a href="#">Sales</a>

<ul>

<li><a href="#">Sales Report For Quickbooks</a></li>

</ul>

</li>



<li class="sub"><a href="#">Statements</a>

<ul>

<li><a href="#">Statement Search</a></li>

<li><a href="#">Generate Statements</a></li>

</ul>

</li>



<li class="sub"><a href="#">Payments</a>

<ul>

<li><a href="#">Upload Payments From Quickbooks</a></li>

</ul>

</li>



<li class="sub"><a href="#">Reports</a>

<ul>

<li><a href="#">Content Sales</a></li>

</ul>

</li>



</ul>

</div>

-->
[/CODE}
Nov 5 '06 #1
Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
Always validate your html and css to find your own errors first. YOu have two style elements at the beginning for one thing. In addition, case matters in Xhtml and css. Use lower case in both.
Nov 7 '06 #2

Post your reply

Sign in to post your reply or Sign up for a free account.