#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    15
    Rep Power
    0

    List-style-type: none; renders different results in IE and FireFox


    Hi All:

    When i use <ul><li>
    and <li> is set to "list-style-type: none;" IE and Firefox renders it differently.

    Does anybody know a work-around for this?

    The good example of this and the CSS code is at following

    holzgreen.com/list-test/

    HTML:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>List Test 1</title>
    <meta name="Description" content="x.x.x. CHANGE .x.x.x">
    <meta name="KeyWords" content="x.x.x. CHANGE .x.x.x">

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <META name="Publisher" content="Firework Studio">
    <META name="revisit-after" content="15 days">
    <META name="robots" content="index, follow">
    <META name="Robots" content="All">
    <link href="000-style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .style1 {
    font-family: "Courier New", Courier, monospace
    }
    -->
    </style>
    </head>

    <body>
    <div #none>
    <ol>
    <li>List item - 1</li>
    <li>List item - 2
    <ol>
    <li>LI - 2.1</li>
    <li>LI - 2.2</li>
    </ol>
    </li>
    <li>List item - 3</li>
    <li>List item - 4</li>
    </ol>
    </div>
    </body>
    </html>

    CSS:

    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    border: 1px solid #000000;
    margin: 0em;
    padding: 0em;
    }

    #none ol {
    background: #BB0000;
    list-style-position: inside;
    margin: 0em;
    padding-left: 1em; /* Moves the Whole List */
    }

    #none ol ol{
    background: #BB00BB;
    list-style-position: inside;
    margin-left: 0em;
    padding-left: 3em; /* Moves the Nested List */
    }

    #none ol li {
    background: #BBBB00;
    font-size: .8em;
    margin-left: 0em;
    list-style-type: none;
    }

    #none ol ol li {
    background: #00BBBB;
    font-size: 1em;
    list-style-type: lower-alpha;
    margin-left: 0em;
    list-style-type: none;
    }



    Thanks for your interest
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    If you remove both list-style-position: inside; IE would render as FF.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    15
    Rep Power
    0
    Originally Posted by Akh
    If you remove both list-style-position: inside; IE would render as FF.
    Thank you Akh, it worked.

    Awesome forum. I have never got an answer so fast so to the point before.

    Thanks again.

    Sukrub,

IMN logo majestic logo threadwatch logo seochat tools logo