Tinker tinker little star...

Yes, tinker tinker. As you can see, we've been doing a bit of a facelift to the site around here. Not much really in the ways of design, but blogs are blogs in the end. But of course I have to spill the technical beans somewhere, so I'll do it here.

Originally, the polka-dotted template we used had a navigational bar on the left. All fine and dandy, but well, you can't just keep on adding things without it becoming excessively long and tiring to scroll through. So sis over there thought about adding a navbar to the right, with other assorted stuff like the chatterbox and the list.

Doing this the CSS way (that is, with floating elements instead of tables) was instructing, and certainly I think I can do a few more tricks now with CSS than before, but geez. I just hate IE and all its quirks, bugs and non-standard behaviour.

Doing stuff for Firefox is quite simple: the left navbar is a div with 'float:left' as a CSS attribute, the right one has 'float: right', and both are 20% as wide as the viewport. Then the main section is twice as wide, and the two navbars have 5% margins to the sides.

You just have to be careful and add 'margin: 0 auto' to the main section so it'll center properly. And that's it. The heading banner uses 'clear: both' so it stays out of trouble. And that's it. Nothing else, right?

Wrong. Apparently IE's CSS is broken in some aspects. According to the CSS standard, any floating element should just ignore the 'display' attribute: Firefox does it, IE doesn't. 'display:inline' to the floating elements and it's fine though.

Oh yes, and IE really _hates_ auto margins. I ended up specifying them myself. Also, the 'width: 40%' part for the main section worked funny in IE, so the margins acted their part as well (after all, 30% margin on both sides equals to 40% width, hm?).

Saying it like this sounds easy, but geez, finding the little bugs and workarounds was annoying. Also, Blogger's latest update broke our floating elements as well. Glad they added an option to take rid of the problem. In the worst case, I guess that some 'div { clear: none !important }' kludge could've work, but it'd have been so ugly.

And while we were at it, we changed around the colors. I actually did take my time to make the polka-dot background work fine with the percentages and all, though. Sis should've told me earlier. But oh yes, my solution would only work in Firefox.

The 'background-position' attribute allows you to shift around the upper-corner of the image. That way, you can sort of fake PNG-like transparency a little. Have a normal intensity background and a dimmed version. If you're careful and do it right, you'll be able to have the dimmed background in the navbars and main section fit the main background, just like the Blogger guys did it.

Of course, this only works in all modern browsers if you use fixed sizes everywhere, which is what they did. Actually, the site's contents' width was limited to 900 pixels, and everything was calculated from then on. But, I wanted to use percentages. But it turned out a little more complicated than I expected.

Why? 'background-position' works fine shifting around absolute lengths: it just moves it around as much as you want and that's it. But with percentages, they're calculated according to the padding box. And in a navbar, that's the navbar itself, NOT the viewport, which the margins are calculated in regards to. Thankfully, you can change this by setting the background to a fixed position, and THEN percentages work fine.

But in the end, percentages weren't even necessary. It was actually quite easy. Something like this:

body { background: #fff url('normalversion.jpg') 0 0 fixed; }
#main, .sidebar { background: #fff url('dimmedversion.jpg') 0 0 fixed; }

If you look at the code, it's easy to understand: both the dimmed and the normal version are fixed in the same position, it just happens that the dimmed version only shows up in the main section and the sidebars. So it fits just fine.

Bu~t, and there had to be one: once again, IE messes up and fixed backgrounds are fixed there according to the ELEMENT they're in, not the screen (as they should per the CSS standard). At this point, one can't help but think, "if some IE guy has a problem, just go and install Firefox for all I care". Is it REALLY so bad to implement an open standard properly?

Maa, in the end we just ditched the background, so it's all fine now. Hope you like the new look!