4 replies [Last post]
sofie5
Offline
newbie
Last seen: 16 years 38 weeks ago
Joined: 2005-11-17
Posts: 3
Points: 0

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

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 28 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

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;
}

This is my big chance . . . yep, I blew it . . .

sofie5
Offline
newbie
Last seen: 16 years 38 weeks ago
Joined: 2005-11-17
Posts: 3
Points: 0

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

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 28 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

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 . . .

This is my big chance . . . yep, I blew it . . .

sofie5
Offline
newbie
Last seen: 16 years 38 weeks ago
Joined: 2005-11-17
Posts: 3
Points: 0

Weird FF bug on Horizontal CSS menu

That is absolutely wonderful n8gz4ez Laughing out loud

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