Posts Tagged ‘ie6’

IE6 PNG Transparency CSS background-repeat Fix

Sunday, December 9th, 2007

Couple of people around the forums and here commented that none of the current Internet Explorer 6 PNG scripts provide fix for the issue of using png image as CSS repeated background (background-repeat: repeat/repeat-x/repeat-y).

Therefor with no generic solution at this time I thought of three possible workarounds:

  1. Use sizingMethod=’scale’
  2. Use flash for rendering the png
  3. Make as much as needed areas and repeat with Javascript

Here I will explain the first one since it was the easiest to try.

The idea is very simple just use filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’, sizingMethod=’scale’, src=’the-image-you-want-to-repeat.png’ ) and make sure you properly apply the other CSS rules. This technique uses scaling instead of repeating but for shadows and other cool effects it is sufficient.

End result and demo following:

Preview for IE6 PNG background-repeat

For more info see the demo under Internet Explorer 6

IE6 PNG Transparency Fix with Javascript v2.0

Tuesday, November 13th, 2007

Thanks to Aaron Newton from CNET.com for refactoring my PNG Fix script and increasing its quality and speed.

As usual for dessert explanations + demo and source code

IE6 PNG Transparency Fix with Javascript

Wednesday, October 3rd, 2007

As always when I need to use some transparent images cursing Internet Explorer 6 is inevitable so i wrote a quick javascript fix. Again mootools was the preferred framework because the ease of use.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// This Javascript is written by Peter Velichkov (www.creonfx.com)
// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanksfunction fixPNG(){
 
 $$('*').each(function(el){
 
 	var imgURL = el.getStyle('background-image');
 
 	var imgURLLength = imgURL.length;
 
 	if ( imgURL != 'none' && imgURL.substring(imgURLLength  - 5, imgURLLength  - 2) == 'png'){
 
 		el.setStyles({
 
 			background: '',
 
 			filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + imgURL.substring(5,imgURLLength  - 2) + "')"
 
 		});
 
 	};
 
if(el.getTag() == 'img' && el.getProperty('src').substring(el.getProperty('src').length  - 3) == 'png'){
 
 		var imgReplacer = new Element('input', {
 
 			'styles': {
 
 				'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + el.getProperty('src') + "')",
 
 				'position': 'relative',
 
 				'background': 'transparent'
 
 			},
 
 			'title': el.getProperty('alt')
 
 		});
 
imgReplacer.setStyles(el.getStyles('padding','margin','border','height','width'));
 
 		imgReplacer.setProperties(el.getProperties('id','class'));
 
 		imgReplacer.disabled = true;
 
 		el.replaceWith(imgReplacer);
 
 	};
 
 });
 
}
 
if(window.ie6){
 
 window.addEvent('domready', fixPNG);
 
}

Fix description: First I’m looking for all tags that have background-image style and replace it with Microsoft AlphaImageLoader filter, then I search for all <img> tags and replace them with <input> (img src used for style background image again using the MS filter). I used input since it is inline element but still has height and width – like the img tag.

PS. If you use any links in area with PNG used for bg put the links in div with style=”position:relative” else they will not be clickable due to the MS filters

and as always example: IE6 PNG Transparency Fix with JavaScript