Fit into div in CSS

Question

Hello everyone my menu bar can't fit into my <div> area at different browser. I have checked with Opera and Chrome it looks fine but with Explorer and Firefox my menu can't fit.

And my menu is in this <div> tag:

.page {
     width: 964px;
    margin-left: auto;
    margin-right: auto;
    background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
    background-repeat:repeat-y;
}

Here is my menu:

ul#menu {       
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: center;       
}

ul#menu li {
    display: inline;
    list-style: none;
    font-family: 'Museo300Regular';
    font-size:17px;
    font-style:normal;        
}
ul#menu li a 
{        
    background-image:url(../../images2/images/menu_bg_normal.jpg); 
    background-repeat: repeat;
    padding: 5px 19px 5px;        
    font-weight: normal;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #FEFEFF;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
      cursor:pointer;          
}

So what is the problem why it can't fit into with Explorer and Firefox?

I attach an image you can understand what I mean

Here is the Chrome and Opera it can fit

Answer 1

You can achieve it by resetting your CSS code. Then use ul li to style your list items.
If needed, you can use conditional comments to load your stylesheet for IE with some sort of bug fixes.

But normally i can achieve 100% exact result in all browsers on li element, so it's proved.

Answer 2

Text will always take up different space in different browsers (and even in the same browser on different computers).

So, if you want your menu to fit exactly, you can't base the width of the buttons directly on the text in them. Either make all buttons the same width, or specify an exact width for each button.

Alternatively, resort to using a table, which can divide the space between the cells based on their content.