IBNeko's Journal-Nyo~!

I was looking at http://orderedlist.com/, trying to see how the site was put together. There's an interesting trick: his/her menu bar is set up in a rather interesting way, in the same way yahoo (and some other sites) load up one entire sheet of mini icons, then show the correct one as required.

It puzzled me at first, because it wasn't text since you couldn't select the letters, and it didn't act like an image (you couldn't drag the image elsewhere).

Here's his nav bar:
http://orderedlist.com/images/nav.gif

And here's the relevant code:

#header ul {width:544px; height:30px; top:35px; right:0; list-style-type:none; background:url(../images/nav.gif) no-repeat; position:absolute;}
#header li {float:left;}
#header ul a {position:absolute; height:30px; top:0; text-indent:-9999px; overflow:hidden; background:url(../images/nav.gif) no-repeat top left;}
#header #hom a {width:53px; left:0; background-position:0 0;}
#header #art a {width:73px; left:53px; background-position:-53px 0;}
#header #por a {width:87px; left:126px; background-position:-126px 0;}
...
#header #hom a:hover {background-position:0 -30px;}
#header #art a:hover {background-position:-53px -30px;}
#header #por a:hover {background-position:-126px -30px;}
...
#body_hom #header #hom a {background-position:0 -60px;}
#body_art #header #art a {background-position:-53px -60px;}
#body_por #header #por a {background-position:-126px -60px;}
...


So essentially, when you hover over it, it'll change the background position to a -30px, which would load the "hilighted" words. Spiffy.

Well, so it's possible. Here's the example:
http://www.keithjbrown.co.uk/vworks/design/examples/css_4.shtml
Original page (source) is http://www.keithjbrown.co.uk/vworks/design/design_2.shtml, where he shows how to translate a page from tables to CSS.

However, I had to go a further step to add a variable min-height, based off of the upcoming events box... if there were more events, we add more to the min-height. Less events, less min-height.

Now the annoying thing is, now my page renders completely differently on every single browser. Close enough to what I want for most, but the variations are quite.. iffy. I think the issue here is the fact that I used the 'em' value, instead of pixels, as I had been doing. Why? Because min-height would be pointless if someone changed the size of the font, which you can easily do on Safari, and that breaks it like a little girl breaking her doll by dropping it off a truck on the beltway.

...Granted, even with using 'em' instead of 'px', increasing/decreasing the size more than once will break the page. Or at least make it look ugly.

So maybe I'll stick with pixels.

Also, another funky thing: Safari adds random spacing above and below my main chunk. I can't figure out why. It's caused by the use of 'p' tags, but I need p tags! Having no 'p' tags = de ugly. It doesn't happen in other browsers, so I don't see why it should be happening in Safari. WTFmuch?

--

Yeah, OmniWeb doesn't understand min-height at all.

Opera has left-side-bar displaying issues: notably, the repeating background arrow doesn't repeat, and the entire thing is offset to the left by 8 or so pixels.

....

You know, maybe I should just give up and go back to tables. They're ugly, codewise, but they seem to work. Very well, actually.

You know, I think I'll go to bed. And we'll see from there. XP I hate scrapping work, and making the past, oh, several days worthless, but... since tables work so much better (it renders the same way, more or less in just about every single browser... :P fuck that, ne?)