...

View Full Version : png to work across IE,FF and safari problem



bunsco
10-30-2006, 02:01 AM
Hi all

sorry in advance for the length of this thread, seeing this is based on a graphic problem, i thought id post this problem on here as well - just hope the following make sence....

Im trying to execute a simple solution to the png transparancy problem in IE.

usually, getting it to work in Firefox and safari is a doddle, as they are able to render the file correctly.

But in my attempt to get it to work in IE, it will not work in firefox or safari.

i found this solution for IE on the net in answer to a problem on a forum -

Hi Kevin,

This theory tends to work well for IE and non IE browsers. Below is the css
based on the background image of a DIV tag with ID png_background.

<style type="text/css">
body {
height:100%;
}

div#png_background {
width:344px; // specify width
height:215px; // specify height
background-image: url(ew.png);
}
</style>

<!--[if IE]>
<style>
div#png_background {
background-image: none;
filter: progidXImageTransform.Microsoft.AlphaImageLoader(src=ew.png,sizingMethod='scale');
}
</style>
<![endif]-->

Cheers

I couldnt get it to work ( if it works at all) as i didnt know how to implement the second part of the code as i didnt know where it went - whether html or css document (the <!--[if IE]> part)


This is what i've done so far:
-------------------------------
(relevant section in external css stylesheet)
div#grandwrapper {
background-image: none;
filterrogid: DXImageTransform.Microsoft.AlphaImageLoader(src=images/urban_background_repeat23.png,sizingMethod='scale');

#grandwrapper {
position:relative;
width:615px;
height:100%;
margin: 0 auto;
min-height:100%;
background-image:url(../images/urban_background_repeat23.png);

}
--------------------------



Im only versed in very basic css so im missing a lot of hack knowledge and how to implement them.

i also tried to apply a voice-family mechanism to get IE to pick up on the AlphaImage filter aka the 'holy hack' and to bypass it if its a non IE browser:
-----------------
div#grandwrapper {
background-image: none;
filterrogidXImageTransform.Microsoft.AlphaImageLoader(src=images/urban_background_repeat23.png,sizingMethod='scale');
voice-family:"\"}\"";
voice-family:inherit;
background-image:url(../images/urban_background_repeat23.png);
}

* in the above, it SHOULD read progid and DXImage where appropriate and not icons.
------------------



but that didnt work.

The solution looks to me to be based on some kind of brower detection.

as stated before, im a beginner with css and i know practically no javascript - i can just about handle what ive done so far.

Im so stuck on this that its now become intolerable.

For the purposes of clarity, i have setup examples of it working in IE and firefox/safari (both using external css stylesheet method with the original and an altered duplicate stylesheet)

http://www.case236.co.uk/u_web.html (firefox/safari - using my voice-family attempt)

http://www.case236.co.uk/u_web2.html (IE - extracted from borrowed code)

I started to attempt the A list apart 'object' based solution but that was too rich for my blood to handle.

Is there someone out there who can PLEASE PLEASE point me in the right direction in getting this to work.

I would be most greatful for any help recieved.

ArcticFox
11-13-2006, 07:01 AM
Why have you removed <!--[if IE]>?

VIPStephan
11-13-2006, 02:56 PM
This part of the code:


<!--[if IE]>
<style>
div#png_background {
background-image: none;
filter: progidXImageTransform.Microsoft.AlphaImageLoader(src=ew.png,sizingMethod='scale');
}
</style>
<![endif]-->

is the part that makes it work in IE. It's wrapped in conditional comments (http://www.quirksmode.org/css/condcom.html) that will make this code only work in IE (even specific versions of IE).
Basically how it works is this:


<html>
<head>
....
<!-- REGULAR EXTERNAL STYLESHEET -->
<link rel="stylesheet" href="styles.css" type="text/css" />
<!-- REGULAR INTERNAL STYLSHEET -->
<style type="text/css">
...
...
</style>
<!-- ADDITIONAL STYLES JUST FOR IE - OVERWRITES REGULAR STYLES (ALSO INTERNAL OR EXTERNAL CSS POSSIBLE) -->
<!--[if IE]>
<style type="text/css">
...
</style>
<link rel="stylesheet" href="styles_IE.css" type="text/css" />
<![endif]-->
</head>

<body>
....
....


So the conditional comments and their content go after the regular CSS files/stylesheets but before the end of the head section.

Maybe it's not working because you forgot to add type="text/css" to the IE style tag? But I guess it's because you have a typo in your IE transparency fix. It must read something like:


filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myimage.png',sizingMethod='scale');

A simple search for "png transparency IE" on the internet brings enlightening results, e.g.: http://alistapart.com/stories/pngopacity/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum