Home/ Questions/Q 7037715
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T01:34:43+00:00

I got a tiny problem. First time I am doing a UL menu with

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0