question about unordered list

Discussion in 'CSS' started by sudhakararaog, Oct 12, 2009.

0
  1. #1
    i am not getting the same output in ie 6 and 7 when using ordered list all other browsers are displaying the way i wanted.

    my code is

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <style type="text/css">

    *{
    margin: 0;
    padding: 0;
    }

    body{
    font: normal 12px Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    }

    #wrapper{
    width: 900px;
    margin: 0 auto;
    }


    #list{
    width: 500px;
    margin: 50px 0 0 0;
    }

    #list ol {
    list-style-type: decimal;
    list-style-position: outside;
    padding: 0 0 0 10px;
    margin: 0 0 0 0;
    }

    #list ol li {
    padding: 10px 0 0 0;
    margin: 0 0 0 0;
    }

    </style>
    </head>

    <body>

    <div id="wrapper">

    <div id="list">
    <ol>
    <li>List item 1 Lorem ipsum dolor sit amet, consetetur sadi pscing sed diam Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam </li>
    <li>List item 1 Lorem ipsum dolor sit amet, consetetur sadi pscing sed diam Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam </li>
    <li>List item 1 Lorem ipsum dolor sit amet, consetetur sadi pscing sed diam Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam </li>
    </ol>
    </div>

    </div>
    </body>
    </html>

    list-style-position: inside; works fine in all browsers however what i need is list-style-position: outside; which is not working in ie 6 and 7 what i have noticed is when i added
    *{
    margin: 0;
    padding: 0;
    }
    list-style-position: outside; is not working in ie 6 and 7 and works fine in all other browsers


    i need the global declaration to be in the css code and i want to achieve the effect of using list-style-position: outside; in ie 6 and 7. also due to the cms i use i cannot use an additional css file for ie and also i cannot write conditional comments so i have to write the code in 1 css file only to achieve the list-style-position: outside; for all browsers.

    please advice.

    thanks
     
    sudhakararaog, Oct 12, 2009 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Have you tried killing the margins and padding on the list and list items, then setting a negative left margin on the list itself?
     
    Dan Schulz, Oct 12, 2009 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    He'll also need Haslayout on the list itself. Lord did I lose hair trying to figure out who needed Haslayout, as IE ate just the first numbers of my ol's without it!
     
    Stomme poes, Oct 13, 2009 IP