Yet another article on why IE six sucks
By Saulo, 4 years, 9 months ago in Technology. 8 Comments
I can give at least two reasons: its PNG rendering and CSS support.
When I worked on the new version of my blog and compared the results on both Firefox 2 and Internet Explorer 7, I had the naive assumption that I was covering most of the browsers, until my girlfriend told me she could not see half of the page on her laptop.
To be honest, at first I had the usual arrogant geek reaction—she must be doing something wrong. She had to send me a screenshot so that I could realize she was using version six of the infamous browser. I am not going into the technical intricacies as to why PNG and CSS are not well supported; all I will and can say is that IE just recently started to comply with the web standards.
Here are the side-by-side screenshots comparing Pensador’s Blog on Firefox 2, IE 7 and IE 6 respectively:
As you see, the PNG transparency was competely ignored and here is why the blog posts do not show up:
I was forced to convert all those PNG files to GIFs and to hack my CSS to get the desired results. For some reason, the “main” div in which I put the blog posts is too wide to fit in the “page” div. However it should fit since its width was 600 px and the menu on the left was 180 px, adding up to the 780 px of the “page” div. Anyway, I had to reduce the size of the “main” div to 585 px for it to show up on IE 6.
IE Sucks with PNG and CSS, remember my logo’s glow? It glows shiny and pretty on FireFox, but on IE, damn…what a ugly crap,
Anyway!
Stay with the Fox! http://www.getfirefox.com !
Yeah, now I’ll have to convert all the PNG icons to GIFs just so that they don’t have the gray background on IE 6! :(
The grey background sucks, but there’s a few solutions to it – namely a filter attribute (AlphaImageLoader) which can fix transparency on IE5.5 and upwards. You can use CSS, JavaScripted CSS, conditional CSS or .htc behaviours to fix png transparency. Might find a good solution if you Google ‘AlphaImageLoader filter’.
Your widths issue is probably due to Internet Explorers’ incompetence with the CSS box model. (Width = Padding+Width in IE6- and Width = Width in everything else) No nice solution to this other than cutting out the padding.
Your width issue could also be due to IE’s double-float-margin bug, but I think that’s less likely.
And be wary if you mix pngs and gifs for designs – there’s inconsistancies in the gamma element of pngs between browsers, which means that your identical colours can be inexplicably different when you compare pngs to gifs in different browsers!
Thanks, that was a very informative response! I am aware that I have mixed PNGs and GIFs throughout the site. It is on my to-do list to adopt one of the formats and stick to it. I have not decided which one though.
Well, I cant agree more.
LOL, yeah. A long time ago (I think it was before the IE 7 release), I fixed up my blog to “work” with IE 6. It’ll work, but it’s not going to be pretty. The problem was that no scroll bars wouldn’t appear on my absolutely positioned divs, so I ended up using JavaScript expressions in a special CSS file (included through conditional comments).
I am not a big IE fan either (using Chrome now) but to be fair, IE6 was release in 2001 (9 years ago) when Microsoft couldn’t care less about standards (they were the standard with 95% market share).
I am curious about IE9 do you think they will close the gap with Firefox / Chrome?
Regards.
Hello Fabiano!
Firefox and Chrome are becoming more and more popular, even among the non tech-savvy. I don’t think IE9 will ever catch up!