html - IE9 CSS Issues with arrangment of two items in li -

have of please: jsfiddle
in firefox, chrome, opera code ok, in ie9 shift numbers, see picture please. left ok, right ie9. http://imageshack.us/photo/my-images/707/asdlj.png/

i can´t solve problem, need :(

html

<ul id="category">     <li>         <p>             35         </p>         spiele     </li>     <li>         <p>             352         </p>         puppen     </li> </ul> 

css

ul {     list-style: none;     margin: 0;     padding: 0; } #category {     float:left;     background:#e8e8e8; } #category li {     line-height: 20px;     padding: 10px 30px;     cursor:pointer; } #category p {     margin:0 0 0 20px;     padding:0;     float:right;     font-size:18px; } 

i've simplified code considerably.

stenzg

i believe qualify time use <table>. cleaner , compatible way of handling particular issue. won't run browser issues. try this:

<table>   <tr>     <td>spiele</td>     <td>35</td>   </tr>    <tr>     <td>puppen</td>     <td>352</td>   </tr> </table> 

and basic css :

table {   background-color: #e8e8e8; }  table td {   padding: 10px; } 

jsfiddle

check out mdn table tutorial if you're not familiar using them.