Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hello and thank you for taking the time to read my post. I'm currently working on an e-shop layout with somewhat of a pretentious design and i really need to use PNGs (transparency) in order to match the design. The problem is that it has to work on ie6 so i use the following technique:
for each div(class) that has PNG background i have two styles:
.header{
width:453px;
height:230px;
background-image:url(img/chick.png);
background-position:center;
z-index:1;
}
*html .header{
width:453px;
height:230px;
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/chick.png', sizingMethod='image');
z-index:1;
}
Since the *html selector is only recognized by IE this works just fine and it seems a reasonable solution. The problem is that with this method i'm bound to have (sooner or later) problems with unclickable links in IE (even in ie7).
Does anybody know what causes this? I googled and found some explanations, specifically using a higher z-index for the div that has non-clickable links. This absolutely does not work no matter what kind of position: I set on my div. Also, i found that if i remove the *html .header {} completely the problem is fixed with IE7 but i need that fix for ie6.
Also, if any of you guys or gals have a better solution in using PNGs PLEASE advise. The site has to render perfectly in ie6, ie7 and firefox.
thanks -
- CommentAuthoraxe_sosharp
- CommentTimeMay 24th 2007 edited
A complete guess but it looks logical(sorry I don't have time to test the theory at the moment). Basically create two layers in IE6 with the alphamageloader below the one containing the links.
Change the HTML to add an inner div to header containing the original markup.
The CSS selector for browsers other than IE6 would be .header div
ie
<div class="header">
<div>
</div>
</div>
For IE6
*html .header{
width:453px;
height:230px;
position:relative;
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/chick.png', sizingMethod='image');
z-index:1;
}
*html .header div{
width:453px;
height:230px;
position:absolute;
left:0;
top:0;
z-index:10;
}
Hope it works and good luck. -
A better solution to PNGs in IE6 is Dean Edward’ IE7 Script. I have an explanation of Using the Script on my blog.
-
Can be done with Javascript or CSS.
CSS:
<style type="text/css">
#pngtest
{
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
width:100px;
height:100px;
position:absolute;
color:white;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='IMAGE.png');
}
</style>
<body bgcolor="#000000">
<img src="IMAGE.gif">
<img src="IMAGE.png">
<div align=center id="pngtest">CSS PNG FIX</div>
</body>
Javascript:
<script language="JAVASCRIPT">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 and IE 6.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<body bgcolor="#000000">
<img src="IMAGE.gif"><br />
<img src="IMAGE.png"><br />
<font color=white>JAVASCRIPT PNG FIX</font>
</body>
Javascript fix doesnt work with PNG images in CSS -
- CommentAuthoraxe_sosharp
- CommentTimeMay 25th 2007 edited
Hi Snemeis,
Had a chance to test the method I posted earlier and couldn't get it to work but here is a solution that does, plus a working example AlphaTest.
The beauty of this method is it's simplicity, all you need is an empty div in the header container, which you can code in or use some JavaScript to add just for IE6:
.header{
width:453px;
height:230px;
background-image:url(img/chick.png);
background-position:center;
position:relative;
}
*html .header{background-image:none;}
*html .header div{
width:453px;
height:230px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/chick.png', sizingMethod='image');
position:absolute;
top:0;
left:0;
z-index:1;
} -
- CommentAuthoraxe_sosharp
- CommentTimeJun 3rd 2008 edited
The URL in the previous post has moved due to a new server rewrite rule implemented by the CMS
Here is a link for the Alpha Test. Hope it is of use.
1 to 6 of 6