Internet Explorer 6 and the Transparent PNG!
Pixel Criminals portfolio and blog is made up of colourful transparent png’s to create the look we wanted. This took a substantial amount of time, and began with Photoshop and a tiresome amount of layers. Now imagine what that was like when it came to xhtml, css and the web. CSS is the baby behind the design and coding to standards is what we do best. However we took a huge risk and banned IE 6 and below from the site. We will take you through our problem and look forward to hearing your point of view.
To start with, the whole website is built so that the content can be read within a central wrap of 800 px. This wrap is also centered and basically means that the majority of screens can see the content no matter what. Now, because we use so many layers within the site (z-index) we had to make those div widths contain a percent value so that the site was perfect across all browsers, platforms and screen sizes. To put this in English, the design around the content is larger then the 800px content wrap and therfor disapears if viewed using a smaller screen without losing the content, or will centalise all together not matter how wide the screen is.
This in turn meant we had to position the background images within the divs to exact locations. We also had the background repeat value turned off to no-repeat in many cases. Couple this with a lot of divs with a position of absolute and a lovely range within the z-index and you know your heading for cross browser nightmares. Throughout the construction of the xhtml and css we came across mountains of issues but finally hit the nail on the head with what you see now.
Internet Explorer 6
All we can say is what a god damn nightmare… Endless nights with red wine, coffee and headaches. Not only did the site look terrible but it didn’t show the detailed graphics and the potential they commanded. We researched and hacked away, tested and failed and finally gave in. The biggest issue we had was hacking our perfect and compliant css, the css you spend ages perfecting. Why on earth is there a web standard if a huge company like Microsoft can’t follow it? Why is it that as designers we don’t get paid enough as it is but have to work extra long hacking at ie 6 and below just so those 3 people that still don’t upgrade can be happy?
Please see 6 reasons why IE6 must die here http://davidwalsh.name/6-reasons-why-ie6-must-die. This could help you to reason with us a little more! SOoooo….. After all the visual and CSS issues, we come to the biggest issue - ‘png transparency for the heavy graphics and huge lack of it’! We tried php fixes, java-script fixes and a few other tricks and ideas to no avail. The thing is, there are a lot of fixes out there if you have the odd image wrapped in a div that happens to be the same size as the image. But in our case as stated above we used repeating backgrounds, and positioned background images with our divs that had to stretch across all screen sizes and couldn’t be scaled in set dimensions!
So you ask what did that mean for us hey…. well it meant that the png images under the fix would stretch to fit the whole div, they stopped repeating, and in the case of IE, the links within the content couldn’t be clicked due to the z-index properties. We did find a way to have the images repeat okay but no matter what we tried, we could not position them. With that we couldn’t look at ie anymore and pretty much cursed Microsoft with every bad word we could throw at them.
After all that we used a simple script to detect ie6 and below and take them away to a warning page shown below… It states that they are using an old, unsafe, non-compliant browser and that they should up-grade as soon as possible or be restricted to the flash based portfolio gallery. That means missing all the nice layout of the site including this blog designed around Wordpress.
So that leads to the end of this post and really our reason for banning IE 6 and lower. However we would love to hear your comments on what we did and what you would have done in our circumstance? Did we make a huge mistake? Are we following a common trend?
In a couple of days we will add some new posts based on the site design plus some fantastic design related links all freelancers should not be without!
please make new posts, I’m in love with this blog, .. Seems like you guys are dying x_x ?
Amen!
I use linux, so sometimes I forget about people viewing sites I make in IE.
I run to a computer with IE5 6 or 7 only to find that some positioning is off by three pixels or that the really cool transparent pngs I made are being mutilated by the legacy of the monkeys that programmed IE 6.
To be honest some time I want to throw a browser based redirect into all my sites and f the user is on IE they will get a nice message about how IE is like a vat of pis polluting the Internet with hacked css just to fix IE bugs.
sorry I’m ranting…but I know you agree
thanks,
-Austin
haha, I support your decision! Because of IE6 I couldn’t make a site with transparent png’s.
cool computer backgroundsInternet Explorer 6 and the Transparent PNG!
I enjoy reading the post so much! Especially that i have same problem and went through same tricks with java and php fixes but without any success. Site i’m doing is based on quickcms, need positioning and use repeating images for the bg.
I would love to be able to do what u did and say ‘upgrade ur stupid browser’ but if u doing site for a client who of course will want all potential users to be able to see the site in its full glory, he wont understand my reasoning. So i can only change the site design or… not sure yet…
Why worry, design away, those that can see it, will, and those that can’t, won’t. It may push a few people into upgrading. (can’t understand why they don’t, they are all free afterall)