Hello guys,
I have been working with implementing this menu from listamatic cssmaxdesign,
http://css.maxdesign.com.au/listamatic/horizontal03.htm
This code works ok in IE (amazingly though) but I cant get it to work in Firefox. It padds top and bottom like a 3px border.
Here is the code:
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
CSS
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}
Any help on this appreciated.
/Sofie
Weird FF bug on Horizontal CSS menu
They look the same to me in FF and IE. What you are seeing is probably the margins from the body. Try:
body { margin: 0; } #navcontainer ul { padding: 0 0 0 0; margin: 0 0 0 0; background-color: #036; color: #000; float: left; width: 100%; font-family: arial, helvetica, sans-serif; }
Weird FF bug on Horizontal CSS menu
That xtra padding and margin values spills the menu to the right of our website.
Here is the actual Website
When I view the page in IE its fine but when I view it in FF the two images (below and top) of the menu is more apart, like a thick white border.
Sofie
Weird FF bug on Horizontal CSS menu
#navcontainer ul { background: url(http://www.holdembonus.com/images/backgroundfull.gif) #fff; padding-left: 0; margin: 0; background-color: #fff; color: White; float: left; width: 100%; font-family: arial, helvetica, sans-serif; font-weight: bold;
Closed the gap . . .
Weird FF bug on Horizontal CSS menu
That is absolutely wonderful n8gz4ez
If you have one more min you see that I use float left, I really would want it centered but it seems almost impossible to have it centered both in IE and in FF.
Sofie