TW Blog :: Entries for CSS Design

The Lost Child Hack

Also relates to 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]

FIR, Accepted Defeat!

Also relates to Web Standards and Accessibility

Ok, yet another FIR technique has been created by Levin Alexander to resolve the inherent problem for CSS enabled browsers with images disabled. While this solution does display the header in plain text when images are disabled, it falls foul of reintroducing a span element, which the techniques of Stuart Langridge and Seamus Leahy had tried to resolve. While this new approach makes nice use of the relative→absolute relationship between parent and child in CSS positioning, it fails with transparent PNG (or GIF) header graphics, and for any design with coloured background, transparency is a prerequisite to avoid visual discrepancy between the browser interpretation of the color and that defined in the image file.

Determined to resolve this, I tried changing visibility, third dimension placement (z-index) and container heights, but there is always going to be one scenario that breaks the hack. Since FIR and its many derivatives are just that, a hack, I have come to the conclusion that FIR by itself cannot succeed as an Accessibility tool. It does present an excellent method for separating design and content, implementing alternative graphics with each stylesheet, and fortifying the semantics of the XHTML document's markup. But once accessibility is contemplated, other methods must also be introduced to present each user with the same material. The obvious way to acheive this is to use a Stylesheet Switcher to offer a plain text version of the page. Here I am not talking about the plain text of 90's websites, where the content of the site must be completely duplicated in the appropriate format. With the tools of the DOM the same XHTML marked-up page can be used, and a simple alternative stylesheet created to display plain text for the entire site.

So the graphic design version of the site can implement a FIR technique to ensure the content does not contain superfluous code. For example a header would be just a header.

<h1 id="header">This is the page header</h1>

And the stylesheet would implement FIR to replace the text with the graphic. This can offer an accessible page to most users. For the neglected few, switching to the plain text style sheet presents the header as is (there are simply no FIR techniques declared). Hence, users browsing with CSS enabled browsers with images disabled can also access all the material. Everyone is happy!?

Well there is still the possibility of a user with CSS-enabled browser, no images and no Javascript! Then what? Fall back to server-side scripting perhaps, with a GET string appended to a URI in the Stylesheet Switcher anchor when it is loaded (using the noscript tag). Then the correct stylesheet for the pulled page can be set as default before the page is sent to the client.

Posted on Aug 18, 2003 at 19:00:46. [Comments for FIR, Accepted Defeat!- 0]