The superfluous is very necessaryVoltaire
1
1
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]