I had forgotten what a giant pain in the ass web design can be. That is, I had forgotten until last week, when I started compatibility testing a website I made for a friend who’s starting up a new business.
BP-Schulz is a one-woman company in Zurich specialising in hypnotherapy, counselling, relaxation and other things. I’ve been friends with Nastassja for about a year now so creating a web site (and a logo, and business cards) was a good way to help her get established.
We started with a graphics design session, and settled on a combination of her color scheme and my jigsaw puzzle motif. If I’d known how awkward that’d be I might have chosen something different. Making it look OK in Firefox wasn’t too hard, although I resorted to JavaScript absolute positioning to make the extrusions and holes in the pieces (ew). But in Internet Explorer I had to wrestle with the nightmare of “layout”.
It turns out that Internet Explorer has this imaginary concept of elements having “layout”. Layout isn’t something you’ll find in any spec – and for the longest time, not even in Microsofts documentation. Instead it’s an implementation detail of how Trident, the IE rendering engine, works. Elements that have layout are responsible for arranging their child subtree, elements that don’t are arranged by their nearest parent that does. Sounds simple? Unfortunately not.
Almost any element can be made to have layout, but only indirectly. There is no layout = true property you can set. Instead boxes get layout implicitly by setting width or height on them, or floating them, or being generated from a pre-set list of elements that always have layout. Whether an element has layout or not affects how it interacts with floats, how it positions, how it sizes itself and almost anything else you can imagine.
The only way to stay sane whilst developing non-trivial CSS on Internet Explorer is to achieve a zen-like insight into the mysteries of layout. Only once you understand the fundamental architecture of the browser itself can you create web pages that look (almost) how you wanted them to.
So do yourself a favor – go read the article I linked. Think about every sentence hard, as it’s easy to become lost in a maze of floats, boxes, containers and elements. Then go back and fix the websites you never got around to fixing.
