NELINET CSS Workshop: What I learned today

(1) About the box model: the "box model" in CSS basically indicates that all elements in a page can be seen as being in a "box" - and attributes of that box can be altered for modified appearance - for more on the box model, see the W3C page on the matter - http://www.w3.org/TR/REC-CSS2/box.html
So you see - if you look at this page, that the elements of the box are (starting with the center/core & working our way out):
- content
-- padding
--- border
---- margin
(2) About the box model problem & "hacks": well, it turns out that the Microsoft folks - when programming IE5 - interpreted the box model differently than other browsers' programmers. In non-IE5 browsers, when the box is set for a certain width, it = the content's width & you add on the padding width, border width, and margin width for the total space taken up by the box element. In IE5, the width set for a given div, for example, includes not only the content, but also the padding, border, and margin. So, in IE5 (and "quirks mode" of IE6 and IE7, but that's another story for another time) - you might have a 250px wide box, for example, including a padding of 10 px and border of 5px (meaning that the content itself was really only 220px wide, add the padding on both sides (left & right, each 10 px = 20 px) and the borders on both sides (left & right, each 5 px = 10 px). The same CSS, interpreted in Firefox or other Mozilla browsers, would instead be 280 px wide: the content would be 250px wide, then the padding on each side would add 10 px (total 20 px both sides), and the borders on each side would add 5 px (10 px total both sides). Anyhow, that materially changes how a page looks, from browser to browser, a big problem in the case of fixed-column layouts, etc.

So, how do you fix the issue? There are several means of dealing with the issue - called "box model hacks". Mostly, they rely on other IE5 interpretation idiosyncrasies. A fairly famous hack relies on use of the "voice-family:" option in your stylesheets (no, I have no idea what voice-family was intended for) - anyhow, to see this hack (and to see a visual rep of the box model issue), go to http://tantek.com/CSS/Examples/boxmodelhack.html

The one that NELINET instructor Ed Sperr recommended, however, was the invocation of the conditional (if IE5) statement to import in an IE5-specific stylesheet. Although this might sound kind of kludgy - like back in the day, when we used to run little scripts to detect the version of browser you were using then to offer up specially coded versions of our pages to respect the html & script interpretation oddities of different browsers - but it keeps your primary (proper box model-compliant - in other words, friendly to Mozilla & IE6+ browsers) stylesheet clean. (no need for that voice-family "\" and reset functions, as in the first hack I gave you the link to - the Tantek hack). As I think about it, I'm beginning to like this concept - the use of the conditional statement and the alternate stylesheet to deal with the issue.

Anyhow, one more thing I learned about the box model today was that there is the whole "quirks mode" problem, wherein IE6+ will actually revert to the same broken box model implementation as IE5 if you do not include a DOCTYPE declaration at the top of your HTML/XHTML page. So, if your box model's misbehaving in IE6 or 7, double-check to make certain that you've got your DTD in place.

A couple of other helpful notes I got from today's session:
(1) if you're trying to use CSS to style list items to approximate the look of a highlighted button in a menu (i.e., area highlighted when you mouse over the area where a link is featured), you must make sure that your code is set to block type display. If you do this, you will get the hover effect throughout the content's box region, rather than just on the text of the link. Did that make sense? I don't have much time as I have a few more posts to make, but I hope that this makes sense to you.
(2) when you use "absolute positioning", you are taking a div out of the normal flow of the content, so it's very easy for it to overlap (which is why it was set up to do so, but be aware of this behavior). When you use "relative positioning", the div is in the flow of the document - and is in position relative to the containing element (e.g., if no higher-level containing element, then it is in position relative to the view port / browser window). The divs will flow one after the other, if positioned relatively, generally speaking.
(3) floats: floating elements means that the elements will float as far right or left (pending float: left; or float: right; can use float: none; to ensure that nothing floats, of course, as well) as they can before they bump up against the previous element. So you can float multiple boxes in the same direction. You can have your div 1 float: left; and div 2 can also float left. There are some oddities with floats, however. Just be aware of this -you may need to specify the height of your containing element when using floats, or to use an empty spacer div to stretch the container, or to clear the floats. The floats are a little flaky - so just note this. The other option is to use the overflow: auto; declaration with your floated elements. If I understand it correctly...
(4) yes, you can use a specialized stylesheet to reformat your docs to be printed, automatically, in a more printer-friendly format - hide display of navigation bars that would be meaningless in a printout - change the ems or pxs to pts for the font-sizes; change the font-family from sans serif to serif. And so on... See A List Apart for more information on this topic...