Archive for the ‘Internet Explorer’ Category

Internet Explorer 8 Beta 1 Review with Screenshots

Monday, March 10th, 2008

Couple of days ago I played a bit with the brand new and not so shiny Microsoft Internet Explorer 8. As this is the first Beta release it is mainly meant for designers and developers so they can get their clocks synchronized with Microsoft. For me as a xhtml-css-javascript abuser the most interesting thing was the new standard mode rendering engine which was already main topic in couple of discussions.

For the review I used Microsoft Server 2003 SP2 because this was what I had installed under VMware virtual machine and I wanted a quick way to revert if I don’t like it.

Downloading – only 14MBs… done

Installing – easy and relatively fast… done

Running…

On the first run you will be encouraged to choose between express settings or to manually set search engines, activities providers and other options. As IE newbie I selected express settings.

 

My first expressions were:

  • Hey there is now a bookmark toolbar – great
  • There is big blue button “Emulate IE7” – strange

Ok let’s check the new features:

1. Activities:

 

Activities are contextual services that provide quick access to external services from any webpage. Activities typically involve one of two types of actions

Nothing exciting about this – just sending the selected string to some “Activity provider” via the right click context menu. Still it saves the users couple of clicks and copy-paste operations. For example while I was browsing a page I highlighted the word “violin” and using the Ebay Activity provider was able to find violins on sale. Something that will be quite useful is to have activity provider which can compare prices at different online shops.

2. WebSlices:

 

Web sites can expose portions of their page as a WebSlice that users can subscribe to and bring that content with them on their links bar wherever they are on the web. Users receive update notifications when the content changes.

Generally the idea is not that revolutionary as it sounded at first. Using special markup the website developer/designer can give the end user the ability to automaticly check for updated pieces of the website. It is like rss feeds with pictures. However for both Activities and WebSlices the end user has to “install” the corresponding provider/website slice.

3. Internet Explorer Developer Toolbar

 

Now IE comes with dev toolbar preinstalled (yeee) and extended. By first expressions Microsoft team have given more attention to Javascript tools. The bad news is that IE dev toolbar is still far away from Mozilla Firefox FireBug extension. From my quick walkthrough it I found out that you can enable/disable applied CSS styles but can not edit them which is something quite useful.

4. Speed

As usually I used my trusty companion when it comes to measuring Javascript performance – http://mootools.net/slickspeed/
For comparison I used the same testing environment just before installing IE8 where I had Internet Explorer 6 and the news are quite good. On most tests it behaves almost twice as fast as IE6. There is still room for optimizations (comparing to other browsers) but it is good to see MS are doing efforts in this direction. In the official site it is said that they have also improved rendering time – something that is pretty subjective and hard to test.

5. Rendering Engine

 

After visiting couple of sites (including google maps) I understood why there is such big blue button “Emulate IE7″(second screenshot was done in emulated mode). From the screenshot above you will see how “Internet Explorer 8 standards mode” mess things up (first screenshot). I will need much more investigation but I can not understand how “Cascading style sheets 2.1 compliance” can break so much things – even Yahoo’s home page has displacements. I’m sure Microsoft will fix lots of things until final version, but for sure I will have to re-evaluate my CSS/XHTML knowledge before coding IE8 friendly sites.

I wish only good to IE8 because after all there will be billions who will use it.
All trademarks and copyrights are held by their respective owners.

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