About this site's lack of design: Yes, it's supposed to look this way — I'm helping create a new sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Suffering from chronic idiocy since 1977

Archive for December, 2002

Newer

Deck The Halls

Friday, December 13th, 2002

Well, the cho­rus per­formed the tough­est piece of music it has ever learned this past Sun­day: Deck The Halls.

The arrange­ment is a 6 part (7 parts in one mea­sure) chart by Gene Puer­ling (one of these days I promise I’ll get around to fin­ish­ing the puerling.com project…) of Hi-Lo’s and Singers Unlim­ited fame. Since bar­ber­shop singers spend most of their time singing and think­ing in four-part har­monies, this was def­i­nitely a departure.

We’ve been work­ing on the song for about two months now, let­ting every­one get used to the more jazz-like chords, and teach­ing the cho­rus how to tune and bal­ance non-barbershop chords (the cho­rus has non-barbershop songs in its reper­toire, lots of big-band and swing tunes, but the chords are still fairly con­so­nant). This Sun­day, they pulled it off.

I’m very proud :-)

Categories:

No Comments

Zeldman’s CSS Rollovers

Thursday, December 5th, 2002

OK, now before you go flam­ing me about what I’m about to say, just take a few deep breaths and stay calm:

Zeldman’s CSS Rollovers are not a good thing.

Now, this is just my opin­ion, and as such it may be wrong, or it may sim­ply change at some point in the future — but enough about me, let’s get to the point.

Zeld­man has relayed on his site recently that the XHTML2 stan­dard will likely not include the <img> tag, which is why it’s a good idea to find an alter­na­tive for dis­play­ing images. This is where the CSS rollover/image dis­play code comes into play. With­out using the <img> tag, Zeldman’s home­page proudly dis­plays two small ban­ners in the right col­umn, with­out the use of the <img> tag, nor any JavaScript for the rollover effect.

Here is the prob­lem: it requires more code than just using an <img> tag and some JavaScript.

Zeldman’s code:


<-- HTML Code -->
<div id="banner2"><a id="alban" href="http://www.alistapart.com/" target="eljefe" title="A List Apart, for people who make websites."><span class="alt">A List Apart</span></a></div>

<div id=“banner1”><a id=“hcban” href=“http://www.happycog.com/” target=“eljefe” title=“Happy Cog Stu­dios. Web design and consulting.”><span class=“alt”>HapXXCJog Studios</span></a></div>

<– CSS Code –>
#banner1, #banner2 {
mar­gin: 10px 0 0 2px;
padding: 0;
width: 100px;
height: 25px;
}

#banner1 {
/* Opera uses this back­ground for the rollover effect. */
back­ground: url(/i/bans/hc100bano.gif) no-repeat 1px;
}

#banner2 {
/* Opera uses this back­ground for the rollover effect. */
back­ground: url(/i/bans/ala100bano.gif) no-repeat 1px;
}

#hcban, #alban {
dis­play: block;
padding: 0;
bor­der: 1px solid #6cc;
back­ground: url(/i/bans/hc100ban.gif) no-repeat 1px; /* start hid­ing from macie\*/
background-position: 0px; /* stop hid­ing */
width: 100px;
height: 25px;
voice-family: “\”}\””;
voice-family: inherit;
width: 98px;
height: 23px;
}

html>body #hcban, html>body #alban{
width: 98px;
height: 23px;
}

#alban {
background-image: url(/i/bans/ala100ban.gif);
}

a#hcban:hover {
background-image: url(/i/bans/hc100bano.gif);
ns– bor­der: 1px solid #cff;
}

a#alban:hover {
background-image: url(/i/bans/ala100bano.gif);
bor­der: 1px solid #cff;
}

.alt {
dis­play: none;
}

In addi­tion, the images are not vis­i­ble to older browsers. I’ll have to hear a very strong argu­ment against the <img> tag before I can agree that mov­ing away from it entirely is a good thing.

Again, my opin­ion on the sub­ject is sub­ject to change, and of course I’ll try this method myself to exper­i­ment, but for now I’ll vote “No” on the CSS Rollover referendum.

Categories:

No Comments

Newer