Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Writing Assignments, FIR

August 05, 2003

There’s good news, there’s great news, and there’s Amazingly Great news. The good news first.

mezzoblue’s conversion to an XHTML/CSS layout would have happened eventually, but it was rushed for a specific reason: I’m getting paid for it.

Which leads to the great news. We all lamented the loss of glasshaus when their parent company went belly-up. Useful titles like Cascading Style Sheets: Separating Content from Presentation became hard to find, and we lost a valuable resource.

Book: Separating Content from Presentation

Apress is picking up the pieces. Right now, at this very moment, the original authors of Separating Content from Presentation are hard at work revising their original drafts, and a second edition is expected out later this year.

And this is how the two are related: I am contributing. mezzoblue is my case study, and this site and the process of building it will be included in the second edition of the book. More will be posted as it develops.

And speaking of writing assignments, later this week my first article for Digital Web will be published. As the coordinator of a project that relies heavily on the Fahrner Image Replacement technique, naturally it’s near and dear to my heart. It gets its fair share of bruising from detractors, so my article goes a long way toward explaining why we need it, and how to work around the problem spots.

Which leads to the Amazingly Great news. We may have finally beat the accessibility problem, and dropped the superfluous <span> all in one shot.

Two great minds, Seamus Leahy and Stuart Langridge have each independently come up with a solution that relies on overflow: hidden; to hide the text. For the sake of a name, I’ll tentatively dub this the Leahy/Langridge Method, although Todd and Doug should be credited for their initial work. FBLL Method anyone?

A quick box model hack ensures these work in IE5+, but further browser testing is necessary. These look super promising, and both should be credited for their original thinking.

(to be fair, Seamus approached me two weeks ago, so he was First if anyone’s counting. But let’s not go there.)


Reader Comments

Jai says:
August 05, 01h

That FIR is a frickin’ exciting trick. Dave, thanks for Mezzoblue dude. It’s inspiring. I keep learning more here than I ever did at school or on my own. By the way, if you didn’t tell me, I wouldn’t have noticed the tables were gone on this site. Now there’s a sign of good work: when you dodn’t even know it changed!

Thanks.

Seamus says:
August 05, 01h

I would have so much fun with all of CSS-3; but I have to wait and play with what is thrown my way with CSS-3 and CSS-2 (which still has a lot of stuff, paged media, that needs to be added to browsers).

I am glad to see someone else thinks the way I do.

Dave S. says:
August 05, 02h

Anne - very much a hack. But useful, and necessary. In fact, in my Digital Web article, I… well, you’ll just have to wait and see. Admittedly, CSS-3 will be wonderful, in 10 years or whenever it’s practical to use.

Jai - thanks! While perhaps that reflects poorly on schools teaching web design, it’s good to hear that my writing is useful.

Seamus - you’d better make good on that. I can’t wait to see where you’ll go with CSS-3. Your work is nothing but inspiring.

Jon Hicks says:
August 05, 02h

Thanks for the links to the FBLL Method (Fibble method?). Works a treat!

I’ve just realised that if you use this technique on a <a> tag, add display:block to the CSS, and a different background-image on the a:hover - you get a completely image based, javascript-free rollover! Apologies if I’m the last one to make this connection…

Dave S. says:
August 05, 02h

Jon - you sure do. See all the rollover effects in the top right corner of this site ;)

Jon Hicks says:
August 05, 02h

Doh! Oh well - I’ve caught up now! ;)

Lea says:
August 05, 05h

I used Seamus’s method here.
OK, don’t mind the rest of the messy coding, LOL, but yah. That’s an example of it in use in a company page.

jon says:
August 05, 07h

HA! immediately after i used your “span” method to get my header links to show up, you call it “superfluous” lol. You know i get all my CSS info from you; stop confusing me ;) On the real–congratulations!

p.s . that “remember me (on my mozilla) is below the check box in the display”.

