ul list fine in IE but not in Firefox...help!

[rodd1000]

I've been developing a site for a friend but im having trouble with the gaps between navigation buttons. The menu bar displays fine in IE but in firefox the links are un-evenly spaced and look awfull.

I have tried adjusting the padding in #menu_bar li to display correct in Firefox but then it messes up in IE.grrr....:mad:

Any help would be greatly appreciated.

Thanks

Heres the link (http://www.cnsdemo.co.uk/build/)

here's the CSS

#menu_bar ul {
font-size: 13px;
list-style-type: none;
height: 13px;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-weight: bold;
margin: 0px;
}
#menu_bar li {
display: ;
padding-top: 7px;
text-align: center;
padding-right: 45px;
padding-bottom: 4px;
padding-left: 0px;
margin: 0px;
}

[WebJoel]

<li><a href="#" id="find us">Find Us</a></li>
<li><a href="#" id="contact us">Contact Us</a>

This is being read as id="us" due to white-space in id name.

You can safely remove the #menu_bar li 's display: ; as "display;block;" is the default for this, and the list is 'block' (think "block=vertical" and "inline=horizontal/in-a-straight-line"

[rodd1000]

Thanks for that, but it still doesn't rectify the problem i am getting.

Cheers

[Centauri]

I was trying to work out what was happening here, then realised the blue bars are actually part of a large background graphic. Trying to align text to these is an exercise in futility, as text size is completely dependant on the browser, fonts installed on the user's computer, and the user preference for font size. The blue bars should be the background colour of the <a> links (set to block display and sized accordingly), and not graphics at all.

[WebJoel]

What browser are you using? In Firefox and upon re-sizing, the blue boxes do to some degree, stay 'behind' the LI's, but if this is the case, a background image for the LI would be a better solution

[rodd1000]

Thank you both for your explanation. I hadn't thought of doing it that way but it didnt occur to me that id have a problem doing it using a background image.

It does make better sense to set background colour to the <a> links and as you say would make it much less frustrating aligning them.

I'm a designer by trade but i'm loving the challenge of developing. Although i do find it frustrating. I suppose i need to start thinking more of how a developer would do things rather than from a layout perspective.

Thanks again for the insight.