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