<div id="newsletter_subscribe">
<form action="" method="post">
<input type="text" name="email" id="subscribeemail" />
<input type="submit" name="submit" />
<a href="">This is a link</a>
</form>
</div>
Non-IE6
div#newsletter_subscribe
{
position:absolute;
top:150px;
right:15px;
background-image:url(../images/site/subscribe_home.png);
background-repeat:no-repeat;
width:150px;
height:139px;
z-index:80;
}
Conditional Statement for IE6
div#newsletter_subscribe
{
background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/site/subscribe_home.png,sizingMethod='scale');
}
This works well, except I was finding that links and text boxes within this particular div had been disabled altogether. It is a known glitch that in IE6 any child link tag within a AlphaImageLoader filtered tag will be rendered useless. So my work around was to do the following.
<div id="newsletter_subscribe"></div>
<div id="newsletter_subscribe_container">
<form action="" method="post">
<input type="text" name="email" id="subscribeemail" />
<input type="submit" name="submit" />
<a href="">This is a link</a>
</form>
</div>
I then altered my CSS as follow
non-IE6
div#newsletter_subscribe
{
position:absolute;
top:150px;
right:15px;
background-image:url(../images/site/subscribe_home.png);
background-repeat:no-repeat;
width:150px;
height:139px;
z-index:80;
}
div#newsletter_subscribe_container
{
position:absolute;
top:150px;
right:15px;
width:150px;
height:139px;
z-index:80;
}
Conditional Statement for IE6
div#newsletter_subscribe
{
background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/site/subscribe_home.png,sizingMethod='scale');
}
This then rendered a seperate div with no child elements and just positioned the Links and Input boxes in another div over the top of my transparent PNG.
No comments:
Post a Comment