locked
Ordered list alignment variations RRS feed

  • Question

  • On my website, www.SystematicGoal.com, ordered lists in IE 7 are aligned so that the list is outdented from the paragraphs above; the numbers are pushed to the left of the alignment. In Firefox 7 and Chrome 16, the numbers are actually indented to the right of the text. I prefer the indented version.

    All paragraphs on the page, including the ordered lists, are in a class called .Default, which has the following definition:

    .Default {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: medium;
    font-weight: normal;
    font-style: normal;
    margin-right: 150px;
    margin-left: 150px;
    }

    How can I modify the site so that IE displays the lists the same way as Firefox and Chrome?
    Thanks.
    Jolyon Hallows


    Jolyon Hallows
    Tuesday, January 10, 2012 10:00 PM

Answers

  • One way to avoid the variations in how browsers handle margins on lists is to not put the margin on the list. Put it on a container that has the list inside.

    <div class="Default">
    <ol>
     <li>listitems</li>
    </ol>
    </div>


    • Edited by KathyW2 Tuesday, January 10, 2012 10:54 PM
    • Marked as answer by JEHWW Wednesday, January 11, 2012 12:28 AM
    Tuesday, January 10, 2012 10:53 PM

All replies

  • One way to avoid the variations in how browsers handle margins on lists is to not put the margin on the list. Put it on a container that has the list inside.

    <div class="Default">
    <ol>
     <li>listitems</li>
    </ol>
    </div>


    • Edited by KathyW2 Tuesday, January 10, 2012 10:54 PM
    • Marked as answer by JEHWW Wednesday, January 11, 2012 12:28 AM
    Tuesday, January 10, 2012 10:53 PM
  • Thanks. That worked.
    Jolyon Hallows
    Wednesday, January 11, 2012 12:29 AM