IE positioning problems

Posted by Kyle Sevenoaks on Stack Overflow See other posts from Stack Overflow or by Kyle Sevenoaks
Published on 2010-04-09T08:40:03Z Indexed on 2010/04/09 8:43 UTC
Read the original article Hit count: 458

In every browser but IE, on euroworker.no/order the little green arrow under the word "produkt" sits on top of my div container. Why in the world does this not work in IE? Thing is, it works on two pages out of four in IE but all four in other browsers.

CSS for the top prgress indicator:

#checkoutProgress
{
    width: auto;
    padding-top: 1em;
    height: 30px;
    overflow:hidden;
    font-family: "Helvetica";
    font-size:18px;
    float:left;
/*  margin-bottom:22px;*/
    margin-left:0px;

}

#checkoutProgress a
{
    padding: 10px;
    /*border-width: 2px;
    margin-right: 20px;*/
    text-decoration:none;
    font-size: 17.26px;
    color:#dadada;
    text-transform:uppercase;

}

#checkoutProgress a:hover
{
    padding: 10px;
    /*border-width: 2px;
    margin-right: 20px;*/
    text-decoration:none;
    font-size: 17.26px;
    color:#818072;

}

/* completed steps */
#checkoutProgress a.completed
{
    border-color: #70D66D;

}

/* current step */
#checkoutProgress a.active
{
 /*   border-color: #ADD8E6;*/
    font-weight: bold;
/*background-color: #fffccc;
border-color: #ADD8E6;*/
background-image:url(../../upload/urhere_arr.png);
background-position:bottom center;
/*padding-left:15px;*/
color:#a3a398;
}

For the box:

div #roundbigbox {
    background-image:url(../../upload/EW_p_og_L.png);
    background-position:top center;
    background-repeat:no-repeat;
    padding:5px;
    padding-top:10px;
    padding-bottom:0px;
    width:760px;
    height:1%;
    border-width:1px;
    border-color:#dddddd;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    z-index:1;
    position:relative;
    overflow:hidden;
    margin:0;
    margin-bottom:10px;
    }

fieldset css:

fieldset.container
{
    border: 0;
}

And some HTML:

<fieldset class="container">

    <div id="checkoutProgress" class="progressCart">
                <a href="/order" class=" active" id="progressCart"><span>Produkt</span></span></a>
                <a href="/checkout/selectAddress" class="completed " id="progressAddress"><span>kunde info</span></a>


                <a href="/checkout/shipping" class="completed " id="progressShipping"><span>Leveringsmåte</span></a>

                <a href="/checkout/pay" class="" id="progressPayment"><span>Betaling & Fullfør</span><</a>
            </div>

    </fieldset>         </div>



                <form action="/order... >

    <input type="hidden"...>
    <div id="roundbigbox">
    <p id="pro">Produkter</p>
    More content

    </div>

© Stack Overflow or respective owner

Related posts about internet-explorer

Related posts about positioning