Ordered List margin problems (some with IE7)

Question

1. I'm trying to create an OL that would stay in the same margin line as the title text above it; setting margin-left and padding-left as 0px took it too far to the left, out of my DIV (don't know why), so I've set them both at 11px; however at IE7 (with the IE10 console), there's a deviation of about 3px to the left.

2. another problem is that I couldn't find here a solution for decreasing the inner margin between each number and the text.

Here's my code:

<div id="container">
 <div id="left">
  <div id="marg">
  <p class="title">Title</p>
 <ol class="list">
   <li>aaa</li>
    <li>aaa<br>
        aaa<br>
        aaa
   </li>
 <li>aaa</li>
 </ol>
</div>
</div>
<br style="clear: left;" />
</div>

CSS:

#container {
    border: 1px solid #DCD7D4;
    width: 740px;
    min-height: 680px;
    position: relative;
    margin-left: auto;
    margin-right: auto;

}

#marg {
    margin: 10px;
}
.list {
    font-size: 15px;
    color: #000000;
    font-weight: normal;
    line-height: 21px;
    margin-top:0px;
    margin-bottom:8px;
    margin-left: 0px;
    padding-left: 11px;     
}

.title {
    font-family: tahoma,arial;
    font-size: 22px;
    color: #E25424;
    letter-spacing: 0em;
}

thanks

Answer 1

I guess your both problems can resolve with give styling to each li elements.

You just need to give them padding-left and this will be the distance of your text from the number.

To push all OL to the left use padding left with margin:0 to all the OL

Answer 2

I would say the problem is with your html structure. You shouldn't have to use <br> elements inside a list. You also need some sort of reset to offset various default browser styles.

HTML

<div>
   <h1>Title</h1>
     <ol>
       <li>aaa</li>
       <li>aaa
        <ul>
         <li>aaa</li>
         <li>aaa</li>
        </ul>
       </li>
      <li>aaa</li>
      <li>aaa</li>
     </ol>
 </div>

CSS

ol{
list-style-position: inside;
    margin: 0;
    padding: 0;
    margin-left: .5em;
}
ul{
    list-style-type: none;
    margin: 0; 
    padding: 0;
}
ol li{
    margin:0;
    padding:0;
}
ul > li{
    margin-left: 1em;
}

Here it is in a fiddle http://jsfiddle.net/Fxx2j/