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

Dar­ing Fire­ball Projects: Smar­ty­Pants is a real­ly cool plu­g­in for Mov­able­Type, the CMS that dri­ves this site. The pur­pose of this plu­g­in is to con­vert cer­tain stan­dard ASCII items — straight quotes for instance — into their typo­graph­i­cal­ly-cor­rect HTML-encod­ed equiv­e­lents. It also works won­ders on dou­ble dash­es (con­vert­ing them to prop­er em dash­es), and turns triple dots into true ellip­sis — or is that ellipsi…

I give this plu­g­in a ‘10’ on a scale of 1 to 9” said a super­flu­ous ban­ter read­er who wish­es to remain anony­mous (for obvi­ous reasons…).

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:

Zeld­man’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 recent­ly that the XHTML2 stan­dard will like­ly 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, Zeld­man’s home­page proud­ly 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.

Zeld­man’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 sol­id #6cc;
back­ground: url(/i/bans/hc100ban.gif) no-repeat 1px; /* start hid­ing from macie\*/
back­ground-posi­tion: 0px; /* stop hiding */
width: 100px;
height: 25px;
voice-family: “\”}\””; 
voice-fam­i­ly: inherit; 
width: 98px;
height: 23px;
}

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

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

a#hcban:hover {
back­ground-image: url(/i/bans/hc100bano.gif);
ns- bor­der: 1px sol­id #cff;
}

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

.alt {
dis­play: none;
}

In addi­tion, the images are not vis­i­ble to old­er 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 entire­ly 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