I’ve been missing around or the past few days but as you all know it’s the month of vacation and relaxation. So, i am doing just that. I am doing some stuff  have to do but the blog is another thing. I need to research and code (sometimes heavily) to have a post ready. Today i decided to post about a well known problem.

As you all know, recently i had a logo design by my friend #FN$#. The logo was transparent and obviously it was on a PNG format. After that i saw the widely known problem with IE 6 and transparent PNG’s. Take a look at the image below.

This is how the logo used to be displayed on an IE6 browser. Actually, this version is, in my humble oppinion, the worst browser ever made. Many many incompatibilities and it actually has a mind of his own. Anyway, the problem is caused because IE6 cannot render correclty the layers of the image. Anyway the cause is not what matters but the actual result.

So, i was faced with the problem. I initialy tried to convert the image to a transparent GIF (which has no problems) but it turned out to be a bit crappy. So, i decided that for all the users that visit the blog with IE6 life is crappy anyway 😛 so the crappy GIF is just fine. For any other visitor the current, beautifully made, PNG is what should be used. Here is how i did it.

On the header file of my theme, the one that has the header image, i detect the user’s browser and render the image respectivly. Here is a code snippet:

<?php
	$img_header = '';
	if(preg_match("/MSIE 6/", $_SERVER['HTTP_USER_AGENT'])){
		$img_header = 'logo.gif';
	}
	else{
		$img_header = 'logo.png';
	}
?>
<a href="<?php bloginfo('url'); ?>"><img alt="logo" style="border: none; margin-top: 20px;" src="http://www.stratos.me/wp-content/themes/blueeagle/images/<?php echo $img_header;?>"></a>

This is a weird way to do it but it works for me well. Hope this helps you out as well!