CSS positioning, revisited
July 31, 2005
A comment by Prof. Chris Lawrence on my previous post on CSS positioning got me thinking of a couple of things. Here’s what he said:
CSS positioning gives me a massive headache. I used absolute positioning for the sidebar and floated the main body to the left (and fixed the width of it so it doesn’t flow into the sidebar). And I use percentage widths.
It seems to more-or-less work.
Not to malign his CSS skills, nor mine, but plenty of us really have a hard time getting the hang of the box model, especially when we are already in possession of a codebase that works. We know it works, we can use it, but we dont’ really understand it. It happens not just among web stylists but engineers, biologists, doctors… It isn’t so much a plague but it is important that understanding be arrived at, even if just for the sake of knowing how to do something from scratch.
One thing that I have grumbled about in the past that I only recently understood is the fact that CSS, on the surface, has no mathematical expressions built in. Superficially, we can’t have a CSS rule that says: {width: [take the width of the containing element minus a certain amount]}. Truth is, margins and padding—box model bugs notwithstanding—are the way we do CSS math.
On a different note, I have been contemplating about contributing a theme to the huge array of WordPress themes available, but my conversations with Podz have made me change my mind. Instead, in the coming days I will release a basic HTML page that uses the Shiva codebase along with notations for positioning, etc. It’s going to be ugly, but it will be something that you can download in a zip file and test on your local browser without having WordPress at all. The positioning rules I use are common usage anyway, but I guess it would be a better contribution, especially to those who actually want to understand how my shit works, than for me to give away a drop-in theme that could be replaced on a whim. I’d rather help someone come up with a design they like that would last them for as long as they want.
having spent hours this weekend trying to understand why margin-left: 35px; became margin: 35px; for IE. and why does width: 80%; work in IE but is ignored in firefox. how can anyone understand a system that is so fraught with variance? at least when i hand coded everything, i knew how my tables would render. CSS is a mess.
I agree that CSS on the “perfect CSS renderer,” which is something that doesn’t exist, is a great system, but browser developers really ignored the bugs that came with techonology for a really long time. I have no beef with having a layout table (three rows and a total of four cells) do the grunt work of my layout but to be honest I don’t know how to freaking start doing it.
I routinely test on a html page, just save my index.php as html and work with that. Admittedly, the layouts I make myself aren’t as elegant as the themes but they work for me. I can also mess up a theme pretty good too. I don’t do the really great stuff like those that wouldn’t even bother with a themes contest, the great few and we all know who they are.
I hate the cross-browser glitches in CSS especially when you get a site looking swanky in one browser and it goes to the dogs in the other.
This was my first time seeing your new layout, btw. I like the typography but I’m not sure about the graphics. It feels too much like … urk … a PowerPoint template.
The concentric circles are powerpoint-y? *sniffle* Actually with this layout—and I do like the layout—it leaves the banner to be easily changed on a whim should I feel like it. I wanna actually make one that’s a bit snowflakey but I don’t know where to start when it comes to making patterns.
Tables are dead. Long live tables!
And long live Hammy! Thanks for dropping by dewd. I’ll be looking out for the new I’ve Had Better; hope it comes out soon.