<alt>descriptive text goes here</alt>

CSS Based Design is not Div Based Design

The title is a quote from Molly Holzschlag from her CSS for Developers presentation at Rich Web Experience 2008 in Washington DC. She was asking the group who still uses tables for layout and one person said they were in the process of changing everything to divs. Molly, seeming a tiny bit frustrated from hearing this to many times, then made the proclamation that “css based design is not div based design”. I clapped, no one else did. Read more…

What happened to the menu tag?

We all try to write our markup to be as semantic as possible. We use proper heading tags, paragraph tags, strong instead of b, em instead of i, and tables only for tabular data. Yet when it comes to our sites “navigation”, we use an unordered list. Read more…

An issue and a fix

Firefox 2.0.0.8 breaks some of the layouts. It breaks on the 3 column versions that use negative margins that are the same size or bigger that the element it is on. It looks like there have been at least 3 bugs raised in the Mozilla bug tracker for this issue and it is being actively worked on. The main one is here: https://bugzilla.mozilla.org/show_bug.cgi?id=400406

One solution would be to inject dynamic content after the container using the :after pseudo-element

container:after{
    content: ".";
    height: 0;
    clear: both;
    visibility: hidden;
    display: block;
}

This seems to fix the issue but is not as clean. I have only done some quick tests with this and have not looked at it in Safari.

Update: I knew there was a name for this! It is called the clearfix method.

Liquid Spaced Out Columns

In the previous Space Out Columns post I promised to follow up with some info on liquid layouts, so here we go: Read more…

Spaced Out Columns

In the comments for my A List Apart article, Fredrik Frodlund mentioned he was “not sure it would work if you use blocks that have white space between them”. There actually was a demonstration of this in the three column example with the nested two column layout. I only quickly commented on it, so I thought I would expand on it here. Read more…