SXSWi: CSS Problem Solving

This bound-to-be-popular panel is in one of the bigger rooms. The panel is Tiffany B. Brown, Ethan Marcotte, Christopher Schmitt, Dave Shea and Charles Wyke-Smith.

The premise is to expand the Q and A to be the entire program rather than just a bit at the end. They had asked for questions in a survey posted before the conference. The top problems from the survey were browser compatibility and page layout and/or columns.

There were hack management tips from Tiffany. She explained some basics about inheritance, specificity and the cascade before she got into hack management. It really reminds me of the way I explained it in my book. (Wonder if she’s read my book?) She used an inverted pyramid model to talk about hack management. She suggested putting hacks in a separate stylesheet and make that the last stylesheet requested by the browser.

Ethan talked about layout strategies. He demo’ed a few layouts using absolute positioning. He talked about positioning context by positioning an element and then using absolute positioning for the elements within it. This is more about micro-positioning rather than page level layout. This is the type of positioning I described in the tip “Three steps to a two column layout” that I posted a few days ago.

Then he talked about floats and their potential to “mess with you.” Then he described how to use abosolute positioning and floats together.

Charles suggested that you start a layout by thinking about your content instead of thinking about the design.He suggests you correctly and accurately markup your content before you think about styling. Get away from presentation driven idea and think about the underlying structure. I wrote an article posted at the Wise-Women site on this very idea! He mentioned the idea that setting the overflow on floated elements to hidden as a good tip.

Dave’s presentation began with the information that IE7 looks like it is going to support a lot more of the CSS rules than in the past. He showed how to use the :after pseudo selector to generate content. He explained how to make it work in current versions of IE using display: inline-block. He talked about vertical aligning material in a div with CSS, which is a problem area in CSS. He wrapped a div set to display: table and the item in the div is set to display: table-cell. Of course, this doesn’t work in IE. You can see a hacked way to make it work in IE in the online presentation. Last he talked about the margin collapsing problem in Firefox.

Photos at Flickr

Leave a Reply