Friday, January 18, 2008

CSS and Transparent PNG's

I use the simple solution for Transparent PNG's


<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.