Welcome to tightCSS.com. This site is all about web design with Cascading Style Sheets. The site's goal is to provide a one stop shop for all the key info needed to build CSS-based websites with clean, standards-compliant code, while minimizing the time spent dealing with browser incompatibilities. The site will be populated with lots of sample code, tutorials, and other tips for the web developer, whether you're a rookie trying your first site, or an old pro converting a website from table-based layout into CSS.
Jan 22, 2010 update: the previously identified bug that could be exploited to send different styles to Safari/Chrome has been fixed, as could have been expected... although the bug existed for about four years. Clicking the link above will take you to a different option for sending different CSS to Safari and Chrome.
Demonstrates how IE inconsistently calculates percentage based widths, causing layout havoc.
Demonstrating the effects of margins, padding, and alignment on horizontal lists with and without images. This demo was originally created to demonstrate a bug in Firefox up to version 3, in which images in a <li> box could extend outside the containing element in Firefox. The bug was resolved in version 3.5. See this page for screenshots. I am keeping the demo on the site because I think it has some value demonstrating the nuances of controlling list spacing even though the Firefox bug has been fixed.
New Layout Example
I just added a variation on the "sticky footer" theme. Nothing earth shaking, just a simple way to have a footer always visible at the bottom of the viewport (as opposed to my other sticky footers, that always have gone to either the bottom of the screen or the bottom of the content, whichever is lower. Kudos to Georg over at http://www.gunlaug.no/contents/wd_additions_15.html who's expression I used to make IE6 emulate position:fixed.
Absolute and Relative Positioning
Probably the single most important concept to get straight in your head before trying to use CSS is the difference between absolute and relative positioning. Rather than a lengthy explanation, I have put together a demo to illustrate some of the key points.
Centering Horizontal Drop Down Menus With Variable Width
A lot of people said it couldn't be done: building a dropdown menu with variable widths, and center it on the page. But after combing the web I found two different centering techniques that had been used with single-level menus, and after some work I was able to get the same basic concepts to work with drop-downs. Here are three examples: