John Gallant, also known as CSS Junkie or Big John, has devoted a large part of his career to finding and documenting bugs that occur with CSS (cascading style sheets) and also with jquery and java script in combination with CSS. John was my guest on Blog Talk Radio. His site, www.positioniseverything.net, affectionately referred to as PIE, is where you will find pretty much everything that can go wrong with your CSS when your web page is viewed in Internet Explorer (IE). Before we get into some of the more common bug issues that plague web designers, I asked John why IE is such a problem. It seems that when Microsoft first implemented IE, they had some ideas about how things should be done. It resulted in pages looking ‘a little different’ in IE than they did in other browsers. Some people, according to John, say that Microsoft did it on purpose so that their pages would look better in IE than they did in other browsers and that it was more of a political thing.
I asked John about the most common problems most designers encounter and he was able to clarify some of the most baffling problems you will see when you test your site in IE, particularly in IE6.
One of those problems was the ‘expanding box problem’, where a child element is able to be larger than the parent in all other browsers, but not in IE6. With text, this problem can be overcome by using the word wrap property invented by Microsoft. This will chop off long unbroken words or URLs but it doesn’t help with images. A common cause of the expanding box problem is when designers put a child element inside a parent element and give the child element 100% width, then start adding padding, so that the parent element gets bigger to accommodate the child. In other browsers the child is allowed to flow beyond the boundaries of the parent, according to specifications (http://www.w3.org/TR/CSS21/). In many cases it is impossible to see the problem visually. Not so in IE6. In IE6 it just appears that your layout no longer fits together. For the most part, John says, simply being aware of the potential problem and not allowing it to occur is the best solution for this issue.
Stay tuned here for some more tips about designing pages that work no matter what browser you are viewing them in.
You can reach John via his website at www.positioniseverything.net, at cssjunkie on Skype.