CODEWITHSUNDEEP
htmlcssmargin
David Bélanger
David Bélanger

Reputation: 7438

Internet Explorer wrong margin, Others good

I got a tiny problem. First time I am doing a UL menu with an arrow poping on the right... without JS.

I got a small problem. In Internet Explorer... IE show a margin in #subMenu ul li of arround 2px (so we see the page background). In other broswer everything is fine.

Also, I am suppose to the see the PNG on the right of the UL. If UL is 0px-100px left then the pic will appear at 100px-122px left. IE doesnt show the pic, other does.

Good : FF 9.0.1, Safari 5.1.2, Opera 11.60, Chrome 16.0.912.75 Wrong : IE 9.0.4

I did try this but... border goes wrong with this :

#subMenu ul li{
    list-style-type: none;
    margin: -2px;
}

Here's picture of what I mean : http://i44.tinypic.com/6poy8i.jpg Here's the test page :

<html>
    <head>

        <style>
        html, body{
            margin: 0px;
            padding: 0px;
            font-family: Arial;
            font-size: 12px;
        }

        #wrapper{
        }

        #subMenu{
            padding: 5px;
        }

        #subMenu .wrapMenu{
            width: 180px;
        }

        #subMenu ul{
            list-style-type: none;
            width: 100%;
            padding: 0px;
            margin: 0px;
            height: auto;
        }

        #subMenu ul li{
            list-style-type: none;
            margin: 0px;
        }

        #subMenu ul li:hover{
            width: 100%;
        }

        #subMenu ul li a,
        #subMenu ul li a:link,
        #subMenu ul li a:visited{
            text-decoration: none;
            color: #b9b9b9;
            display: block;
            background-color: #f5f5f5;
            border-left: 1px solid #c3c3c3;
            border-bottom: 1px solid #c3c3c3;
            border-right: 1px solid #c3c3c3;
            width: 100%;
            height: 48px; /* padding-top + padding-bot + height de ul li span*/
        }

        /*f9f9f9*/
        #subMenu ul li a:hover{
            color: #7a7a7a;
            border-right: 0px;
            background-color: #f9f9f9;
        }

        #subMenu ul li span{
            width: 100%;
            float: left;
            height: 20px;
            display: block;
            padding: 14px 6px 14px 20px;
        }

        #subMenu ul li span:hover{
            background: transparent url('subMenu_Arrow.png') no-repeat 180px 0px;
        }

        #subMenu ul li a.first{
            border-top-left-radius: 3px;
            border-top: 1px solid #c3c3c3;
        }

        #subMenu ul li a.last{
            border-bottom-left-radius: 3px;
        }

        </style>
    </head>

    <body>
        <div id="subMenu">
            <div class="wrapMenu">
                <ul>
                    <li><a class="first" href="#"><span>Arrêts</span></a></li>
                    <li><a href="#"><span>Avis</span></a></li>
                    <li><a href="#"><span>Planibus</span></a></li>
                    <li><a class="last" href="#"><span>Trajets</span></a></li>
                </ul>
            </div>
        </div>

    </body>
</html>

Thanks for you help.

Upvotes: 1

Views: 953

Answers (1)

wsanville
wsanville

Reputation: 37516

You need to specify a doctype as the first line in your markup. Without a doctype, IE will render in quirks mode, which is essentially the IE 5.5 rendering engine. Quirks mode greatly effects the box model, among other things.

Example:

<!doctype html>

Specifying the doctype will yield the correct result in your screenshot.

Upvotes: 2

Related Questions