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

Dan Rubin's SuperfluousBanter

Design, random musings, and the Web. Since 1977

Archive for December, 2002

SmartyText

Friday, December 20th, 2002

Daring Fireball Projects: SmartyPants is a really cool plugin for MovableType, the CMS that drives this site. The purpose of this plugin is to convert certain standard ASCII items — straight quotes for instance — into their typographically-correct HTML-encoded equivelents. It also works wonders on double dashes (converting them to proper em dashes), and turns triple dots into true ellipsis — or is that ellipsi…

“I give this plugin a ’10’ on a scale of 1 to 9” said a superfluous banter reader who wishes to remain anonymous (for obvious reasons…).

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