blank space in menu in Firefox, not in IE

blank space

[gtka]

hi, i m trying to create a menu
In IE 6 all label links are created normally. However, when i m trying with FF , then, an blank space is created on left from the first link, as if i had some padding.

Any help?

My CSS code is:

#menu
{
width: 820px;
height: 30px;
margin: 0 auto;
background-color: #EFF3F9;
}
#menuleft 
{
float: left;
}
#menuleft ul {
margin: 0;
list-style: none;
line-height: normal;
}
#menuleft li {
display: inline;
}
#menuleft a {
display: block;
float: left;
height: 16px;
padding: 8px 18px 0 20px;
background: url(images/vertical_line.gif) no-repeat;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
#menuleft a:hover {
text-decoration: underline;
}
#menuleft .first a {
padding-left: 10px;
background: none;
}

my html code is

<div id="menu">
 <div id="menuleft">
 <ul>
 <li class="first"><a href="#">About Us</a></li>
 <li><a href="#">Products</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Clients</a></li>
 <li><a href="#">Support</a></li>
 </ul>
 </div> 
 </div>

[swa66]

Typical case of development in IE I'm afraid. IE is too buggy to develop in. Please consider developing with any other browser. Chck how it looks in IE last as it's the easiest path to get it right.

As far as I can tell Firefox displays it as it should be shown.
It's IE that's no honoring your centering it seems (that's the difference I see anyway.

What IE6 is ignoring are your auto left and right margins on #menu.

FWIW: Safari displays it almost exactly the same Firefox.

[D_Blackwell]

However, when i m trying with FF , then, an blank space is created on left from the first link, as if i had some padding.

You do have some padding. Add to #menuleft ul {padding: 0;}

Poof. That blank space on the left in FF goes aways and matches IE rendering.

But swa66 is right. Develop in anything but IE and your code will have less problems, and it will be easier to fix those that remain.

For example. The navigation menu, as coded, is completely broken in Opera. The padding fix does not address this more serious issue.

That issue is tied to where you are using display: block; and float: left; with <a>.

Comment out the following:

#menuleft a {
/*display: block;*/
/*float: left;*/

Now - that takes care of the inline rendering of the menu in Opera, and you are still okay in FF and IE. However, note that IE renders the menu bar all the way to the left, while Opera and IE are providing some space. This is the next step in the troubleshooting. You might consider working with #menu {margin: . There may be other preferable options for you, but there are a few ideas.

[D_Blackwell]

BTW - If you don't want to work with the #menu (margin:

This hack will work, but then you've got to deal with this global declaration, and that may become a real hassle. This, or something similar, declared as an IE conditional, will fix the issue in IE and have no effect on rendering in the browsers that work:)) Just another quick thought.

body {
text-align: center;
}

[g1smd]

Add a / to the start of the image URL so that the image still loads when the page is in a folder.