Posts Tagged ‘bug’

Adobe Illustrator CS3 Exception

Sunday, January 27th, 2008

There is one really nasty bug in Adobe Illustrator CS3 which manifests when trying to save a file. Everytime I tried this operation I was receiving an error telling me that Illustrator.exe has thrown exception and suggesting me to use debugger. After trying lots of stuff including installing all updates from Adobe I found the reason – my Print Spooler Service was configured to start manually and therefor not running.

So in summary: if you plan to save files from Adobe Illustrator CS3 keep your Print Spooler service running.

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

IE6 Image WhiteSpace Bug

Friday, August 31st, 2007

Something that really gets me out of my skin is this silly bug. I often need some area with no padding, no margin or any other space bellow the image that is contained in it. Here is how it looks before and after applying the fix :

Internet Explorer Image WhiteSpace Bug

Fix description: Just add font-size:1px; in the definition of the area’s style

Preview of the bug and the fix

IE6 / IE7 Bug with ClearType Turned On

Wednesday, August 29th, 2007

If you have seen some strangely cut off ‘W’ than you know what is all about.

Description of the bug: If you have some word ending with ‘w’, you are using Verdana font-family, font-size 10px, your words are in table and most of all you are using Internet Explorer with your Cleartype turned on – you get this:
Internet Explorer Cleartype bug

ClearType bug – Proof of Concept