Posted by zyara on June 25, 2006 at 2:52pm
Jump to:
| Project: | Sands |
| Version: | 4.7.x-1.x-dev |
| Component: | Rendering issues |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs work |
Issue Summary
When I nsert my logo.png I got grey box aound the logo in IE but at firefox is ok I know this problem could be solved by diffrent ways by using CSS hack or javascript so I tried with javascript and the result is ok on some pages only.
I would like to know the best solutions for this issue.
Comments
#1
#2
I found some fixes at Meta theme
http://drupal.org/node/43376
which include javascript solutions http://homepage.ntlworld.com/bobosola/ but it has some downgrade too http://homepage.ntlworld.com/bobosola/pnginfo.htm
and even so where I should put the code I tried that with page.tpl.php but as I saied before some pages show the logo correctly and other is not.
#3
I haven't put in a MSIE PNG transparency fix because none of the available ones would fix the transparency issue with the use of the icons next to links. It is possible, but something custom would need to be written that I have not had the time to write.
That Javascript version is a little inefficient: it loops through all image tags (there may be many in a page) and tries to set MSIE's PNG transparency fix on them. If you reload the page, it may work?
#4
Problem FIXED:-)
First I tried to call the script file (fixpng.js) from page.tpl.php but its work with some pages only.
Second I inculde the script inside page.tpl.php after head tag as follow and it worked great:
<!--[if lt IE 7]>
<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
<script defer type="text/javascript">
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
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
}
}
}
</script>
<![endif]-->
This is easiest way to do after research all drupal.org and outside websites.
#5
I'm going to integrate this (that is, a fix for MSIE's PNG support) into Sands/Sands_CSS one day, but that day is not today.
#6
Thanks zyara..
#7
Thank you zyara.