1

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

4
  • i am not sure but try position:relative.
    – user455318
    Apr 26, 2011 at 22:04
  • @user455318 still the same. thanks
    – ploppy
    Apr 26, 2011 at 22:06
  • I realize this isn't helpful, but I felt obligated: ie6countdown.com
    – Jimmy
    Apr 26, 2011 at 22:32
  • thank you jimmy. i totally agree
    – ploppy
    Apr 27, 2011 at 14:59

3 Answers 3

1

It might be the old Double Margin Float Bug, when you have a float with a margin in the same direction.. i.e. left float/left margin or right float/right margin IE5/6 was known to double the margin

so on:

#menu {
        width:425px;
        height:33px;
        float: right;
        margin:133px 51px 0 0;
        padding:0px;
    }

try adding display:inline; to the above rule, if that's it, it's a safe fix to leave in place as all other browsers rightly ignore the display property on a floated element

0
0

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.

1
  • i removed the width from the menu div and it moved it just fractionally right. thanks
    – ploppy
    Apr 26, 2011 at 22:17
0

Make sure you have a proper doctype at the beginning of the HTML file using your CSS. IE6's quirks mode is terrible! For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Take note that a proper (non-html5) doctype will have a URL pointing to the dtd. If your doctype isn't correct, fix it and see if that helps.

3
  • this is what i have before the head. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="w3.org/1999/xhtml"> thanks
    – ploppy
    Apr 27, 2011 at 7:52
  • You're good to go with your doctype then. Your issue is straight up CSS related. The reason I suggested checking the doctype is that many people I have seen over the years fall victim to the quirks mode by not having a proper doctype, which can lead to weird CSS behaviors, especially with floats. See quirksmode.org/css/quirksmode.html for more details.
    – Trav
    Apr 27, 2011 at 20:54
  • which still leaves me scratching my head :-)
    – ploppy
    Apr 27, 2011 at 21:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.