Hi all

I'm having a problem with rendering .png images with their alpha transparency..

I've tried different solutions amongst which:

  • img behaviour CSS element, with the pngbehavior.htc script and with 1x1 blank.gif file
  • other javascripts
  • filter:progid:DXImageTransform.Microsoft.Alpha(PARAMETERS) call

The png file I'm trying to render with transparency is basically a strip file (978 x 41 ) where I will have a navigation menu printed on...

The problems are only with IE. FF will work with most of the different setup solutions I tried.

I'm referrring to the image from within the style sheet CSS file for my theme.
I use this syntax in the CSS file:

.navigation_bg {
	background: url(images/primaryNavigationPanel.png);
	width:979px; 
	height:41px; 
	z-index:6; 
}

While in the tpl.php template file I try to use this class to style a

element...
	<table border='1'  class="navigation_bg" >
		<tr>
			<td width="100%"> 
				<?php print $header; ?>
			</td>
		</tr>
	</table>

where the <?php print $header; ?> part just prints the navigation menu ( nice_menus.module )

It just seems as if the in IE the problem is solved only if images are embedded through the Only local images are allowed. tag on the tpl.php template files..
Or embedded anyhow in the tpl.php template file.

I cannot view the image with its correct alpha transparency if the image is referred to from within the CSS file..

This is important if I need to have different CSS for different screen resolutions where I will be referrring different images according to the screen res.

Hope you can give me a hand on this, or anyone else who has had the same problem...

I've also posted in reagards to node http://drupal.org/node/69261 (IE PNG alpha support) . It contains relative information about this issue and proposed solutions. On the initial post for this node it states:


That should do the trick!
I do not think this method handles stylesheet images correctly, but will handle all images placed in any of the theme.php files, php files in site content, the logo etc.

If you really need css placed images to work, let me know.
Also, you can find more information on PNG images in IE here
http://www.scss.com.au/family/andrew/webdesign/pngbehavior/
and the reference for alphaimageloader here
http://msdn.microsoft.com/workshop/author/filter/reference/filters/alpha

Is then any other solutions been proposed?

Help? Suggestions ?

Cheers

Comments

keylope’s picture

I was having the exact problem where my png images were not rendered correctly when being used as a css background. Searching for a solution, most sites said that right now, IE doesn't support a png background. I'm sorry that I can't supply any references, this was a couple weeks ago, but since then I've had to move on and come up with other solutions.

nyumbani_yangu’s picture

Well, any suggestions then?

How about using GIFs? But there is always a rendering problem as I've seen trying with them.. Am I not right?

Any other ideas? What solution did you come up with?

Cheers again

sime’s picture

Status: Needs work » Closed (works as designed)

Sorry. Infrastructure project relates to drupal.org site infrastructure. Your issue is a cross-browser html/css design issue that is not relevant to Drupal CMS. You might try the drupal forums, or perhaps look to sites like listapart.com

Regards, .s

regx’s picture

To filter images placed in the stylesheet see http://msdn.microsoft.com/workshop/author/filter/reference/filters/alpha...

In your stylesheet you can use the filter like the first example and it should work in IE.

nyumbani_yangu’s picture

First of all, thanks for the support.

I managed to get it working with the filter attribute. But now everything inside the styled element ( a

in this case) will be filtered..

What if I need to put another image on the foreground inside the same

element?
How can I achieve this?
In general, how can I limit the filter to only the level of the styled tag??

Hope my question is clear

Thanks