Free CSS Layout/Box Model Templates

CSS-driven layouts (no tables here). Free!

New Firefox Extension

DevBoi is another sweet Firefox extension that makes web developer's lives, well, more sane. It's a sidebar with quickie info about css implementations broken down by browser. I'll take one of those, thankyouverymuch.

And just as a shout out, for those of you who havent installed and played with the Web Developer Toolbar extension for Firefox by Chris Pederick, check that out here. It has just about every tool you could need to do your development work.

And just to be fair and not so proprietary, Internet Explorer 6 has a developer toolbar that I'll pretend to care about here that's pretty nifty too. This one has a ruler tool that the Mozilla one doesn't. So mmmmah.

CSS Shorthand

This is a cool article about condensing css style rules. In fact when I built this blog and dissected the css I found a style rule like this:

font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;

... and didnt know what the second number, the 1.4% was about. Turns out its shorthand for:

font-size: 78%;
line-height: 1.4em;
font-face: "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;

There's no official guide to shorthand; you kinda just know it or you don't is the way it goes right now. But this guy is putting an un-official one together for you consumption. Nice. Viva La Fast Code!

Simulating Min-Width for Internet Explorer

So of course all of you designers out there are busy peeing your pants because the Internet Explorer 7 team has announced its doing away with all your ugly little hacks; things like the now-deprecated * html selector just got the chopping block and now your layout is... hosed.

Fear Not!

One of the biggest problems with IE up to this point (as of IE6.x that is) is the lack of support for min-width... Supposedly Microsoft says that IE7 *will* be supporting min-width (and I'll beleive it when I see it), but what about IE6,5,5.5, etc... ???!

As of IE5 there have been these proprietary (go figure) IE things called "expressions" which you can embed directly in the css (and in most cases act kind of like javascript), which I had never heard of until recently. Do I live in a cave you say? NO! I've been at this a long time so I figured if I didnt know about them, you might not either. So here's what an expression simulating min-width would look like for a div named foo (sounds like a Johnny Cash song).

div#foo {
width: 99%;
width: expression( document.body.clientWidth < 801 ? "820px" : "99%" );
min-width: 820px;
}

You set the default width to 99%, and all the browsers catch that. Then IE picks up the width: expression statement, which basically in this case says that if the browser window is less than 801 pixels then the width of the div should be 820px, and if not, then 99%. None of the real (gecko mozilla) browsers see this line and instead obey the min-width rule beneath that sets the div to 820px.

Obviously this solution is not as robust as, say, real support for min-width in IE would be, but you might find it a handy workaround.