Superdopey’s Techblog

Ik kwam vandaag de bekende en vervelende IE6 layer bug tegen. Door deze bug worden controls die onder een floating layer div liggen erboven getoond. Dit is op te lossen door een iets groter iframe te plaatsen onder de floating div.

<span class="sc2"><a href="http://december.com/html/4/element/style.html"><span class="kw2"><style></span></a></span>

.ajaxPreloaderContainer
{
border: solid 1px #cccccc;
background-color: #FAFAFA;
color: #333333;
z-index:119;
width: 200px;
height: 100px;
position: absolute;
top: 45%;
left: 45%;
}

.ajaxPreloader
{
width: 200px;
text-align: center;
position: absolute;
top: 30%;
}

.preventShineAjaxPreloader
{
width: 202px;
height: 102px;
position: absolute;
top: 45%;
left: 45%;
background-color:#cecece;
}
<span class="sc2"><span class="kw2"></style></span></span>

<span class="sc2"><a href="http://december.com/html/4/element/iframe.html"><span class="kw2"><iframe</span></a> <span class="kw3">class</span>=<span class="st0">"preventShineAjaxPreloader"</span> <span class="kw3">frameborder</span>=<span class="st0">"0"</span><span class="kw2">></span></span><span class="sc2"><span class="kw2"></iframe></span></span>
<span class="sc2"><a href="http://december.com/html/4/element/div.html"><span class="kw2"><div</span></a> <span class="kw3">class</span>=<span class="st0">"ajaxPreloaderContainer"</span><span class="kw2">></span></span>
<span class="sc2"><a href="http://december.com/html/4/element/div.html"><span class="kw2"><div</span></a> <span class="kw3">class</span>=<span class="st0">"ajaxPreloader"</span><span class="kw2">></span></span>
<span class="sc2"><asp:Image runat=<span class="st0">"server"</span> <span class="kw3">ID</span>=<span class="st0">"preloadImage"</span> ImageUrl=<span class="st0">"~/Web/Styles/sk123_nl/images/bamas/ajax-loader.gif"</span> /<span class="kw2">></span></span><span class="sc2"><a href="http://december.com/html/4/element/br.html"><span class="kw2"><br</span></a> /<span class="kw2">></span></span>
Data wordt opgehaald
<span class="sc2"><span class="kw2"></div></span></span>
<span class="sc2"><span class="kw2"></div></span></span>