August 05, 12h

So we have (on windows):


IE5+
Op5+
NN6+


It still feels a lot like a hack. I’ll be happy wenn CSS3 is out en we can use something similar to this:

h1{
content:url(header.png);
}

August 06, 01h

Great news,
the first edition was simply great!!!
Though too short, I’m aware of cost of printing 1.000 pages book, but I hope this new edition will be larger.
BTW I’m eagerly waiting and I love Seamus experiments too.
I think it will be THE next CSS book that everybody should have, toghether with the new edition of the Meyer’s CSS reference
Thanks for sharing

Marcello

11
Jim Dabell says:
August 06, 02h

There’s still a problem with the modified FIR technique. It breaks when you switch off image loading in a browser that would otherwise show the graphic.

If you really care about the content showing up, just use an img element. If it’s no great loss to lose it completely, use a FIR variant.

(btw, ‘preview’ seems to be broken, I just get the original page.)

12
Simon Proctor says:
August 06, 05h

One thought on image based CSS rollovers, why not add some blank tags at the bottom of the page that are set to 0 height and width with overflow hidden that load the rollover images?
This should pre-cache the images but by putting them at the bottom of the page it’ll get done last. This way you don’t get the annoying pause the first time you hover over one of the links. Which admittedly only seems to happen in Mozilla.

Dave S. says:
August 06, 07h

Jim - unfortunately, that is still a problem for the time being. I’m confident something can be done about it though. Using an <img> really IS the best solution from an end-user standpoint, but look at the flexibility offered by <img>-free layouts in the Zen Garden…

Simon - I tried pre-loading by assigning the mouse-over image to the <li> that my links live in. No dice - Mozilla variants don’t load images that don’t actually display. Good thing for load times, bad thing for pre-caching. I’ll give your suggestion a shot, it’s not a bad idea - but we’ll see if Mozilla plays along.

radu says:
August 06, 08h

[.. Using an really IS the best solution from an end-user standpoint, but look at the flexibility offered by -free layouts in the Zen Garden… ]

well, dave, why not use that pixel.gif i already wrote you about?
i know, we just got rid of the SPAN tag, and the pixel.gif is again a hack, but i think JAWS should read it ok…
so we still have (pseudo)IMG-free layout, and accessibility support too…

15
Simon Proctor says:
August 06, 08h

Ah, I see how I fixed the pre-caching thing last time I had it. I put an <img> tag in the code with a height and width of 0.
Which is a bit sick really, but it was a while ago and the cutomer is happy. If I could convince my boss to let me change it I would. But it should work using the CSS version… I might give it a try when I get home.

August 06, 11h

So Dave, when can we expect CSSZG v2.0?

August 18, 09h

I haven’t bought the first edition, so now I faced with the decision whether to buy it or not because it might cover all the sam ground as the previous edition. Whats your honest opinion? Should I wait for the new and improved or shall I get the first instalment?

Dave S. says:
August 18, 09h

I e-mailed you an answer Kevin. Anyone else wishing for an answer to the same question can feel free to contact me: http://www.mezzoblue.com/contact/

October 06, 12h

I’m trying to adapt the accessible FIRt to allow aligning title to the right. This seems to work fine in Moz and Opera (7) with the simple addition of:
float: right;
background-position: right;
…but of course MSIE 6 inexplicably drops the background image by an arbitrary amount (the height of the text?) Has anyone cracked this one?

October 06, 12h

…and then I went and read the specs, and it had the solution:
background-position: 100% 0%;
http://www.w3.org/TR/CSS2/colors.html#background-properties

21
Bryan says:
November 09, 12h

Hi man. Greetings from Zimbabwe. Like your site, looks good to me. CSS is really the bomb!
Your solutions and ideas are very intriguing.
Can you advise where I can find good free downlodable tutorials? A bunch of us ranging from beginner to intermediate would like to have these practical tutorials.
Later,
Bryan