A
APT
Sorry to post so much recently, I am at wits end with what should be a
simple process
I am trying to absolute position a nav bar over a table. I have done this in
dozens of other sites but for some reason the nav won't line up in FF for
this site.
It works fine in IE. Where am I going wrong?
Here's the site:
http://www.hainesdolphins.org/kayak/html/index.php
Here's the CS (from listamatic), though tweaked with the obsolute
positioning:
#navcontainer ul
{
position: absolute;
top: 124px;
padding-left: 20px;
margin-left: 0;
color: #fff;
height: 12px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
z-index: 5;
}
#navcontainer ul li
{
display: inline;
}
#navcontainer ul li a
{
padding: 0em 1em;
float: left;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}
Here's the HTML:
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>
Thanks.
simple process
I am trying to absolute position a nav bar over a table. I have done this in
dozens of other sites but for some reason the nav won't line up in FF for
this site.
It works fine in IE. Where am I going wrong?
Here's the site:
http://www.hainesdolphins.org/kayak/html/index.php
Here's the CS (from listamatic), though tweaked with the obsolute
positioning:
#navcontainer ul
{
position: absolute;
top: 124px;
padding-left: 20px;
margin-left: 0;
color: #fff;
height: 12px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
z-index: 5;
}
#navcontainer ul li
{
display: inline;
}
#navcontainer ul li a
{
padding: 0em 1em;
float: left;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}
Here's the HTML:
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>
Thanks.