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

Design, random musings, and the Web. Since 1977

Archive for December, 2002

Newer

Deck The Halls

Friday, December 13th, 2002

Well, the chorus performed the toughest piece of music it has ever learned this past Sunday: Deck The Halls.

The arrangement is a 6 part (7 parts in one measure) chart by Gene Puerling (one of these days I promise I’ll get around to finishing the puerling.com project…) of Hi-Lo’s and Singers Unlimited fame. Since barbershop singers spend most of their time singing and thinking in four-part harmonies, this was definitely a departure.

We’ve been working on the song for about two months now, letting everyone get used to the more jazz-like chords, and teaching the chorus how to tune and balance non-barbershop chords (the chorus has non-barbershop songs in its repertoire, lots of big-band and swing tunes, but the chords are still fairly consonant). This Sunday, they pulled it off.

I’m very proud :-)

Categories:

No Comments

Zeldman’s CSS Rollovers

Thursday, December 5th, 2002

OK, now before you go flaming 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 opinion, and as such it may be wrong, or it may simply change at some point in the future — but enough about me, let’s get to the point.

Zeldman has relayed on his site recently that the XHTML2 standard will likely not include the <img> tag, which is why it’s a good idea to find an alternative for displaying images. This is where the CSS rollover/image display code comes into play. Without using the <img> tag, Zeldman’s homepage proudly displays two small banners in the right column, without the use of the <img> tag, nor any JavaScript for the rollover effect.

Here is the problem: 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 Studios. Web design and consulting."><span class="alt">HapXXCJog Studios</span></a></div>

<-- CSS Code -->
#banner1, #banner2 {
margin: 10px 0 0 2px;
padding: 0;
width: 100px;
height: 25px;
}

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

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

#hcban, #alban {
display: block;
padding: 0;
border: 1px solid #6cc;
background: url(/i/bans/hc100ban.gif) no-repeat 1px; /* start hiding from macie\*/
background-position: 0px; /* stop hiding */
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- border: 1px solid #cff;
}

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

.alt {
display: none;
}

In addition, the images are not visible to older browsers. I’ll have to hear a very strong argument against the <img> tag before I can agree that moving away from it entirely is a good thing.

Again, my opinion on the subject is subject to change, and of course I’ll try this method myself to experiment, but for now I’ll vote “No” on the CSS Rollover referendum.

Categories:

No Comments

Newer