This is the third blog in a series from my first interview on Blog Talk Radio with “CSS Junkie”, John Gallant.
The next problem that John addresses, takes us back to the early days of the internet where you may have an image on the page and text above or below it. That was not very pretty looking, so they said, “Why can’t the text flow up into this empty space next to the images?” So the ‘align’ attribute was invented and applied to elements to allow aligning left or right or center and to allow the text to flow around them.
The problem arose when text touched the edge of the image. It just did not look right. So the browser makers hard wired extra space between aligned elements. In the case of Microsoft, the amount of space was three pixels. Then, along came CSS and the ‘float’ property. The float acts in a similar fashion to align. So when IE6 came along, they did not completely get rid of the three pixel space. John explains that this ‘ghost’ of the three pixel margin that originated with align, kept reappearing all over the place, causing all kinds of damage, adding width to elements that designers had not allowed for. Just in case you want to look this up on John’s site at PIE you will want to do a search for the ‘three pixel text jog’.
I asked John if he could shed a little light on another topic, the difference between collapsing and escaping margins.
‘Collapsing margins’, as John describes it, is where you have two paragraphs, one above the other that touch each other. If the touching top and bottom edges each have margins, they collapse to the size of the larger margin.
‘Escaping margins’ is something different. Suppose you have two divs nested together and the inner one has a margin on the top and the outer one is just a plain div with no margins. The margin on the inner div will actually protrude right through the surrounding div and appear as if it were a margin on the outer box. It will appear as if there is no margin on the inner one. The margin on the inner box is escaping right outside the outer parent! What stops this from happening is to have a border or padding on the outer parent that will block it from getting out. As if that isn’t weird enough, with IE, if the outer box hasLayout on it then ‘magically’ it traps the inside margin on that child, regardless of whether there is a padding or a border on it. This is another reason why your layout can look different in IE than it does in other browsers.
John goes on to say that sometimes designers are determined to use some of today’s more advanced CSS styling that IE6 just cannot do anymore. He suggests ‘dumbing down’ IE6. To do this you take your CSS file and copy it into a ‘hacks’ file. Then you put it into a conditional comment as described earlier. Then you play with the hacks file until IE6 looks like something people can view without it being all shattered and broken. For instance, you can substitute absolute positioning for fixed positioning. If you have problem elements that will cause havoc, you can give them ‘display: none’, so that not only can you not see them, but they don’t even take up space anymore.
The same method used for dumbing down can be used for print style sheets. You simply make a copy and apply the media print attribute to your link. It only works when the visitor prints the page. In the print style sheet you can do things such as making all the text black and white. You can get rid of side columns by making them display: none or by changing the margins to make the page look nice when it gets printed.
You can reach John via his website at www.positioniseverything.net, at cssjunkie on Skype.