Welcome to the ‘companion document’ to “Cascading Style Sheets Highlights.” This is the veritable commentary track to the main feature. More details come from the main feature itself and do take time to View Source.
table ElementsPlease see “Block Alignment: Flattening a Horizontal List” below.
table Block Formatted by CSSThe ability to format table elements without any inline declarations is the most fundamental and foremost example of separating data from presentation. table elements are meant to hold data.
To achieve the expected results when designing the CSS equivalent of the border attribute of the table element, the border-collapse:collapse; declaration is very important.
tableCentering a block with respect to another block is accomplished with different techniques, respecting the different browsers. In a “modern” Internet Explorer browser, the parent block should align any child block by declaring text-align:center; in the parent block. In Firefox, it is the child block that controls itself with margin-left:auto; and margin-right:auto;. The Firefox technique seems more attractive since there appears to be more flexibility in defining centering per child instead of the parent affecting all child elements. Also text alignment should have no relationship with block alignment.
div ElementsThis is a variation of “A Horizontal List without table Elements” aforementioned. Instead of the unordered list, we have a sequence of div elements with float:left; declared. The last div element is not floating and terminates the sequence with clear:both;—without this declaration the three floating div elements would hang down from their containing block, causing the containing block to collapse to a height of 1 pixel.
CSS Layout Techniques has more designs based on this one. This one shows how three child blocks can be centered with respect to a parent block. What is very non-intuitive about this approach starts with the fact that the ‘middle’ child block is not declared as the second child block. It is the last child block. Moreover, this last block contains its own child block—and this is the block that is visible as the ‘middle’ block.
See the source code of “Cascading Style Sheets Highlights” for more details.
The elegant design of http://www.alistapart.com/ features a menu at the top of relevant pages. The menu block is an unordered list with list item elements, li, set to float left. This is a semantically sound design choice but the reality of Microsoft Internet Explorer and, yes, even Firefox, requires some ‘serious’ CSS thought—especially when Flattening and aligning is required.
An examination of “Block Alignment: Flattening a Horizontal List” in the Songhay System Cascading Style Sheet Highlights reveals the details of this thought. Here is an unordered list about unordered lists:
ul block and declaring a border-top setting prevents unexpected spacing problems in Microsoft Internet Explorer 6.x. This one is extremely strange!ul block and declaring margin:0;padding:0; prevents unexpected spacing problems in Microsoft Internet Explorer 6.x (for margin) and Firefox 1.x (for padding).ul block needs a clear setting—usually clear:both; to prevent the last list item(s) floating left.display:inline; instead of float:left; can remove the bullets from the list. This inline style is better when this is not an issue (because there is no need to clear the floating li blocks making more modular and cleaner markup). I have to use the word ‘can’ because, somehow, over four years ago, Mark Newhouse avoids losing his bullets in “Practical CSS Layout Tips, Tricks, & Techniques.” I copy and paste his markup and lose the bullets.The Songhay System Cascading Style Sheet Highlights has only been tested in Windows. Any comments/screen shots from other platforms are welcome. And, by the way, I am not saying that alistapart.com is not ‘serious’—a huge portion of my CSS ideas come examining their source code. It’s just that their unordered list menu is in a ‘banner’ or header form—securely attached to the top of the window. This may be the best arrangement for most platforms and the Songhay System design remains limited.
This design strategy is straight forward, the use of overflow, and no remarkable issues are known here. Applying this design to pre elements help to display code samples without unappealing resizing.
| 5 Tips for Organizing Your CSS | Very intimate, mastery-oriented CSS advice from “a sixteen seventeen year old student living in New York” |
| CSS Layout Techniques | A definitive resource for div-based CSS design. |
| CSS Design: Creating Custom Corners & Borders | Pushes beyond the div-based “boxy-ness” of CSS design. |
| ExplodingBoy | A CSS-centric Blog with “free samples” like “14 Free Vertical CSS Menus” and “Free CSS Navigation Menu Designs.” |
| csszengarden.com | “A demonstration of what can be accomplished visually through CSS-based design.” |
| “Curing Float Drops and Wraps” | Zoe Gillenwater covers a common CSS implementation problem that is a cross-browser irritation. |