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:#949 e7c;
}
.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:hidd en;
position:absolu te;
top: 18px;
left:0px;
display: block;
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visi ble;
}
/* 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"><st rong>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_indep th.html">In Depth</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="phys_ovie w.html"><strong >Physicians Info</strong> </a> <!--<![endif]-->
<!--[if lte IE 6]><table><tr><td ><![endif]-->
<ul>
<li><a href="phys_ovie w.html">Overvie w</a></li>
<li><a href="phys_feat ures.html">Feat ures</a></li>
<li><a href="phys_trea tment_plan.html ">Treatment Planning</a></li>
<li><a href="phys_indi cations.html">C linical Indications</a></li>
<li><a href="phys_case _studies.html"> Case Studies</a></li>
<li><a href="phys_publ ications.html"> Publications</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="pat_about _rs.html"><stro ng>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_stori es.html">Patien t Stories</a></li>
<li><a href="pat_locat ions.html">Loca tions</a></li>
<li><a href="pat_faq.h tml">FAQs</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="tech_how. html"><strong>T echnical 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.h tml">Quality Assurance</a></li>
<li><a href="dosimetry .html">Dosimetr y</a></li>
<li><a href="tech_trea tment_plan.html ">Treatment Planning</a></li>
<li><a href="tech_relo ad.html">Reload ing Radiation Source</a></li>
<li><a href="tech_site plan.html">Site Planning</a></li>
<li><a href="tech_spec s.html">Product Specifications</a></li>
<li><a href="tech_pubs .html">Publicat ions</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="comp_prof ile.html"><stro ng>About Us</strong></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td ><![endif]-->
<ul>
<li><a href="comp_prof ile.html">Profi les</a></li>
<li><a href="comp_pres s.html">Article s—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="#">Statem ents</a>
<ul>
<li><a href="#">Statem ent Search</a></li>
<li><a href="#">Genera te Statements</a></li>
</ul>
</li>
<li class="sub"><a href="#">Paymen ts</a>
<ul>
<li><a href="#">Upload Payments From Quickbooks</a></li>
</ul>
</li>
<li class="sub"><a href="#">Report s</a>
<ul>
<li><a href="#">Conten t Sales</a></li>
</ul>
</li>
</ul>
</div>
-->
[/CODE}
