Thursday, August 31, 2006

Another CSS BMG

What started as a simple project, do a simple but attractive style sheet for a friend's new blog, is turning into a minor annoyance due to CSS, Blogger's CSS and IE. So y'all are going to read yet another CSS BMG (bitch, moan and gripe).

The first BMG is directed at Blogger. Blogger inserts two CSS files for the bar at the top of the blog, one for general layout and one of six for colors. Part of beauty of CSS is that styles cascade from defaults down to inline styles. In other words, if you set the font and color for all paragraph tags then all paragraph tags will have those settings; if you override the color on one via class or id attribute the font will still apply. Well, that screwed me in two ways. First, my settings for margin and padding for all DIV tags were not altered by Blogger's top bar causing layout disaster. If Blogger is going to go through the trouble of overriding every other tag they should ensure every tag they use has every single margin, padding, line-spacing, font, etc. attribute set to not rely upon browser defaults. Second, Blogger's CSS will alter the margins for DIV tags with the IDs of "wrap", "wrap1","wrap2","wrap3" and "wrapper". Here I am banging my head against the wall attempting to find out why I can't move a DIV down no matter what the padding setting on my DIV#wrap was.

The last BMG is directed at Microsoft and that blankety-blank unfixed piece of crap that is IE6. Most Blogger templates use a clear:both or clear:right on the footer DIV so the footer clears the rightmost DIV (usually "recent posts", links, etc.). If you have a DIV that clears inside of another DIV it ignores the margins of the containing DIV. The result in this case is that the content in the left margin gets set to the background color of the containing DIV. Nice. Firefox and Opera render the template without flaw. A Google search puked out about 659,000 hits on the topic of IE quirks with CSS, floats and clear. Using "clear:both" on any element other than a BR, after a "float:right", causes the left border of a higher-level container (in this case a DIV) to be lost in IE6Win. That did the trick.

What's really sad is the number of "hacks" out there to get a "standard" like CSS to display correctly in a browser. Microsoft is clearly the most flagrant violator but Mozilla, Firefox and Opera have and have had their quirks as well over the years. This is fine example of how the computer fails us. It's not like there aren't tests out there (for years now) to assist browser developers in implementing an adequate standard. I'm sure there is massive work to be done behind the scenes, work that probably isn't feasible if you have limited funds or another operating system to shove out the door. When I look back, though, at the man-hours and effort lost to software that does not work or requires "hacks" to get around, and multiply that times how many other nerds like me suffering with this as well, I can't help but feel a little bitter about computer programming. Users deserve better.

No comments: