Css Ordered List problem FF and IE

Discussion in 'HTML' started by Gan Forr, Jan 28, 2008.

  1. Gan Forr

    Gan Forr Guest

    Hi...I've got this problem...I hope somebody will help me....

    I have this ordered list and I want every element of the list aligned
    to the left border of the containing div, just like the text above and
    below.
    In firefox works perfectly, but in IE every element of the list is
    slightly on the left of where I want it to be.

    Thank You
    Here's the code:
    ---------------------------------------------
    <html>
    <head>
    <style>
    div.normal
    {
    position:absolute; left:10px;
    border:1px solid #404040;
    font-family:Verdana;
    font-weight:bold;
    font-size:10px;
    padding: 4px;
    text-align:left;
    }

    ol {
    list-style-type:lower-alpha;
    list-style-type:lower-alpha;
    margin:0 0 0 1em;
    padding:0 0 0 1em;
    }
    </style>
    </head>
    <body>
    <div class='normal'>
    <br />Allora, prima di tutto, vediamo cosa ci serve.
    <ol><br />
    <li>Un certo numero di quotidiani (la carta di quotidiano è la
    migliore per la cartapesta - se non li leggete, iniziate a farlo)</li>
    <li>Una bacinella</li>
    <li>Un paio di tonnellate di colla vinilica :)D)</li>
    <li>Filo di ferro (o qualcos'altro se vi vengono altre idee); quello
    che ho usato io è spesso circa 1,5mm</li>
    <li>Nastro adesivo di carta</li>
    </ol><br />Adesso vediamo i passi principali:</div>
    </body>
    </html>
     
    Gan Forr, Jan 28, 2008
    #1
    1. Advertising

  2. Gan Forr

    Guest

    ok first of all stop using internal style sheets. cut and paste your
    css into a separate text document and save it as style.css

    now put this code inbetween the <head></head> tags like this:

    <html>
    <head>
    <link rel="stylesheet" type="text/css"
    href="style.css" />
    </head>
    </html>

    now make a new text document called "ie6.css" or "ie7.css" and
    copypasta all your css from your style.css document and make changes
    accordingly for ie6 or 7 so that your page displays proper.

    now put this in your header:

    <html>
    <head>
    <link rel="stylesheet" type="text/css"
    href="style.css" />
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css"
    href="iespecific.css" />
    <![endif]-->
    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css"
    href="iespecific.css" />
    <![endif]-->
    </head>
    </html>



    On Jan 28, 5:50 pm, Gan Forr <> wrote:
    > Hi...I've got this problem...I hope somebody will help me....
    >
    > I have this ordered list and I want every element of the list aligned
    > to the left border of the containing div, just like the text above and
    > below.
    > In firefox works perfectly, but in IE every element of the list is
    > slightly on the left of where I want it to be.
    >
    > Thank You
    > Here's the code:
    > ---------------------------------------------
    > <html>
    > <head>
    > <style>
    > div.normal
    > {
    >     position:absolute; left:10px;
    >     border:1px solid #404040;
    >     font-family:Verdana;
    >     font-weight:bold;
    >     font-size:10px;
    >     padding: 4px;
    >     text-align:left;
    >
    > }
    >
    > ol {
    >   list-style-type:lower-alpha;
    >   list-style-type:lower-alpha;
    >   margin:0 0 0 1em;
    >   padding:0 0 0 1em;}
    >
    > </style>
    > </head>
    > <body>
    > <div class='normal'>
    > <br />Allora, prima di tutto, vediamo cosa ci serve.
    > <ol><br />
    > <li>Un certo numero di quotidiani (la carta di quotidiano è la
    > migliore per la cartapesta - se non li leggete, iniziate a farlo)</li>
    > <li>Una bacinella</li>
    > <li>Un paio di tonnellate di colla vinilica :)D)</li>
    > <li>Filo di ferro (o qualcos'altro se vi vengono altre idee); quello
    > che ho usato io è spesso circa 1,5mm</li>
    > <li>Nastro adesivo di carta</li>
    > </ol><br />Adesso vediamo i passi principali:</div>
    > </body>
    > </html>
     
    , Jan 29, 2008
    #2
    1. Advertising

  3. Gan Forr

    Gan Forr Guest

    SigelsTankM, first of all, thanks for your reply.

    I do have a separate style sheet actually, but this is not my real
    page, it's just a portion of the text I have to display with the
    relative style. I put everything together to make the code easier to
    read.

    Do I have exactly put something like <!--[if IE 6]> in the header to
    decide which css to use?

    By the way, what I needed to know is what to put in IE css to get the
    same result of Firefox, that is, to get the list aligned to left.

    This is what I mean:
    Firefox:
    http://img201.imageshack.us/my.php?image=ffht3.jpg

    Internet Explorer:
    http://img180.imageshack.us/my.php?image=ieza0.jpg

    I just want the list aligned as in Firefox, but I can't get the same
    result in IE, no matter what I try (at least what I tried)

    Thank you again
    Federico
     
    Gan Forr, Jan 29, 2008
    #3
  4. Gan Forr

    Bergamot Guest

    Gan Forr wrote:
    >
    > I have this ordered list and I want every element of the list aligned
    > to the left border of the containing div, just like the text above and
    > below.
    > In firefox works perfectly, but in IE every element of the list is
    > slightly on the left of where I want it to be.


    The subject of list marker alignment came up in the ciwa.stylesheets
    newsgroup just a couple weeks ago.
    http://groups.google.com/group/comp..._frm/thread/ebff5f310299293b/f3568bb00410310e

    --
    Berg
     
    Bergamot, Jan 29, 2008
    #4
  5. Gan Forr

    Gan Forr Guest

    Sorry SigelsTank, I was so stupid....your answer was satisfing
    enough....I was so distracted that I had'nt realized that I already
    had the solution....Actually, with conditional comments I can easily
    use a customized css for IE; so I just need to adjust the margin and
    padding as I need.

    thank you
    F
     
    Gan Forr, Jan 31, 2008
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Newbie
    Replies:
    1
    Views:
    537
    Andrew Thompson
    Apr 7, 2004
  2. Arvind Ganesan

    ordered list (OL) tag with tables

    Arvind Ganesan, Sep 6, 2003, in forum: HTML
    Replies:
    10
    Views:
    10,593
    Nico Schuyt
    Sep 6, 2003
  3. Replies:
    3
    Views:
    2,208
  4. Replies:
    3
    Views:
    3,599
    Toby Inkster
    Apr 5, 2006
  5. DL

    Ordered list inside ordered list

    DL, Nov 9, 2009, in forum: Javascript
    Replies:
    6
    Views:
    336
    Dr J R Stockton
    Nov 21, 2009
Loading...

Share This Page