Peter-Paul Koch has done it again, putting up a collection of CSS2 declaration and selector tests
. Also see Babette van Hardeveld's What's new in CSS2
Owen Briggs did a number on his CSS how-to site Box Lessons
This is a Problem & Workaround set for a series of css boxes going from a simple single box through 3 columns with a full width top box, all with variations.
This isn't a how-to for css layout, this is a how-to for dealing with the misinterpretations of our current browsers.
Worth checking out.
Just F everybody's I, I'm aware that this site does not validate yet. I'm still working on it, but believe me: compared to the last pile of code that sat at this location, this is an improvement. Accessibility is not perfect but if you'll kindly click here you'll see what this page looks like to persons using non-compliant browsers (click on the link again to set the page back to normal).
Also, I bumped up the font size from 10 to 11px, but I plan to set the default size back down to 10px as soon as I write a little code that will allow you the user to set it as you like.
And thanks to Derek and Matt for their help on this new look.
Comments previously posted here have been removed to protect the idiot who thought he got a real email complaining about the accessibility of his site.
Tantek Çelik's Web UI dev tools
are a joy. I can't get enough of the "toggle CSS" bookmarklet. Try it on this page for some real fun.
If you have visited before, you are probably noticing the redesign. If you are using a browser that does not support w3c standards, this site probably looks like hell for you. I will be working on improving the experience for you in the near future.
But for those of you with a shiny new browser like IE5+ or NS6, I hope you like what I've done with the place. I will be using this side of the page to continue all the tech and internet linking, and the other side of the page, over there --->, for writing of more general interest.
And now that I am all burned out from working on this for the last week, I'm going to drink a beer.
If you want to see a really nice looking site go here
IE6 correctly implements the box model! This page
detailing the CSS enhancements in Internet Explorer 6 makes it plain:
With Internet Explorer 6 Public Preview and later, when you use the !DOCTYPE declaration to switch on standards-compliant mode, the width and height properties specify the distance between the left and right edges and top and bottom edges of the bounding box, respectively. The border and padding belts are not included.