CSS Notes

Articles, notes, and tips on Cascading Style Sheets (CSS).  Typically stuff that I should be able to remember, but can't.

Clean, fluid, three-column layout for modern browsers.

Matthew Levine wrote this technique up for A List Apart on January 30, 2006.  The original article goes into much greater detail and is definitely worth reading.  This is just the shorthand information to jog my failing memory.

This technique works for all modern browsers (as of February 1, 2006).  Internet Explorer 5.5 and other, older browsers should just give up now.  There are also rumors that IE 7 won't work (when it's released), because it no longer supports the * nomenclature that enables the IE hack in the CSS.

The layout features three columns - two fixed-width sidebars for navigation, advertising, or a help panel and a fluid center for the main information.  Many articles and templates already exist to do this, but usually involve sacrificing one or more good design principles such as proper source order, full-width footers, or lean markup.

This technique works equally well for any unit of measure (e.g., em), not just px.

The following is stolen referenced verbatim from the article.

The required HTML is intuitive and elegant.

(For the sake of clarity in demonstrating this technique, we are intentionally using the non-semantic ids "center," "left," and "right." We recommend you use semantic ids in any application of this technique. —Ed.)

<div id="header"></div>
<div id="container">
    <div id="center" class="column"></div>
    <div id="left" class="column"></div>
    <div id="right" class="column"></div>
</div>
<div id="footer"></div>

That’s it. A single extra div to contain the columns is all that you need; this satisfies even my obsessive compulsive markup habits.

The stylesheet is almost as simple. Let’s say you want to have a left column with a fixed width of 200 pixels and a right column with a fixed width of 150 pixels. To simplify the comments, I’ll abbreviate the left, right, and center columns as LC, RC, and CC, respectively. The essential CSS is here:

body {
    min-width: 550px;      /* (2 x LC width) + RC width */
}
#container {
    padding-left: 200px;   /* LC width */
    padding-right: 150px;  /* RC width */
}
#container .column {
    position: relative;
    float: left;
}
#center {
    width: 100%;
}
#left {
    width: 200px;          /* LC width */
    right: 200px;          /* LC width */
    margin-left: -100%;
}
#right {
    width: 150px;          /* RC width */
    margin-right: -150px;  /* RC width */
}
#footer {
    clear: both;
}
/*** IE6 Fix ***/
* html #left {
    left: 150px;           /* RC width */
}

Simply replace the values with your desired dimensions and the grail is yours. The technique works in all modern browsers: Safari, Opera, Firefox, and (with the single-rule hack at the bottom) IE6. IE5.5 support would require at least a box-model hack, which is left as an exercise to the reader.

Take a look and marvel at the elegance.

List of CSS Tools from realsoftwaredevelopment.com

Again, a list of CSS tools.  Again, recreated here for reasons that probably aren't valid.  The original list was published 20 Oct 2006 on the Real World Software Development blog.

October 20, 2006

The Complete List of CSS Tools

There are so many great CSS Tools out there to use!  Please feel free to use this list as the most up to date list on the Internet.

User Interface

Accessibility Checkers

Formatters and Optimizers

Fonts

Forms

Layout

Galleries

Help Guides / Hacks / Learning Materials

  • SelectOracle
    Explains the structure of CSS- and HTML-documents. Enter semi-colon separated selectors or just paste in your existing rulesets into the "Direct Input" area, or provide the URL of a stylesheet or an HTML document with an embedded stylesheet in the "URL Input" area. English, Spanish, German and Bulgarian versions are available.
  • Tom Lee has a tutorial on Max-width in IE Using a CSS Expression. Word of caution: I hear using this method can be rather hairy, in some cases crashing the browser.
  • Future-proof your CSS with Conditional Comments from Bruce Lawson is a great comprehensive collection of CSS's that, when combined, addresses most of CSS issues with different browsers.
  • IE Word Wrap Doppelganger Bug — Sitepoint on how heading elements could leave a small trail of itself as it wraps to the next line in IE6.
  • Images, Tables, and Mysterious Gaps seems like something I should've known already about the behavior of inline elements in strict mode. But of course it took me an hour of agony before finally realizing the ultimate truth: I'm not that smart.
  • Easy CSS hacks for IE7 — Some CSS hacks that will work with IE7. Hey, you never know.
  • Web Browser CSS Support with updated listings for IE7, Firefox 1.5, and Opera 8.5.
  • snook.ca on the "+" CSS hack which you can use to target IE6 and IE7 only.
  • On having layout reveals some information and workarounds for IE's strange and proprietary 'rendering-concept': hasLayout — one of the major causes for headache when it comes to how IE decides to pain the boundaries of certain HTML elements:
    • "...A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.” John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs,” meaning that they can often be solved by applying a width or height. This leads to a question of why “layout” can change the rendering of and the relationships between elements. The question, albeit a good one, is hard to answer. In this article, the authors focus on some aspects of this complicated matter. For more thorough discussions and examples, please refer to the links provided."
  • Negative text-indent and underline — No matter how far on the left the real text is, the underline will be stretched all the way to the right in some PC browsers, namely the Firefox.
  • IE6 Multi Class Bug — Again, something that could've brought to my attention last week!
    • "...Internet Explorer fails to render backgrounds for elements that have both an ID and a class defined. For instance, #photos.background1 will display the corresponding background in IE6 for Windows, but once that has been defined, #photos.background2, #photos.background3, etc. will not be displayed."
  • Ten more CSS tricks you may not know — includes few IE bug fix techniques
  • The "Holly" Hack — taming IE/Win CSS display bug by assigning a dimensional value such as height:1%;
  • CSS tests — a great list of all the CSS gotcha's under one roof.
  • max-width in IE using VERY little known IE-only CSS "Dynamic properties"
  • List of @import hacks to hide CSS from different browsers.
  • Essentials of CSS Hacking For Internet Explorer — an excellent list of quick hints on safeguarding your CSS against IE.
  • Web browser standards support — Charts comparing IE 6, Firefox 1.0, and Opera 8.
  • Full CSS property browser compatibility chart
  • The perils of using XHTML properly — Potential pitfalls of declaring application/xhtml+xml MIME type.
  • IE Double Float Margin Bug.

Tips and Tricks

List of CSS Tools from Smashing Magazine

Smashing Magazine posted a list of CSS tools back on September 2, 2006.  I'm recreating the list here because of the way things tend to disappear.  Naturally, that won't help when the tools themselves start to disappear...

List of CSS Tools

September 2nd, 2006

Fonts

Forms

Layout

Formatters and Optimizers

List on Smashing Magazine maintained by Vitaly Friedman and Sven Lennartz. About.