position: relative;

Top right corner: redkitecreative.com. I’m pretty happy about this!

I’ve used various tabs from Exploding-Boy on several occasions – they’re CSS-only, they look nice and have neat compact code. Kudos to Christopher Ware for putting these together.

For my new project, however, I need the tabs to drop down from the header div. After finding only the inverted sliding doors tabs from 456 Berea Street and not much else, I decided to try working with the Exploding-Boy tabs as a base.

So here in this example you can see the original tabs at the top and my inverted ones at the bottom. The CSS for both is in the example file – the only modifications I made were:

1. Changed the border on #tabs6a (my version) to the top rather than the bottom.

2. Changed the padding on #tabs6a ul so the tabs were moved up against the border in 1, above.

3. Took the two images (the left and right sides of the tabs) and flipped them vertically.

4. Changed the background position of #tabs6a a:hover from -42px to -15px.

5. Changed the background position of #tabs6a a:hover span from -42px to -15px.

Now it looks fine in IE7, FF, and Netscape.

One problem – Opera doesn’t seem to play well with image background-position; I’m using Opera 9.1 and I didn’t find anything specifically referring to this version, but I did for 7.5 and others. In any event, the background-position was a little off for Opera, so I had to have a workaround for that…

I don’t normally use hacks in my sites, but in this case I used the media queries hack for Opera – I would appreciate a better suggestion if anyone has one!

@media all and (min-width: 0px) {
#tabs6a a:hover {
background-position: 0% -17px;
}
#tabs6a a:hover span {
background-position: 100% -17px;
}
}

I’m happy with the way this is working now and hope this is of use to others too.

Today is the second day I’ve sat down and worked on the layout for my new business website. This is, without a doubt, the trickiest layout I’ve ever done. Which is a good thing…

Today I found this super-handy little hack (it’s a hack, I know, and ordinarily I wouldn’t use this but for now I’m going to because it works perfectly and I’m not sure about using the Microsoft expressions for IE lt 7…). This is from Dustin Diaz:

selector {
min-height:500px;
height:auto !important;
height:500px;
}

Sweet and simple. And it works with min-width too.