CSS HTML IE7（UL和LI标签）菜单问题

Question

I m having trouble with some code and the ie7 browser, its a vertical CATEGORY menu made with the ul tag, and css properties. Works fine with safari, ie8, firefox 3.5 and 3.6 but with ie7 A BIG LEFT MARGIN IS BEING CREATED This is the code that is being generated by the server:

    <div id="menu">  
    <ul><li><a class="level1" href="catalog.html?category=21">PRODUCTOS</a></li>  
<li><a class="level1" href="catalog.html?category=21">Daniela Kosan</a></li>  
<li><a class="level2" href="catalog.html?category=21">Lo Nuevo</a></li>  
<li><a class="level2" href="catalog.html?category=22">Fragancias</a></li>  
<li><a class="level2" href="catalog.html?category=23">Rostro</a></li>  
<li><a class="level2" href="catalog.html?category=24">Accesorios</a></li></ul>
    </div>

and this is the css i'm using:

*{ margin-top:0; padding:0; }

#menu{
    background:#fff;
    width:205px;

    padding-left:9px;

}
    #menu ul{
        list-style:none;


    }
        #menu li{
            list-style:none;


        }
            #menu li a{
                list-style:none;
                font-family: arial, sans-serif;
                background:#F0CFD6;
                color:#944862;
                text-transform:none;
                font-size:14px;
                font-weight:normal;
                text-decoration:none;
                display:block;


            }
                #menu li a:hover{
                    color:#fff;
                    text-decoration:none;
                }
            #menu li a.level1{
                padding-left:10px;
                padding-top:10px;
                width:205px;
                height:20px;
                color:#fff;
                background:#DA8298;


            }
                #menu li a:hover.level1{
                    color:#000;
                }
            #menu li a.level2{
                padding-left:20px;
                padding-top:12px;
                width:205px;
                height:20px;
                color:#8B5169;
                border-width:0 0px 0px 0px;
                background:#F0CFD6;
                border-bottom:1px dashed #CEABB2;

            }
                #menu li a:hover.level2{
                    color:#000;
                }

Here is the bad render, NOTE THE BIG LEFT MARGIN BESIDES THE CATEGORY MENU

This is how it renders on the other browsers... good! Thank you guys!

Answer 1

Try setting the margin and padding on the ul . Different browser will automatically set it to different things. I suggest using a CSS reset in the future.

#menu ul {
    margin-left: 0px;
    padding-left: 0px;
    }

Try the above and let me know if it works. I don't have IE, so I can't test it. I'd test the margin and padding one at a time to see if only one of them is the culprit.