Results 1 to 5 of 5

Thread: question about unordered list

  1. #1
    Member sudhakararaog's Avatar
    Join Date
    Sep 2009
    Posts
    224

    Default question about unordered list 12 Oct 2009 @ 06.16

    only in ie browsers i am getting a completely different outcome when using unordered lists it works fine in all other browsers.

    following is the code

    <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>

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

    #list ol
    {
    list-style-type: decimal;
    list-style-position: outside;
    width: 500px;
    }

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

    this file is available at
    Untitled Document

    please advice how to get the same outcome in ie browsers as it appears in firefox, chrome, safari and opera

    thanks
      Reply With Quote

  2. #2
    Gaz
    Gaz is offline
    Member Gaz's Avatar
    Join Date
    Jan 2009
    Posts
    113

    Default 12 Oct 2009 @ 08.19

    Firstly your using ordered lists and not un-ordered.

    Secondly i would define everything in the same way, such as something things are defined in pt and some in px. best to be consitant.

    you have defined that everything has margin of 0pt and padding of 0pt, so you don't need to put the #list ol li margin as 0pt. as it will be inherited from the top.


    Lastly, i can't see anything different between the two. The only thing i did notice was that because my IE window was a different size to my firefox one, and i didn't notice at first that it was centered, this then caused the list to appear closer to the edge, but when making the windows the same size all seamed the same.
      Reply With Quote

  3. #3
    Member shalom_m's Avatar
    Join Date
    Jan 2009
    Posts
    488

    Default 12 Oct 2009 @ 10.32

    This should do it:

    HTML Code:
    <!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">
    
    
    body{
    font: normal 12px Arial, Helvetica, sans-serif;
    }
    
    #wrapper{
    width: 900px;
    margin: 0 auto;
    }
    
    
    #list{
    width: 500px;
    margin: 50px 0 0 0;
    }
    
    
    #list ol li
    {
    list-style-type: decimal;
    padding: 0 0 10px 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>
      Reply With Quote

  4. #4
    Member sudhakararaog's Avatar
    Join Date
    Sep 2009
    Posts
    224

    Default 12 Oct 2009 @ 21.33

    thanks for replying

    the code is working fine, however in my css i have defined at the top as
    *{
    margin: 0;
    padding: 0;
    }

    when i add this code ie 6 and 7 are not displaying the list unlike other browsers and i need to set
    *{
    margin: 0;
    padding: 0;
    }

    in my page so how can i get the same effect along with using the global declaration

    please advice.
      Reply With Quote

  5. #5
    Gaz
    Gaz is offline
    Member Gaz's Avatar
    Join Date
    Jan 2009
    Posts
    113

    Default 13 Oct 2009 @ 12.15

    i've tested ie7 against firefox, and see no diference, show us some screen shots of whats wrong.
      Reply With Quote

Similar Threads

  1. horizontal list
    By sudhakararaog in forum HTML & CSS
    Replies: 2
    Last Post: 7 May 2010, @ 05.24
  2. horizontal list
    By sudhakararaog in forum HTML & CSS
    Replies: 1
    Last Post: 28 Apr 2010, @ 08.07
  3. horizontal list
    By sudhakararaog in forum HTML & CSS
    Replies: 1
    Last Post: 2 Jan 2010, @ 09.48
  4. horizontal list
    By sudhakararaog in forum HTML & CSS
    Replies: 0
    Last Post: 26 Dec 2009, @ 04.55
  5. To list or not to list?
    By CloudedVision in forum SEO (Search Engine Optimisation) & Search Engines
    Replies: 0
    Last Post: 14 May 2009, @ 21.30

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •