blob: c2fbb18776c5a6eeb77c37b88dba4787a44a2303 (
plain)
1
|
Continuing with our CSS theme for the tutorial of day, today we're featuring a tutorial on positioning. The best tutorial I'm aware of for explaining how element positioning works in CSS can be [found][1] over at BrainJar (there's also a French [translation][2] available)
Perhaps the most difficult thing to understand in CSS is the "box model." When people complain about CSS and cross browser incompatibility, the box model is responsible for 90 percent of the problems.
While BrainJar's tutorial covers many aspects of CSS position elements, it stands out for its dead simple explanation of the box model. From the tutorial: "For display purposes, every element in a document is considered to be a rectangular box which has a content area surrounded by padding, a border and margins."
How those spacial elements are rendered varies somewhat by browser, but Internet Explorer is the main culprit here since it fails to comply with the box model defined in the W3C's specs.
The box model is what requires the most hacks when trying to get cross-browser perfection from your style sheets, but fear not the hacks are fairly minor and generally don't mean all that much extra work.
And for the record, lest anyone think I'm Microsoft bashing, the problem with IE is not so much that it gets the box model wrong, but that it renders it differently than the W3C spec.
The way IE renders margin and padding on box elements actually makes sense once you understand it and is even occasionally preferable to the specs definition. But the fact remains, it doesn't adhere to the standards set forth by the W3C, which nearly every other browser uses.
As always, if you know of other tutorials, post them in the comments below.
[1]: http://www.brainjar.com/css/positioning/default.asp "CSS Positioning Explained"
[2]: http://www.aidejavascript.com/article93.html "positionnement CSS"
|
