IE positioning problems
- by Kyle Sevenoaks
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>
