The Philosopher's Toolbox

Ha! Template version 5 now works in IE 5.5 Win. Removing the background color from the parent of the floated and absolutely positioned divs (by wrapping them in a div without background attributes) did the trick. Wow, is this ever a bizarre bug. What have we learned? (i) The parent of block level elements with attribute: float (left or right), or position: absolute cannot have a background color or image, otherwise the margins or parent and child are, um, rendered unpredictably in IE 5 win. (ii) either the parent and any floated child must have position relative, or neither may have it, otherwise the child is rendered behind the parent. (In which case the child will completely dissappear if the parent has a background color or image).

The dissappearing middle column problem is fixed in Template version 5 in IE 5 win. One problem left: improperly positioned left column. All thanks to 'Big John'.

The problems with template version 6.0 in IE5.5 win are fixed. The tip came from Big John's experiments with nested floats. John covers a variety of rendering bugs having to do with the unharmonic convergence of position attributes, float attributes, background attributes, and margin attributes. The analysis is good but the complexity makes it a little hard to follow. Here's a quick summary of the 'IE lost left margin with right float bug' (as I understand it): (i) If a block level parent with width and margins is assigned position: static or position: relative, it must be given a width, or it and its child will lose their left margin. If it is assigned position: absolute everything is ok. (ii) If a block level parent which has a background color or image contains a div with float: right, the parent (i.e. the div with the background), and the child (i.e. the floated div) lose their left margins. (iii) Similarly, if an element with position: absolute is placed within a block level parent that has a background color or image, it will kill the left attribute in the child. To avoid the bug: the parent of the floated element should have no margins (or perhaps no background color or image - he doesn't mention this option); Also: (iv) If the parent of a floated element has a background, then either the parent and the floated child must be given position: relative, or else neither should have it. Otherwise IE will put the floated child element behind the background of its parent element. (This is the bug that killed the first shot at template version 6 in IE5.5. It was solved by removing position: relative from the parent of the floated divs, so that neither the parent nor the child would have position: relative). Exciting, no?

Template Verions 5 and 6 both work great in IE5.1 Mac, Mozilla 1.1 Mac, and Netscape 6.0 Win. But some very wonky browswer bugs in IE5.5 Win are toasting both designs. Diagnosis continues thanks to the forensic work of 'Big John' and friends.

Template design continues, but with a shift in focus. Rather than begin by attempting to reproduce the original design with structural xhtml and css, and then assessing the impact on accessibility, I've begun by asking "what is the best structure from the viewpoing of logic and accessibility" and then assessed the implications for visual formatting. Conclusion: The content should be divided into 'primary' and 'secondary'. The content in the middle column is the page's primary content. The content in the right column contains highlight, notes, call-outs, etc. It is secondary in importance, and should definitely come after the primary content in the source, and in an unstyled page. The navigation elements can be divided into: site navigation, section navigation, and subsection navigation. Site navigation should always come at the top of the page, section and subsection navigation could (reasonably) come before the primary content, or after the secondary content, in the source and on the unstyled page. Template versions 5 and 6 are derived from these general guidelines. Version 5 uses absolute positioning to place the subsection navigation after the secondary content. Verion 6 uses floats to place the subsection navigation after the section navigation, but before the primary content.