CSS menu with internet explorer

Question

I created very simple menu with CSS. In Firefox, opera, safari, and chrome everything is OK. But in IE 10 I have big free space on the left. I tried padding and text-align, but they didn't work.

This my menu:

<div id="menu_mod">
   <ul>
    <li><a href="#">UŻYTKOWNICY</a>
     <ul>
      <li>  <?php echo anchor('admin/UserGet/GetAll', 'Przeglądaj', 'class="link-class"') ?></li>
      <li>  <?php echo anchor('admin/UserGet/', 'Dodaj', 'class="link-class"') ?></li>
      <li>  <?php echo anchor('admin/UserGet/', 'Uprawnienia', 'class="link-class"') ?></li>
      <li>  <?php echo anchor('admin/UserGet/', 'Aktywacja', 'class="link-class"') ?></li>
      <li>  <?php echo anchor('admin/UserGet/', 'Usuń', 'class="link-class"') ?></li>
     </ul>
    </li>
   </ul>
</div>

and css:

#menu_mod {
    width: 200px;
    height:790px;
    float: left;
    background: url(images/menu.png) repeat-x left top;
    text-align: left;
}

#menu_mod ul {
    padding-left: 5px;
}

#menu_mod li {
    padding-left: 5px;
}

#menu_mod ul li a {
    font: bold 12px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#menu_mod ul li a:hover {
    color: #ffffff; 
}

[1]: http://i50.tinypic.com/2vj9095.png - Other browser

[1]: http://i50.tinypic.com/abjtq1.jpg - - IE

I deleted display:block; but that still didn't help. I tried with anchor and a href , but still is the same.

Answer 1

rules of list-based menus:

1. Reset your list: ul, li { margin:0;padding:0 }
2. Don't style the list - style the CONTENTS of the list.

This means other than float/positioning/display , put all styling on the A -tag (and use display:block ).