Need help for CSS Navigation in FF & IE

[Stephen3]

I'm beginner on css, just tried do a nav bar, but it look different on FF and IE.
please help correct the css so can work fine in both browser...

here is the site.. IE is ok but problem with FF & Opera.
http://www.mvwebz.com/test/

css file:
http://www.mvwebz.com/test/style.css

 

[JYM]

A quick look at your code showed me that in your list, your spans were empty.

<li><a href="#">Home<span></span></a></li>

It should be

<li><a href="#"><span>Home</span></a><li>

This will make your layout look different, but I'm not sure if it will totally fix your problem. I do not have IE6.0 on this comp, so testing it out in IE6.0 is hard.

 

[DylanButler]

@JYM: Upon closer inspection you'll notice the spans are actuall for the replacement of that 'x' image, so those are correct.
The problem here is that your ul is getting a default padding since you did not remove it in the first line of the css.

Add this to #nav ul {

padding:0;

}

and it will work primo in IE and FF!

 

[JYM]

Good job Dylan

I was in a rush so I just took a very quick glance at the html, in most cases there is text between the spans (doing otherwise it is somewhat unorthodox).

What I would have done in this case, was set a background image for 'li' (the section in the middle of the overall nav image), then set one round corner as bg image for 'li a', (with top left positioning), then another as bg for li a span (top right positioning). This way it is fully expandable horizontally (if you ever decide to need to change widths), and eliminates the empty <span>s, by using them with the text.