TW Blog :: Archives for December 2003

The Lost Child Hack

Relates to CSS Design and Exploder

Busy month!… Anyway, I made a startling discovery in my experience of CSS earlier today. For, as long as I have been using style sheets, I have always considered the use of the child selector (A>B), as a way to hide declarations from the Internet Exploder family. The Box Model Hack shows a typical use of this selector in the be nice to Opera paradigm. Well, since I started testing designs across the IE browsers using the XP browser set a number of complications have arisen from version 5.0 ignoring the height rule, and frustrating as it is I have not, until now, been able to resolve this.

Firstly let me briefly explain my reasoning for using height. I begin the development process by drawing up an XHTML document for the content of the page. I find doing this before even contemplating the design of the page helps reduce any design bias that might contravene the logical flow of the document. A typical example is the menu (or navigation bar). Web design and usability standards decree that in general the navigation should be placed either at the top of the page or to the left or right. This makes sense and is generally what a client or user expects. However, achieving this with pure CSS (that is without tables) has an immediate impact on the logical flow of the underlying content. To place the navigation at the top, or float it to the left, requires that the menu must precede the content of the page in the document tree. This can work, provided a skip menu link is provided for alternative user agents. But presenting copy first on the page has potential benefits for search engine placement. So I generally place the menu after the content.

Using the position:absolute declaration the menu container can be placed anywhere on the screen, be it in a relatively positioned parent or the document root. But if it is placed for example on the left hand side, a recurring CSS columnar complication arises - if the main body of the page is resized to a smaller font, potentially the menu will break the page design and spill off the bottom of the page. The simple way to avoid this is to use the height declaration to freeze the size of the page. Caution is required, since the browsers interpret the height element differently. In IE, content extending beyond the height of its parent container stretches the container, whereas Mozilla and Opera spill the content out of its parent. The following code avoids this:

#box2 {height:300px;min-height:300px;}
#box1>#box2 {height:auto;}

A minimum-height is read by Mozilla and Co., but then the container's actual height is reset to automatic so it can correctly stretch as needed. Meanwhile IE ignores the automatic height declaration because it does not understand the child selector. Or so I thought!!! I finally discovered that the reason all my perfectly structured and placed designs were breaking in IE 5.0 were because it was understanding the child selector and resetting the height to automatic. But this goes against everything I understood of CSS browser support. Surely the child selector is a feature of the advanced browsers and why on earth does it work in IE 5.0 but not more recent versions of the browser?

Following some testing it boils down to this. The child selector appears to only work in IE 5.0 when the parent and child are both id declarations. This is why it was causing me so much grief in the scenario described above where IDs are used to define the containers for page layout. An immediate advantage of this is yet another hack to resolve differences between IE 5.0 and IE 5.5. I have got quite used to using the version 5 family hack discussed previously complemented the mid pass filter to keep the hacks exclusive of the pure CSS file. Assuming the element and its parent have an id the hack can be simplified to:

child {name:value2;} parentID>childID {name:value1;}

The Lost Child Hack!

On a quick scrub of the web, I discovered that this also exists in another guise. Tom Clancy points out that the same thing occurs when a space is placed either side of the elements (IDs are not required): html > body. I have not had a chance to test this yet.

Posted on Dec 19, 2003 at 02:29:23. [Comments for The Lost Child Hack- 1]