mumble
One guy's collection of rants, babble, and 6502.

2011-09-23

CSS and the art of engineering this weblog
logo

CSS is incredibly complicated. If I was an unscrupulous bastard, I'd just use <table> formatting and pretend it's 1995. (It can be inferred from the mere look of this page that its author is stuck in 1995, but that's a different post.) Why is this?

Well, I'll tell you why. Just look at the page source for anything generated by my weblog software of choice, and you can see some of my frustration. Whereas I could just wrap the whole steaming pile of turd in a table and call it a day before, with CSS, I not only can't do that, but I have special, evil, unclear rules I must figure out and abide by.

First is the concept of CSS in conjunction with HTML, namely <div>. Imagine this block-level element with CSS as the CSS equivalent of <p> (which itself is another block-level element). Depending on which CSS tutorial you use, they tell you that these things stack underneath each other, take up 100% of the width of the page, and insert line breaks between each other.

How I wish that were true all the time.

In reality, if you use float: to float a div anywhere, they stack up right next to each other. REMEMBER this. If you want floating divs and also want them to "press return," you MUST use width:100%; or else you'll be swearing like John McEnroe at Stockholm in 1984.

Also remember the difference between a block-level element and an element that is inline. The icon on this post? I had to make it inline because otherwise I would have no way to make the divs line up properly. (What, was I going to guess how wide my text was beside the icon?) So I made it inline, and the worst that happens is the text flows around my icon. Fine with me.

Christ... and that's just basic block-level elements! It took me another chunk of forever to get the heading to properly display without this stupid gap between the lines. My only crime was that I was using a different weight and size of font.

This is why lazy people use images, and <table>, and javascript, and all sorts of other crap as hacks. (Disclosure: the date in the footer is the result of a javascript program.)

In conclusion, to all you out there who think web developers don't do real development, I challenge you to write a web page using modern web technologies (the current HTML and CSS will be fine) and have it work properly in the 5 major web browsers. Extra credit if you keep your sanity and hair.

( link )

I got yer can Home