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}
