1 hm.

hm.

posted at 07:38 am on May 21, 2004 by tim

2 Another Tool in the Kit

That’s a very interesting technique and deserves further experimentation. It’s a shame about the extra markup, but hey, web-designers are used to making compromises.

As usual, one has to choose the right tool for any job and, regardless of whether or not the code is semantically or structurally correct, we have one more tool available.

posted at 07:48 am on May 21, 2004 by DarkBlue

3 Not convinced

Whislt I have no criticisms of the author or his idea in general and yes I did read the disclaimer, however I still think we are moving in the wrong direction completely by adding this much unnessecary markup simply to accomplish what is nothing more than an ehancement to a site’s visual design.

It’s time for tag soup all over again, except this time is the DIV tag…

Sure, this WORKS, but on the scale of importance when it comes to the web standards movement, I’d have to put cleaner, usable code over a simple graphic enhancement.

posted at 07:50 am on May 21, 2004 by Luke Redpath

4 Great Article

Great article. I have a question though. Perhaps I’m missing something, but why are we so opposed to non-semantic, non-structural divs. I realize they add weight to the page, and that they’d have to be removed/recoded in the even of a major redesign, but otherwise… AFAIK, unlike tables, they don’t affect assistive devices or software, do they? Also unlike tables, they don’t affect the display of the site sans style-sheet (unless some browsers give them a default margin or padding value, which I don’t think they do). So what’s the fuss? Note that I’m not trying to start a flame-war, or that I’m suggesting the reckless use of divs — I’m only asking a question.

posted at 07:57 am on May 21, 2004 by Averagebacon

5 Javascript

The extra markup seems a bit excessive to me too – however, I can see this technique being extremely useful when used in combination with javascript. Just add a “shadow” class to each image you want to have a drop shadow:

img.gif

And then drop in some javascript that crawls the DOM tree and applies the extra div markup to any elements that have the “shadow” class.

A single [removed] tag in the head of your document seems much simpler to me than tacking 3 extra divs on to each element you want to drop-shadow.

Is there any reason why this couldn’t work?

posted at 07:59 am on May 21, 2004 by Zac

6 Addendum

I see Luke’s point about tag soup, and I agree with those who encourage the cleaner-is-better mentality, but relative to a site that uses tables for layout…

Besides, I honestly only see this technique being used for a photo gallery or something of that nature — pages that are more-likely-than-not generated server-side (ie, no one sniffing around in the HTML trying to make updates). Am I wrong?

posted at 08:02 am on May 21, 2004 by Averagebacon

7 Very Clever

Hats off to Brian Williams for a really clever way to add a drop shadow. I still think in most cases the old fashioned PhotoShop way is the easiest, but I have no doubt that there will be times when this technique will be indispensable.

As for all this bother about standards and tag-soup, wake up and smell the IE 6. While I applaud the efforts of the Web Standards project, CSS isn’t yet what it’s cracked up to be, and until the spec is refined, and the W3C stops talking engineering gibberish to mere mortal web designers, I’m sticking with a mix of tables and CSS.

After all, clients often want their work done yesterday and even Mr. Zeldman admits that trying to make a site wok in all browsers and validate is a time consuming, frustrating task. And hey, aren’t there enough extremists in the world?

posted at 08:08 am on May 21, 2004 by shaZam

8 interesting

yes, it uses non-semantic markup, a whopping 54 extra characters per drop shadow’d item. would people be the least bit upset if there was some standards compliant script which could accomplish the same thing by only adding 54 characters to the markup? i agree that on the code end of things we should do things as efficiently as humanly possible. but we also have a commitment to the client to give them what they want, and if they want drop shadows and one of the other common methods won’t work for whatever reason, this will work quite well. it also seems pretty darn easy. i wouldn’t go so far as to call this tag soup all over again.

i think there can be such a thing as visual semantics. and while i don’t think it should take precidence over structural/textual semantics at the cost of page heft, neither should it be ignored. 54 characters is not crossing the line.

my only problem with this method is you can’t redesign with it by simply changing the style sheet(s). to add drop shadows to something that currently exists, no matter how well it’s marked up structurally, you’ve got to go into each page and add the 2 extra divs. and if later you redesign to remove the dropshadows, while you don’t absolutely have to, it’d be best to go in and remove those 2 extra divs (and probably reclass or ID the 3rd) since they were only there to serve a function that is no longer being used.

so it’s not perfect. but i have yet to run across a perfect method to do damn near anything when it comes to web desing. and thank god for that. if one perfect method existed for anything, it could easily be programmed into a wysiwyg editor that our most clueless clients could use, and we’d all be out of a job. ;)

posted at 08:12 am on May 21, 2004 by Derek Pennycuff

9 Small error in the CSS

On both final-version instances of the .wrap2 class, there’s an error:

.wrap2 { background-image:url(corner_bl.gif) left » bottom no-repeat; }

Naturally, that should be background: and not background-image: (anyone else noticed how it was out of place?).

I’m putting this here because I don’t know whether to send an e-mail to ALA for that or if this is the right place. It’s at least related.

As a response to the discussion, I would just say: use common sense, when using this technique. If you use it for generic pages with all sorts of content, using 3 redundant styling tags is undesirable. If you’re using it for a photogallery of sorts, leaving 3 redundant styling tags may not be bad at all. In the event of a redesign, you’ll instantly have a ton of freedom to add something nice to the photo’s without having to add in new tags, and in such cases a redundant tag or two that isn’t used isn’t so bad either. People don’t read photogalleries using Lynx or a screenreader.

posted at 08:25 am on May 21, 2004 by Faruk Ates

10 Re: Small error in the CSS

Faruk:

Good catch. Thanks! Fixed.

posted at 08:32 am on May 21, 2004 by apartness

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)