Automatic PNG fix in IE?
Hello all,
I'm a new Drupal user. I'm in the middle of implementing Drupal as (at least visually speaking) a back-end CMS on a website of my design and implementation.
I have it basically functioning - it's using my CSS and XHTML (ported into "page.tpl.php" format) for site structure and style, and I'm at the point where through Drupal I can essentially do the content admin, etc., I want to do.
I have a curious problem, however. I use three PNG images on my site which need to have transparency functioning. Before I implemented Drupal, I had the transparency fixed quite to my satisfaction through the "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" method. Post-Drupal implementation, I find that in IE, and IE only (6, at least - I haven't tested on 7 yet) the images I have "transparency fixed using this method no longer display. I wish to keep using this method - however, in my understanding of the situation, one of two things are happening:
Either (a) Drupal is implementing its own JS based PNG transparency fix, and it's interfering with mine, of
(b) somehow my fix is being ignored.
I would expect that if (b) were the case, I would still see the images, sans transparency fix Also, I know that the rest of my stylesheet is being read and processed correctly. This leads me to think that (a) is the case. That being so (if it is so), how do I go about disabling IE conditional scripting or styling?
Any help would be greatly appreciated. If more information regarding my scripting is needed, I will be happy to supply it.
-Brendan
=-=
I would investigate the pngfix.module or the pngbehave.module
IE7 shouldn't have this issue. I believe it is a problem only in IE6 which hopefully begins to disappear if MS sticks to it's guns and drops support for IE6 with the release of IE8.
It may be that I've phrased
It may be that I've phrased my initial question in an unclear manner.
First-off - I do thank-you for the response, and I will investigate those modules. However, what I am more curious about, as I tried to get at in my original post, is whether Drupal is already implementing some sort of IE conditional JS based PNG fix that is conflicting with my CSS only PNG fix.
To restate the essence of my original post in hopefully a more clear fashion - I already fixed the PNG transparency issue in the CSS for my theme. An example of this code would be
#mainheader {
background:url('Images/LittleBowHeader.png') no-repeat top center;
height:144px;
margin:30px 0 0;
position:relative;
width: 960px
}
/*the "html" sections (two more of them in this CSS file) are .png transparency fixes for IE6*/
* html #mainheader {
background: none; /* Hide the current background image so you can replace it with the filter*/
width: 960px; /* Must specify width */
height: 144px; /* Must specify height */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='images/LittleBowHeader.png');
}
This CSS works fine (in FF, IE, Safari, Opera) when it is referenced by the corresponding HTML without having Drupal integrated. However, when Drupal is integrated, it seems as if this fix is conflicting with some styling that is native to the Drupal installation - perhaps an "if IE" initiated JS.
I hope this is clearer. What I want to do (and can't figure out how to do) is (if this is in fact what needs to be done) disable Drupal's IE conditional PNG fix.
-Brendan
=-=
which theme is in use?
Core doesn't implement such a .js that I am aware of but a contrib theme may.
Farbtastic
I'm using my own "skin" as a front-end theme. It is a fixed width, vertically expanding, theme.
For the admin theme, I'm using Rootcandy.
The site (especially as it pertains to .png's - my "skin," and Rootcandy) will display correctly (as I may have mentioned) in FF, Opera, and Safari (up to date versions, anyway - that's all I've tested on).
I'm curious - do you know if the "if IE" condition is true - whether any aspect of Farbtastic is called into play? The reason I ask is because, in looking through files native to the basic Drupal 6 installation, the Farbtastic .js file is the only place I've found reference to IE 6 related .png image processing. The following is, as far as I can tell, the most relevant code snippet:
// Fix background PNGs in IE6if (navigator.appVersion.match(/MSIE [0-6]\./)) {
$('*', e).each(function () {
if (this.currentStyle.backgroundImage != 'none') {
var image = this.currentStyle.backgroundImage;
image = this.currentStyle.backgroundImage.substring(5, image.length - 2);
$(this).css({
'backgroundImage': 'none',
'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')"
});
}
});
}
-Brendan
=-=
do you have the color.module enabled in administer-> modules?
If not, I don't know that farbtastic is called into a page ??
Problem solved (I think - fingers crossed)
OK - I think I solved the problem. It just feels to good to be true at the moment (3 or so hours of wrestling with the problem later), so I'll do a little more testing and post whether the solution is definitive in the next day or so.
My initial take on it is this:
The problem, I think, was a combination of (perhaps) properties transferred from a Drupal related stylesheet and (definitely) the way IE 6 interprets certain styling "shorthand."
For the .png transparency fix that I posted earlier to work, it is conditional upon several style properties being defined for the element in question in a certain way.
The first condition is that the height and width of the element must be defined (i.e. height: 144px, width 960px).
The second is that the element must only occur once - that is - the fix cannot be applied to a repeating element.
What I found out was as follows, and hopefully will justify my initial conclusion regarding the problem:
When I initially employed the .png transparency fix, I did so before I integrated Drupal into my site (or vice versa).
The fix worked just fine in all the browsers I tested it in.
The only variable seems to be Drupal (a large variable, I admit - however . . . )
As I mentioned before, the fix looks like this:
#mainheader {
background:url('Images/LittleBowHeader.png') no-repeat top center;
height:144px;
margin:30px 0 0;
position:relative;
width: 960px
}
/*the "html" sections (two more of them in this CSS file) are .png transparency fixes for IE6*/
* html #mainheader {
background: none; /* Hide the current background image so you can replace it with the filter*/
width: 960px; /* Must specify width */
height: 144px; /* Must specify height */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='images/LittleBowHeader.png');
}
The first element style is for standards compliant browsers. I'm not acutally sure whether or not height and width need to be defined here - but it does no harm.
The second element style is for IE 6 (and possible 5.5.). The idea, as I understand it from a layman's perspective, is that the background image previously introduced in the first element style is replaced with a transparent background color (background: none;) and the filter is applied to the same, re-introduced, background image.
What was happening to cause non-display of the image is that IE was interpreting the "background: none;" shorthand as "background: none transparent scroll repeat 0% 0%;"
Therefore, the second condition I earlier described was not being met.
Once I found that out, the fix was simple - I changed "background: none;" to background: none transparent scroll no-repeat 0% 0%;"
Problem solved.
Thus my conclusion - it seems, Drupal being the only variable (that I know of), that perhaps there was another stylesheet which affected mine - and perhaps it was just an anomalous browser property interpretation issue.
Anyway, thanks for all your suggestions, VeryMisunderstood. In a round-about sort of way, they got me on the right path.
-Brendan