Solo Technology

Just about any web developer has probably been lectured more than once about the evils of using tables for page layout. I’ll spare the lectures — you’ve either heard ‘em a million times or you’re on your way to Google right now to search. Today I discovered another reason why table based layout can be a pain in the rear.

I spent the day adding some new functionality to a web application that I think is going to get a lot more use than the client anticipates. And this new feature starts off with a real grinding series of web service calls and database queries. To be totally honest, it definitely breaks the “show ‘em something within 5 seconds” rule that I tend to try and aim for (within reason, of course).

So, like any enthusiastic web guy I realized what I clearly needed here was a Web 2.0 style animation graphic! I quickly found one I liked and snagged it. Whilst pondering how best to show this graphic while doing my processing (in other words, while googling for a nice code snippet) I found a very nice article that laid it all out at my feet. That article is aimed at .NET folks, but starts with a Classic ASP example/preface. Perfect. I hate having to reinvent wheels on Saturday mornings.

[side note: Can I just say that Google's Search History thing is great when you're tired and trying to remember where you found a link? Privacy be damned, that just saved me a bunch of time!]

I coded up a quick little test page and it worked great. I began to think about all the places we could use something like this in the other projects at work. Suddenly I was starring in a mental ticker-tape parade.

Next step was to incorporate my test code into a real page. That didn’t work at all. Well, the last part of it worked — the “processing please wait” with groovy animation did indeed get hidden. It just never got displayed to begin with. But only in Internet Explorer… Firefox loved it.

This is when I remembered a little wrinkle I had discovered (and obviously subsequently forgotten) about doing stuff like that in IE: If it’s in a HTML table and the table isn’t completely rendered, don’t even bother. Nope, just not gonna happen. And guess what? The main “branding” for the app. I’m working on is table based. Even though the stuff I’m working on isn’t, every code page begins with an include for the header and ends with an include for the footer. In other words, the stuff I’m working on is all tossed in a big ol’ table cell. Which, at the point I’m trying to show this div containing my processing message, is in a big ol’ non-completed table.

*sigh*

Just say no to tables for layout — at least in IE if you want to do fancy div showing/hiding at any rate.

For the record, I worked out another way to go about it with an interim page displaying my message. But by doing it that way my animated gif doesn’t animate. Alas.

2 Responses to “Want another reason to avoid table based layout?”

1. RC on October 15th, 2006 11:40 am
   

   Ya. I agree 100%, the only thing, is that IE doesn’t seem to have good support for CSS, which i really hate, because I am a recent convert to non-tabled layouts. So I am going back to recode everything. which is a ton of work, but its all good cause its helping me learn better coding. The thing I am REALLY hatin’ is that IE hates CSS 3 like hell.

   Yes, yes, I know I am not supposed to really be using CSS3 cause of the stability issue, but I love the new effects, the rounded boxes, and transparancy, but hey, they just released IE RC2, you would think that at least their new stuff would support it all. But no. Only Mozilla.

   This furthers my resolve to get everybody I know on the penultimate browser! More good news for you FireFox-ees!

2. Chris on October 16th, 2006 9:45 pm
   

   Oh good lord. I haven’t even begun to consider CSS3!

Leave a Reply