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

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.