Question

hello
i am using css menu and it looks fine in ff and ie7/8 but in ie6 the menu is not positioning correctly. it is supposed to sit to the right but for some reason it is moving to the left. i have included screenshots and my css for the menu and would be grateful if someone could tell me where the error is? many thanks

#menu
    {
        width:425px;
        height:33px;
        float: right;
        margin:133px 51px 0 0;
        padding:0px;
    }
#menu ul
    {
        width:525px;
        height:33px;
        float:left;
        margin:0px;
        padding:0px;
        display:block;
    }
#menu ul li
    {
        width:76px;
        height:33px;
        float:left;
        margin:0 1px 0 0;
        padding:0px;
        display:block;      
    }
#menu ul li a.menu
    {
        width:76px;
        height:26px;
        float:left;
        margin:0px;
        padding:7px 0 0 0;
        font-family:Arial;
        font-size:13px;
        font-weight:bold;
        color:#FFF;
        text-align:center;
        text-decoration:none;
        background-image:url(../images/menu.jpg);
        background-repeat:no-repeat;
    }   
#menu ul li a.menu:hover
    {
        width:76px;
        height:26px;
        float:left;
        margin:0px;
        padding:7px 0 0 0;
        font-family:Arial;
        font-size:13px;
        font-weight:bold;
        color:#FFF;
        text-align:center;
        text-decoration:none;
        background-image: url(../images/menuover.jpg);
        background-repeat:no-repeat;        
    }

screenshots:

correct menu spacing: http://i51.tinypic.com/9kytxf.png

incorrect menu spacing: http://i54.tinypic.com/fldpow.png

Answer 1

My guess is that your sizes don’t add up correctly and IE’s handling of that differs from the others. Notice, for example, that #menu only has a width of 425px, but its ul has a width of 525px. So perhaps FF is clipping the overflow but IE isn’t.

Try removing the widths from everything but the innermost elements (#menu ul li a.menu for example) and let the rest be automatically sized. Or at least start by removing/fixing the width of #menu.