Grow your CSS skills. Land your dream job.

Ordered list numbers not showing in IE

  • # December 27, 2008 at 8:49 pm

    Hi there,

    I have an ordered list which looks fine in FF and Safari…but when i check the site using IE (both 6 & 7) the numbers are not showing.

    I have already searched Google and as i can see this is a common problem, but didn’t manage to find a solution yet….

    …any advice?

    Thanks in advanced.
    Stelios

    # December 27, 2008 at 9:20 pm

    post your css and html so we can see what you did

    # December 27, 2008 at 9:43 pm

    Ok…that was fast :)

    Here is my CSS

    Code:
    html,body {
    text-align:center;
    background: url(../images/bg.jpg) repeat;
    }

    * {
    border:0;
    margin:0;
    outline:none;
    padding:0;
    }

    /** divs **/
    #top {
    background:#191919;
    display:none;
    text-align:center;
    }

    #container {
    margin:auto;
    text-align:left;
    width:875px;
    }

    #header {
    margin:40px 0 0;
    text-align:center;
    }

    #content {
    padding-top:80px;
    background-color: #ffffff;
    }

    /** switchContent **/
    #content_2,#content_3,#content_4 {
    display:none;
    }

    /** lavaLamp **/
    .lavalamp {
    float:right;
    height:29px;
    margin-right:4px;
    overflow:hidden;
    padding:5px;
    position:relative;
    }

    .lavalamp li {
    float:left;
    list-style:none;
    margin-right:40px;
    }

    .lavalamp li.back {
    border-bottom:5px solid #d7006c;
    height:30px;
    position:absolute;
    }

    .lavalamp li a {
    color:#191919;
    float:left;
    font-family:”Times New Roman”, Times, serif;
    font-size:1.2em;
    height:30px;
    outline:none;
    overflow:hidden;
    position:relative;
    text-decoration:none;
    z-index:10;
    }

    .lavalamp li a:hover,p.top a:hover {
    color:#00a2dd;
    }

    /** slidePanel **/
    .slide {
    margin:0;
    padding:0;
    }

    .btn-slide {
    /*background:#000000;*/
    color:#fff;
    display:block;
    font-family:”Times New Roman”, Times, serif;
    font-size:1em;
    height:72px;
    line-height:1em;
    padding:3px 0;
    text-align:center;
    text-decoration:none;
    background: url(../images/slider_bar_bg.png) repeat-x;
    }

    /** typography **/
    .name {
    color:#d7006c;
    font-family:”Times New Roman”, Times, serif;
    font-size:3.4em;
    font-weight:700;
    letter-spacing:-0.05em;
    }

    .slogan {
    color:#191919;
    font-family:”Times New Roman”, Times, serif;
    font-size:3.4em;
    font-style:italic;
    letter-spacing:-0.05em;
    }

    h1 {
    border-left:10px solid #fde000;
    color:#191919;
    font-family:”Times New Roman”, Times, serif;
    font-size:1.8em;
    font-variant:small-caps;
    padding-left:10px;
    }

    p {
    color:#191919;
    font-family:”Times New Roman”, Times, serif;
    font-size:1.2em;
    line-height:1.5em;
    margin-bottom:20px;
    padding-left:40px;
    padding-right: 40px;
    text-align:justify;
    }

    ol.top {
    color:#fff;
    font-family:”Times New Roman”, Times, serif;
    font-size:0.9em;
    line-height:1.5em;
    margin:0 auto;
    width:875px;
    text-align: left;
    }

    p.up a {
    color:#191919;
    float:right;
    font-family:”Times New Roman”, Times, serif;
    font-size:1.2em;
    margin-bottom:20px;
    text-decoration:none;
    }

    /** miscellaneous (hr, etc.) **/
    hr {
    border-top:1px dotted #191919;
    height:1px;
    margin:20px 0;
    }

    and here is the html of the list

    Code:
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. Aliquam tincidunt mauris eu risus.
    3. Vestibulum auctor dapibus neque.
    4. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
    5. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt.
    6. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non.
    7. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
    # December 28, 2008 at 4:48 am

    Add a ~30px padding-left to ol.top

    # December 28, 2008 at 12:53 pm

    Thanks iopet…now everything is fine :)

    I was trying this with margin-left :)…thank you very much

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".