Copyright © 2012 Johan Arensman, 
.
April 29 2008
At my job I spent a lot of time fixing stylebugs made by myself or a collegue. But I've quit this job and moved on to another company. I actually wanted to leave something they could follow when they had one of those nasty IE6 bugs or just couldn't figure out why there was that weird open space between two elements.
I'm thinking out loud now I don't have a magic solution yet or some 5 step plan to follow and everything will be better. But I really think such a plan is possible.
What do I do when I encounter a problem? Well I know allmost all of them because I've spent days fixing them and trying to get to the source of the problems. PositionIsEverything.net (PIE) has helped me identify a lot of bugs or atleast helped me to give them a name. According to PIE
bugs can be categorized by browser which I think is pretty good however PIE then simply displays a large list of bugs.
Actually no, like I said before I'm thinking out loud but lemme try something.
What kind of elements are there? Boxes or blocks and inline elements right? So we could seperate the list in 2 types of bugs block level and inline elements. The disadvantange of this approach is that sometimes it's unclear if the source of the problem is a block or inline element.
As I'm checking out the list of bugs on the explorer page of PIE I can't help noticing that 4 out of 18 of the bugs are fixed using a term called 'hasLayout' or 'Holly Hack'. They are fixed by giving some element a layout property making it behave as it 'should'.
So what are the characteristics of these 14 bugs that are fixed by Holly? As far I can tell it's Layout all the bugs that screw up boxes, make them float incorrectly or push them away with bad margins are usually fixed with the so called Holly Hack wich applies a 1% height to the element. A better fix is sometimes giving the element a zoom property of 1 so you don't have to use height.
So we've just put 77.7% of all IE bugs on 1 fix. If the first batch of bugs were caused by layout, the rest should be in the inline area right? Well not all, because the doubled float bug in IE6 is fixed using display: inline instead, making it behave like display: inline-block according to On having layout. So there's a layout bug not fixed by giving it height and the same goes for "Floats, Margins and IE" which is also fixed by a display: inline property but in my opinion describes the same bug as the doubled float bug but in more detail.
So the only bugs left are the "Missing First Letter Bug", which only lives in IE5.5, and the "Duplicate Characters Bug" of IE6. Well I don't care a rats ass about IE5.5 and when I bug occurs which needs to be fixed for IE5.5 a conditional stylesheet should fix it. The duplicate characters bug occurs only when there are comments between 2 floating boxes. I don't want to take the easy way out but people..... just remove the comments then will ya?
So it seems that all mentional IE bugs are fixed by giving it a layout. Saved you a trip to the big PIE list? But then the title of this post is "How to fix a style problem".
If you get a piece of code that cannot be changed because of deadline issues or simply can't be altered for any reason you should try fixing it using either the layout fix or changing the display.
If you can change the code try cleaning it up. Try using less floats or clearing up your CSS by removing stuff like line-height on all elements or margins on elements that don't really need them. Padding is a much more bug free way to create a spacing to if you can use padding.
Furthermore a lot of bugs are caused by too many elements wrapping eachother. And if that isn't really causing it, it is making the bug harder to track down because of all the code blurring your view.
Are you kidding me? So fare IE is the only browser that doesn't fix it's flaws. Other browsers such as FireFox and Opera fixed most bugs in the latest versions. And really, why care about people that keep ignoring the 'Update me!' messages? Old browsers can be safely kept in the past except for IE6 which is still used on (too) many machines.
I hope I've cleared some of the mess for you on searching for a solution. If not, good luck!
Feel free to add your comment to the discussion.
Your post will be validated first because of the huge amounts of spam posts.
Copyright © 2012 Johan Arensman, .
January 11 2010 17:34
QFDaniel
Actually,good post. thx