Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Ordered list numbers not showing in IE

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #23823
    steliodj
    Member

    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

    #52416
    chazzwick
    Member

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

    #52417
    steliodj
    Member

    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.
    #52434
    iopet
    Member

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

    #52447
    steliodj
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.