IE6 and the importance of getting your CSS right first time.
For many moons web designers and developers alike have been toiling with browser layout issues. IE6 is probably the most highly criticised amongst the web community, for its lack of support of richer ideas and emerging technologies. It has been a common grievance amongst web developers with browser compatibility and their handling of CSS layouts.
Top of the grievance list is a browser that refuses to die. IE6! However fast the world is moving and technologies are growing, the demise of IE6 is only a pipe dream to designers and developers. Is it too little too late to start caring about IE6 and CSS? Lets look at it another way, Is it too late to start doing things right?
The majority of layout issues and browser discrepancies come when things aren’t thought out properly. The easiest way to avoid these issues is to plan. We all know that the easiest way to fix IE6 problems is to throw in an IE6 stylesheet or some other kind of IE6 only CSS hack. OR is it? Prevention in any walk of life is surely better than cure.
Will fixing and hacking help you learn and progress into creating better CSS? The answer here lies solely on the developer’s willingness to learn. If a developer believes that the IE6 (or any other IE for that matter) stylesheet is the savior, then the answer, plain and simple is no! If the developer, once learning the fix, then discovers the errors of his ways, and amends his code, then the answer is clearly yes.
Where does the problem with IE6 really lie?
One of the biggest misconceptions with IE6 is that it is a bad browser and it renders code poorly. The truth is that it is a perfectly adequate but unforgiving browser which renders BAD code accordingly. Other browsers such as Firefox are far more forgiving and this is one of the reasons IE6 gets a bad name.
Why should we start now?
As designers and developers we should be thriving to improve our understanding of our chosen vocation. Conquering IE6 or the “Beast” as I have heard it called on many occasion, is a milestone in truly understanding CSS. Development time and testing time will be dramatically cut, which can only mean one thing. Amends and updates will become less painful (not necessarily pain free) and your colleagues will thank you when they come to work on your sites.
What can we do to improve.
Whether you’ve learnt it over and over, or only looked at it once, go back and have another good look and understand the box model. Most mistakes are made with margin, padding and floats when it comes to IE6. Work out the maths to the pixel, otherwise you will have issues, be it now or in the future, you will have them.
Understand margin and padding, use them correctly and use them consistently. Understand floats and the importance of clearing them. Always validate your CSS. Always validate your HTML. Invalid HTML is a huge contributor to layout issues in any browser. You can validate CSS and HTML respectively at the following addresses http://jigsaw.w3.org/css-validator/ and http://validator.w3.org.
In conclusion
IE6 is not the bad browser it is believed to be, we all just need to try to be better developers/designers. Better code can lead to faster and more productive development.
Further readings
http://www.w3.org/TR/CSS2/box.html
~Branny
Good first post Branny!
I think I get what you’re saying, I agree completely that we as front-end developers should know why something is 20 pixels wider than in other browsers and know how to stop that in the first place rather than offset the width in an IE stylesheet.
The things I and you moan about with IE6 should be is it’s lack of support for useful stuff such as “full” PNG transparency, certain CSS selectors (child, etc) and so on.
If you can achieve something in a way that IE likes without just jumping to the conditional css then we should, I certainly agree with that but the sad fact is that IE has issues that we just have to “cure” and I think what you’re getting at is that its all about managing those fixes and understanding their implications.
I personally believe we should separate the IE hacks and bug exploits into a separate stylesheet though. Just because height: 1% is valid doesn’t mean it should be there for all the other browsers to parse and other browsers that don’t have the “double floated margin bug” shouldn’t have to parse: display: inline on elements that don’t need it.
I’ve been guilty in the past of instantly saying, “yep must need hasLayout” and slapping: zoom:1 in their because its quick and a lot of the time gets the job done for that particular issue but you are correct in saying that we should learn what that fix is actually doing because it might have given rise to a new issue waiting to bite you under the right circumstances.
Validation of HTML is very important and I think using a validator on your css is good for debugging but again personally I don’t mind having invalid CSS so long as its only for proprietary tags such as zoom:1 or vendor pre-fixes for as yet un-standardised (but consistent) attributes such as “-moz-border-radius”, etc.
Good first post fella and nice to see you and the chaps showing off your skills on the new blog.
Cheers Paul,
Yes it was my point that people should understand better why IE6 is doing what it is doing. I totally agree that IE6 fails in so many ways, such as the png’s and selectors you mentioned.
There is so much bad press about IE6 and in some cases rightly so, but I think some developers/designers are taking that bad press and applying it without a thought for why. It seems people are blaming IE6 for everything wrong in it’s layout without looking at the real reasons. That was my point really.
Don’t get me wrong, I am not saying there is nothing wrong with IE6, I know it’s not perfect. I do beleive that it can and does restrict creativity, and in some cases create more work for us, I’m just saying let’s understand the problem before jumping the gun.