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: 506
        
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