Grow your CSS skills. Land your dream job.

Floating (OL) LI’s causes number to disappear in IE7

  • # December 31, 2009 at 4:21 pm

    Second post in one day… :oops:

    I’ve got an ordered list in my checkout process so the customer knows where they are in the checkout process… (e.g. shipping information, billing information, order confirmation, etc)

    This is my markup

    Code:
    1. Shipping Information
    2. Billing Information
    3. Order Confirmation

    Here is my CSS

    Code:
    /************
    * Checkout*
    ************/
    ol.checkout_steps {
    font: normal normal 200 16px Georgia;
    list-style: decimal;
    margin: 0 20px 20px;
    }
    ol.checkout_steps li {
    color:#999;
    float: left;
    margin: 0 28px 0 0;
    }
    ol.checkout_steps li.active { color: #222; }

    No matter what I try, I can’t get the numbers to show (unless I take away the float, but then they’re not inline).

    # January 1, 2010 at 4:44 pm

    What if you use:

    Code:
    ol.checkout_steps li {
    color:#999;
    float: none;
    margin: 0 28px 0 -500px;
    }

    In the ie7 specific css?

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

You must be logged in to reply to this topic.

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