Friday, January 07, 2005

HS Bio Textbook Report

The document footer was causing me some grief in Firefox by expanding beyond it's specified 100% width CSS declaration. As suspected, it had to do with the W3C box model and how width is defined. (A box width is applied to the content portion of the box; padding, border, and margin are added on top of that.

Luckily there is a work-around where you can define the box model to apply the width on the border. Firefox currently uses a proprietary CSS property (.moz-box-sizing), but there is one defined in CSS3 (box-sizing). By setting the value to "border-box" the width acts more like I expect it to.

Thanks QuirksMode!

(I guess I should note that margins can still have deliterious effects on the effective width of an element. Something to keep in mind with future development.)