Posts Tagged ‘bugs’

IE7 glitches galore - August 22nd, 2007

For anyone who claims that IE7 is “the best browser there is” (Davey…), this might just put it in a different light.

Goto http://www.plfc.org.uk/ and look at the first link on the page, “FIEC”. Notice (in IE7) that there’s a little gap after it, like there’s a . Well, look at it in FireFox, Opera, Konqueror or Safari and you’ll see a (correctly rendered) image indicating an external link (as used on Wikipedia). Now look (in IE7) on the Missionary Support page and you’ll see what it should look like on the home page. The CSS is completely valid (I set a padding-right and a background-image, it’s the same CSS behind both pages), yet IE7 insists on not displaying the image on the home page. Why? Because it’s full of bugs. Is FireFox? Yes. But they get fixed quickly and regularly. IE7? Every webmaster has to just hack their way around them.

Go, go now and download FireFox.

Update: I just had a look on IE5, and the links render completely wrong. However the home page one does work. Interesting. I then had a look at wikipedia to see how they get around these problems, and I noticed that in IE5 the links don’t render the external icon at all. A quick baz at the source, and I notice they have a bunch of IF statements in the HTML, each one referring various IE versions to alternative CSS “fixes”. Seems a good idea, so I’ll ditto it.

If you’re too lazy to go find the HTML yourself, wikipedia uses this:

 <!--[if lt IE 5.5000]><style type="text/css">@import "/skins-1.5/monobook/IE50Fixes.css?90";</style><![endif]-->
 <!--[if IE 5.5000]><style type="text/css">@import "/skins-1.5/monobook/IE55Fixes.css?90";</style><![endif]-->
 <!--[if IE 6]><style type="text/css">@import "/skins-1.5/monobook/IE60Fixes.css?90";</style><![endif]-->
 <!--[if IE 7]><style type="text/css">@import "/skins-1.5/monobook/IE70Fixes.css?90";</style><![endif]-->
 <!--[if lt IE 7]><script type="text/javascript" src="/skins-1.5/common/IEFixes.js?90"></script>
 <meta http-equiv="imagetoolbar" content="no" /><![endif]-->