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
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
Comment #1
keylope commentedI 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.
Comment #2
nyumbani_yangu commentedWell, 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
Comment #3
simeSorry. 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
Comment #4
regx commentedTo 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.
Comment #5
nyumbani_yangu commentedFirst of all, thanks for the support.
I managed to get it working with the filter attribute. But now everything inside the styled element ( a
What if I need to put another image on the foreground inside the same
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