Web Design Transparency Problem

Hello,

I've downloaded a great template from you - thanks very much. It uses a .png picture for the header image. I have created a png picture of my own, which looks great in firefox and ok in ie7 but the transparency is ignored in ie6.

Could you advise how I fix this? http://www.fightphotos.biz/index.htm
Is it something to do with all the options available when saving in photoshop?

Many thanks,

Danny.

 

unfortunately I.E.6 does not support PNG transparency

My suggestion is to break with IE6 and to install firefox

mehm... there should be a workaround... using the PHP's GD2 libraries, but I'm not so skilled to create a script for you right now...

 

I have FF, wouldn't use IE if they started paying me. That's where the trouble started. I thought the site was fine but got reports that it was garbled. This transparency thing is the last little problem.

I have managed to fix it I think by indexing the colours in photoshop, but at the expense of image quality.

And unfortunately for me 59.89% of my traffic uses IE6.

Are you saying that your gamezone template doesn't show properly in ie6? That has a transparent png for the header image.

Would someone be able to pass me a script for testing browser version and using different images for each?

 

in any case IE7 is a free update to IE6 (bleah I'm advising you on IE >.<)...

... look at this site:
http://homepage.ntlworld.com/bobosola/

 

That's a top suggestion, thanks.

Unfortunately it doesn't support CSS background-images. Grrr.
I was really excited for a minute there.

Any help with a script that will use one background image for FF and another for IE would be much appreciated.

My background-image is specified in my stylesheet. How do I move that decision to a script in the head of my index? I've found a script to get browser type, I just need to know how to define which image to use. The vast majority of my traffic is ie and FF so, call me heartless, I'll be focusing on those.

UPDATE:

Why won't this work for example..?

<SCRIPT language="JavaScript">
<!--
var browserName=navigator.appName;
if (browserName=="Firefox")
{ link rel="stylesheet" href="style.css" type="text/css" media="screen" }
else
{ link rel="stylesheet" href="iestyle.css" type="text/css" media="screen" }
//-->
</SCRIPT>

 

I've found the answer....

<!--[if IE]>
<link href="iestyle.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

Works for MSIE5.5+

It is skipped as a comment by everything but IE. IE reads it and uses a different stylesheet.

Cool!

 

so you will firstly load the FF one and then (eventually) the IE one, that will overwrite the first one... am I right?

 

I guess so. I'm not sure whether the CSS is loaded as soon as the 'link rel' is encountered or when the body is loaded.

Still better than relying on browser detection and it's fully compliant.

 

you could create a php check like this

Code:

if(browser_detection('browser') == 'ie' &&[FONT=monospace] browser_detection('number') <= 6[/FONT])
    echo "     <link href="iestyle.css" rel="stylesheet" type="text/css" media="screen" />";
else echo "     <link href="normal_style.css" rel="stylesheet" type="text/css" media="screen" />";

using this class: http://techpatterns.com/downloads/php_browser_detection.php

 

I haven't paid for php support on my website.

Guess that means I can't use php...?

 

dunno, try to save this page:

test.php

Code:

<?php php_info(); ?>