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!