from the user’s end Internet Explorer is probably the most friendly to your average computer user. But what people don’t know about is the freaking gargantuan number of man hours going into making websites work with internet explorer.

General random html like tables and what not display pretty much the same in any browser provided that your table has been written properly but once you start to get into CSS for positioning sometimes Internet Explorer uses a different method to place things on the page, which then requires using non-standard html and stupid browser specific html conditional statements. Arrg!! if you care these are IE conditional comments

 <!—[if IE]> blah blah blah <![endif]—> 
 <!—[if gte IE 6]> blah blah blah <![endif]—>
 <!—[if lte IE 6]> blah blah blah <![endif]—>
 <!—[if gt IE 6]> blah blah blah <![endif]—> 
 <!—[if lt IE 6]> blah blah blah <![endif]—>

gte is greater than or equal to lte less than or equal to and so on and so forth. This is an example of Internet Explorer specific comments

<comment>this text would not show up in IE</comment>

So now pages can be riddled with redundant code and it just gets confusing and messy. But whatever not much you can do about it.

But my most recent issue had no solution! conditional comments or whatever could not take care of it. I was adding in a fade in/fade out to a user initiated page switching (done by onclick attribute on an anchor tag) and everything worked fine and dandy. All the text faded nicely and came back in nicely, on every browser except IE.

On Internet Explorer you have to use an alpha filter to achieve different levels of opacity. It is a complicated syntax and on top of that, it turns off cleartype. And actually any of the filters in IE will turn off cleartype when used on text, I don’t think you would notice it on pictures but that is besides the point.

So the user clicks on the link to switch the pages and then the text loses cleartype, and it is a noticeable change and then even when the text comes back to full opacity it still has cleartype turned off. So what you have is this nasty jagged edged, internet 1.0, type looking font that is difficult to read. This is friggin ridiculous!

But! there is a solution! all you have to do is add more code! and here is the line of code that needed to be added.

document.getElementById('textdiv').style.removeAttribute("filter");

this line removes the IE filter after the text becomes 100% opaque. this is the only solution to the problem with fade effects on text, other than getting a better browser. After the filter is removed cleartype is automatically restored.

The only problem with this is that even in the short amount of time it takes for the effect the removal and addition of cleartype is very noticeable. But all things considered it is good enough.

I think the best solution to this problem, though, would be to fade text in and out by changing the colors of the text. But changing from some off the wall red color to white would be annoying to do and then you have a lot of work to do if the customer decides that they want a different color behind the text.

Eh whatever hopefully this will help someone some day when they are doing something similar. 

This entry was posted on Friday, July 10th, 2009 at 8:20 pm and is filed under Gripes, Tech, web stuff. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.