Problem to use a PNG logo

[turbohead]

I have a problem about using a PNG logo. There is no problem when I load it in Firefox, but when I load it in IE, it looks like this:

[ElbertF]

PNG isn't fully supported by older IE versions, this is not a phpBB problem. And if I'm correct, this isn't even about a phpBB forum..?

[turbohead]

But this logo works fine in some of Joomla! templates in IE6 (although some templates don't)
This is a phpbb3 forum, I just edited the subsilver template a bit, You can find it here.

[turbohead]

BTW, if I want only the buttons without text (register, login, faq, etc), what should I do to get rid of the text links?

[Highway of Life]

Edit the language file

[turbohead]

Thank you, I'll try it later~

[Wert]

But this logo works fine in some of Joomla! templates in IE6 (although some templates don't)
This is a phpbb3 forum, I just edited the subsilver template a bit, You can find it here.

Joomla could well be using some gross hack to enable png transparency in IE6 to some degree. I wouldn't count on it.

And while Joomla looks pretty, you might look into drupal if you've got serious needs. Joomla/Mambo is really limited if you want to go beyond the basics.

[harmlessgoat22]

OH MY GOSH! It's like you mixed ipb and phpbb together. How DARE YOU? What did your parents tell you? Good and Evil don't mix!

[Highway of Life]

There is a workaround for this...
The problem can only be fixed in IE 5.5 and 6.
Why only versions 5.5 & 6 you say? Because Windows IE versions prior to 5.5 do not support the filter which fixes the PNG problem, and version 7 is reported to have fixed the issue entirely.

Place this code in your header on the page with the PNG.

Code: Select all

<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   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
         }
      }
   }    
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

EDIT: I should add, that it would be best if you put this in a remote file, then call the JS script using the below code.
Of course, if you use this method, you would ONLY include the contents inside the <script> tags in the code shown above.

Code: Select all

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="yourfile.js"></script>
<![endif]-->

[turbohead]

Edit the language file

Thank you, the text get away from menu bar now

Place this code in your header on the page with the PNG.

Sorry, I'm not familiar with codes, should I place this code in index.php?

OH MY GOSH! It's like you mixed ipb and phpbb together. How DARE YOU? What did your parents tell you? Good and Evil don't mix!

I like the style of IPB, but it's expensive........so what I could do is to edit the style to make it more looks like IPB