Pitfalls in Internet Explorer â€“ How to cover them up or walk around them
work around little quirks in Internet Explorer and FireFox. But now I had to do
advanced things (manipulating the DOM-tree,
layout was ruined). This was the moment I got really tired of Internet
Explorer. I use FireFox since version 0.3 and really like it for the speed and
tabbed browsing. Internet Explorer was all right, but I preferred FireFox But
now I realized FireFox also did a good job under water. Internet Explorer does
some really strange and unpredictable things.
I donâ€™t hate Microsoft or wrote this article to do some
bashing, they just could have done a better job creating Internet Explorer and
itâ€™s just a warning that testing in FireFox is not enough. With every quirk of
Internet Explorer I will give a workaround or let you know how the avoid the
bug. IE is still used on most of the pcâ€™s and we just canâ€™t ignore the people
donâ€™t work (HTML)
When you use PNGâ€™s with transparency in Internet Explorer
they just are opaque. Why? It isnâ€™t like PNG is a brand new format (itâ€™s at
least 11 years old) or that itâ€™s a bad format (PNG offers better compression
and more features than GIF, the other lossless format. It is very annoying
because with the recent AJAX-hype we want moving stuff on our page with transparency
(and preferably 24-bit with transparency). And even without
The left image is a 24-bit PNG and on the right is a 8-bit
PNG. At first sight the left image looks ok in IE. But itâ€™s totally wrong, what
was meant are the images in FireFox. A black to transparent gradient.
What we can do now are two things:
Write an angry letter to Bill Gates and tell him we start
using Linux if he doesnâ€™t fix this bug. This probably isnâ€™t such a good idea, I
would go for the solution of Erik Arvidsson
It even works with 24-bit PNGâ€™s and FireFox doesnâ€™t complain
much about it (a minor CSS error)
Substr with negative
Use x.substr(begin, end) to get a piece of a String (where x
is a String). The specification says we can use negative numbers which is very
handy. In Java an Exception would be thrown and we had to make a workaround to
get the last piece of a String.
â€œtestAmisâ€.substr(-4) will print Amis, thatâ€™s just great!
But wait, when we do this in Internet Explore testAmis is
showed and no error. Thatâ€™s strange.
Now we still have to use the Java-solution to fix this
It isnâ€™t that much work, but I was so happy I could use
When I want to change the CSS style of a DOM-element I just
have to change the class attribute, right? Not right, Internet Explorer just
doesnâ€™t care (much).
Letâ€™s take a look at this HTML page:
id="c1" class="s1">text of part c1</div>
id="c2">text of part c2</div>
id="c3">text of part c3</div>
It sets the attribute class of the nodes with id c1 and c2
to s2. Well in FireFox it works as expected but in IE nothing happens. But it
gets even better. Letâ€™s take a look at the DOM tree in IE:
The attribute is set! But it doesnâ€™t work, isnâ€™t that great?
I couldâ€™ve lived with it that you canâ€™t set the class attribute because itâ€™s a
special kind of attribute. But donâ€™t show the attribute and give me an error.
The first node is even worse:
The class attribute is set twice! Oh wait, maybe we have to
remove the class attribute:
In FireFox the attribute is removed, but in Internet
Explorer nothing happens. The DOM tree just has 2 class attributes. Thatâ€™s
crazy and too unpredictable.
The solution is simple and works in FireFox too:
Maybe the specification says we canâ€™t set the attribute
class because itâ€™s a bit special. But donâ€™t pretend it works a bit. Give me an
error or do nothing, donâ€™t make up stuff!
Float:left; is almost
I had to create a pixel precise layout. A black panel with 3
columns in it. The width of each column is 100 pixels. I want a small border of
1 pixel, so the width of the black panel should be 304 pixels.
On the left is IE and the right side is FF (image is scaled
300%). Float: left in FF is what we expect, but in IE there are 2 black pixels.
It just makes no sense because at the top is only 1 black pixel and between the
columns also is only one black pixel.
I havenâ€™t found a solution for this problem. You could place
all the divâ€™s with absolute values, but that ruins the whole idea of CSS.
reloads images but caches
When you change the DOM-tree and add an image (just an
ordinary <img> tag) Internet Explorer reloads the image and doesnâ€™t
search for the image in his cache. This means that when you have a tree with
folder icons every folder icon is reloaded! The server will return an 304
status code (which means the image hasnâ€™t changed since the last request and
you could reuse your old one), but that doesnâ€™t matter because the round trip
to the server is the most expensive with small images.
This alone wouldnâ€™t have made it as a topic in this article because
there are situations when this behaviour is required (a real time stock
exchange graph for example). But now comes the big flaw:
images and donâ€™t cache
requests is far more logical. For the caching of
these headers in your response:
There are people that claim that this doesnâ€™t help. I think
it does, but maybe some versions of IE donâ€™t care (I havenâ€™t come across them
and didnâ€™t have any complaints of customers about it). Then the solution is
adding an extra request parameter with a timestamp in it (this is also the
solution when you canâ€™t change your request)
Event handling in IE
I called the title of this paragraph different because
FireFox might me wrong. But FireFox uses the W3C recommendation and I
personally think that is the standard and the W3C way works a lot nicer.
The FireFox way:
The callback method has the signature methodname(e) where e
is an event object with which you can do a lot of nice things.
And now we want to add an event in Internet Explorer:
The callback method has no parameters, if you want the nice
things of the event you have to get it from window.event, this is a global
Scott Andrew wrote an article about event handling and shows
us a method to hide the problems.
These strange things are just thing I came across in one
week. I already knew about some but didnâ€™t encounter them myself. I hope
Internet Explorer 7 is a lot better.
I have found only one strange thing in FireFox yet. When you walk down the DOM-tree you will find
#text nodes between all the elements when you used spaces or newlines.
Technically it is correct, but very inconvenient. Internet Explorer works
better on this topic.
In this article the author found a bug. The browser locks up with a synchronous
XmlHttpRequest. I donâ€™t agree with that because synchronous means you have to
wait for the answer, thatâ€™s the whole idea of it. The article also mentions
some other bugs in Internet Explorer which might come in handy when you start
noticably worse than FireFox. I didnâ€™t do any testing yet, but someone wrote an
article about it.
The point I wanted to make with this article is that testing
in one browser is not enough. Unfortunately FireBug (http://getfirebug.com)
only works in FireFox and this is the browser with the fewest problems,
otherwise you could have developed your page in IE and test it in FireFox to be
sure it works. Now you have to develop in FireFox and if it doesnâ€™t work in IE
you still have to do a lot of work.