CSS navigation bar issue

CSS navigation bar changes when text re-sized

[MarkAD]

Hi,

I've built a CSS horizontal navigation bar which sits at the top level of a page. When the text is increased in Firefox the last link on the right drops down a level and the bottom border drops down. In I.E 7.0 all the text in the link boxes shift to the left making the navigation almost unreadable. A very irritating problem.

Here is the CSS anyway;

/* Navigation /*
/* -------------------------------------------*/

#navsite ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 8px solid #BE9369;
font: bold 11px, Arial,sans-serif;
}
#navsite li {
list-style: none;
margin: 0;
display: inline;
}
#navsite ul li a {
padding: 2px 0.5em;
margin-left: 2px;
border: 1px solid #BE9369;
border-bottom: none;
background: #FFFFFF;
text-decoration: none;
}
#navsite ul li a:link {
/*color: #BE9369;*/
}
#navsite ul li a:visited {
color: #000;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background: #e2ded2;
border-color: #bf9565;
}

Any ideas on where the root of this problems lies and how I could approach solving it

Any help appreciated, thanks.

[tomda]

A/ Force font-size to be the same -> disable text-resize by using "px" instead of "em"

OR

B/ Try to force <ul> (or #navsite) to have a fixed width

#navsite ul {
width:550px
padding: 3px 0;
margin-left: 0;
border-bottom: 8px solid #BE9369;
font: bold 11px, Arial,sans-serif;
}

[Marshall]

You can also add:

#navsite ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 8px solid #BE9369;
font: bold 11px, Arial,sans-serif;
white-space: nowrap;
}

Though I am not sure how cross-browser friendly it is.

Marshall

[MarkAD]

I tried a few of those fixes but still no joy :(

Anyway, there is now a bigger issue with the navigation bar. When the site is viewed in Safari (and Opera) theres a huge gap at the end of the navigation bar, its as though it shrinks it. I've set the width of the bar to be fixed at 780px so I'm confused as to why this is happening?

Here is the code again;

/* Navigation /*
/* -------------------------------------------*/

#navsite ul {
width:780px;
padding: 3px 0;
margin-left: 0;
margin-bottom: none;
border-bottom: 8px solid #BE9369;
font: bold 11px, Arial,sans-serif;
}
#navsite li {
list-style: none;
margin: 0;
display: inline;
}
#navsite ul li a {
padding: 2px 0.5em;
margin-left: 2px;
border: 1px solid #BE9369;
border-bottom: none;
background: #FFFFFF;
text-decoration: none;
}
#navsite ul li a:link {
/*color: #BE9369;*/
}
#navsite ul li a:visited {
color: #000;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background: #e2ded2;
border-color: #bf9565;
}

Thanks again for any help.