Mother Of All CSS Hacks -- The Table
January 23, 2004 | 
31 Comments
I should have known better. I should have kept my mouth shut.
Shortly after I said “Web Standards Now Second Nature” and felt I had a firm grasp on everything CSS, Internet Explorer (bastard) kicks me squarly in the nuts.
Just about every project I’ve worked on in the last week has been a royal pain. I’ve run into various browser support issues and multiple bugs. I guess I was just lucky before. In one case I came across something I truly think is unresolvable using CSS.
I was working on a CSS based design that needed to fit into a container table that was beyond my control. For some reason in Mozilla the content wouldn’t flow past the table. Anyway, I finally fixed it by fiddling with the positioning and eventually going to floats, but not until after having to rebuild the whole damn thing.
That should have been the end. I fixed the Mozilla problem. Whew! Oh, wait, now the damn thing has serious problems in IE. The floats were all messed up. Back to the drawing board right?
Wrong.
It situations like this that a more practical solution needs to be put into place. I was already far over the estimated time on this one so it was quickly going to cost someone money. Not to mention precious time. Whether it was me or my client it just wasn’t worth it to continue to try and use CSS hacks to fix this so it would work cross-browser.
Enter the table. I slapped a table in there and it was fixed. End of story. No hacks, no fuss, no muss. It took all of 5 minutes.
Now, this is a rare and rather special case, make no mistake about that. In general I’ve had few problems with my CSS layouts and the vast majority have been resolved in a fairly straightfoward manner. Usually I don’t mind working these rare cases out — but there are times when it just isn’t practical.
For example, with my current redesign, I’ve run into some issues with how IE 6 Windows renders my templates. I’m in the process of working them out, but it’s kind of a pain to be honest. All of my code is 100% valid, it looks fucking great in everything but IE 6. Problem is that most of my visitors come in via IE 6 Windows.
(You Windows guys don’t know what your missing — everything looks so much better on a Mac. If you have to stay loyal to Microsoft and the Windows world at the least switch to Mozilla will you? I promise you’ll be glad you did!)
I’ve come to truly despise IE. I’m sure all of you who do CSS layouts know the pain involved with that piece of crap. You work and work and work, everything looks great and then you check it in IE 6 and it’s all gone to hell.
Or you design to have it display properly in IE 6, but it’s so full of hacks and crap that you may as well have used tables anyway. Well, that might be an exageration, but screw it, I’m frustrated.
On my own site it’s not really costing anyone any money, and I want to be inclusive (I thought about giving up IE support, but realized that’s not really an option) so I’ll work it out. And, to be honest, I don’t envision it being too much a problem, but it’s adding a week or so onto my timeline as I just haven’t the time to tackle it right now and I can’t move forward until I’ve fixed it.
Oh well, there really isn’t anything to do about it. You cope, right? Yep, cope and keep the good old table in the arsenal until such time as it’s truly not needed for layout anymore.
Filed under: Web Development
Comments
1. ste said:
Heh, IE6 is fast becoming the Netscape 4 of this decade. ;) Seriously, though, I understand completely - heck, I’m still stuck having to support Netscape 4. Luckily, my boss is okay with the content being accessible without styles, or I’d be pulling my hair out.
On the mozilla switch front, I’ve got a plan to switch all of my coworkers to Mozilla over the next few months. I already have some interested. (“Blocked popups? And less security problems? Awesome!”) Now I just need to figure out how to best configure it for new users (I think they’d benefit from tabs, but would definitely need to train them first).
Posted on January 23, 2004 08:15 PM | #
2. Sage said:
I totally understand where you’re coming from… I’ve been on the verge of screaming when I find out that IE6 botches up a re-design of my site. In fact, I just finished on a re-design, and I got it working beautifully in Safari after fiddling for it for an entire week.
Then I email one of my friends to do my IE6 test, and the entire layout was destroyed by that POS browser.
So, now I had to scrap the design and start over with something completely new (I figured it’d be easier than trying to figure out exactly how IE butchered it and what asinine hacks I’d need to fix it).
Posted on January 23, 2004 09:05 PM | #
3. Brad said:
You know, its posts like this that makes the whole web design process that much better. No one is alone when it comes to this IE crap and trying to get hacks around it. Its kinda like design for IE or design for the rest don’t you think?
Posted on January 23, 2004 09:12 PM | #
4. Bob said:
I’m square in the middle of redesigning our company web site. There is one IE hack to handle some weirdness positioning a background image, but somehow I managed to make it 99.5% identical between IE5/Win, IE6/Win, and Moz/Win.
THEN I find out that IE5/Mac completely screws the pooch. I’m in the process of hooking up my old beige minitower (I gave the 233 iMac to my wife, and haven’t gotten hers hooked back up yet) so I can test in IE5/Mac.
Doesn’t seem to matter which platform you’re on - IE is a PITA no matter what.
Posted on January 23, 2004 09:18 PM | #
5. Nils Devine said:
IE6? How about IE5.* and the way tables fail to inherit font sizes from the styles assigned to the body (proper data tables of course)? I’m only railing on this one because I just switched over to Owen Briggs’ Sane CSS Sizes and had to put in that one IE hack. Or what about the failure to impliment overflow: visible? I mean, come on.
On the Mozilla switch topic, I can’t wait until it gets out of beta so I can send out CDs to my family who are stuck on dial-up in the back woods of Maine. May loose patience and burn off copies of the latest stable Firebird.
Posted on January 23, 2004 10:09 PM | #
6. Chris Vincent said:
Well, when you’re on a deadline, you have to go with what works in the end. However, that gives you something to work on once you’ve completed the project.
I’d like to see what the problem was. I won’t arrogantly try to say that I could fix it, but I’ll bet that, without deadlines and with the great standards community, we can figure something out. Even if we can’t, it’s good to know about these things.
I wouldn’t feel too bad about it. After all, you still tried standards first. Only after much toil did you decide to go with the old way. If the President were half as competent about exhausting every alternative first, we might not be in an expensive, unnecessary war right now. But I digress.
Posted on January 23, 2004 10:49 PM | #
7. Tom said:
Tell me about it. I recently rebuilt a site that I partly run, but I’m the only web-design guy there. The amount of times I had to start over due to MSIE’s problems with doing the simplest of tasks is absolutely crazy. The faster Microsoft actually do something about it, the better. Unfortunately, that doesn’t look too promising. Although they’re adding a popup-blocker with WinXP SP2, are they really bothered about us lot? I think not.
Posted on January 24, 2004 04:04 AM | #
8. Seamus said:
When I redesigned my personal site I gave up on IE. Then again, it is my personal site and the thing that most people come to view on my site is experimental CSS.
Posted on January 24, 2004 06:54 AM | #
9. Ben said:
Welcome to the real world… Man you don’t know how many times I just said screw it built the page with tables too just because of time and IE. It goes to show that CSS isn’t as quite as easy as some people say it is.
Posted on January 24, 2004 09:02 AM | #
10. "Could be an idiot but..." said:
sorry, but if the majority of traffic is using IE, wouldn’t it be better / sane / practical to target the tool that the bulk (95% +-) of the visiting viewers will be using as the standard?
Of course this question will
a)be ignored completely
b)fall into a religious zealots banterfest
c)make somebody consider that the visitor is using the “right” browser (for his needs)
d)reinforce that targeting the other 4% of browsers is really what you want to do
e)other
just a simple question.
Posted on January 24, 2004 11:59 AM | #
11. Dave S. said:
“Could be an idiot” – Good point. I used to think this too, but there’s a good reason why my mindset shifted. If you develop in IE first, and then test elsewhere, what happens is that you create dependencies on IE’s buggy rendering.
Since the other browsers don’t use the same flawed rendering, you’ll have to bend over backward to hack your layout into working properly with most of them. In fact, when I was developing in IE, I used to curse Mozilla quite frequently for rendering my code ‘wrong’.
My experience has been that if you start out by developing in Mozilla or Safari, and then test in everything else afterward, you have to do much less hacking to make it work. The fringe browsers benefit; IE5/Mac gets a surprising number of my layouts right without any extra effort. Opera generally cooperates, although it can be a crapshoot at times. IE (per the general tone of this thread) is the big problem.
Can you get away with developing in IE? Of course. Is it easier? Generally not. If you don’t care about the fringe browsers, then you’ll get away with it. If you do care, then you’ll have a far nicer time by developing in Mozilla. Hope that helps.
Posted on January 24, 2004 12:16 PM | #
12. Keith said:
“Could be an idiot but…” Sheesh, gimme a break.
I hate it when people post a valid, yet somewhat controversial question or comment and hide behind nonsense names, etc. To be honest I kind of feel like it should be ignored – at least give us a name.
But, it’s a valid concern and I’ll do my best to address it anyway. Maybe tack on to Dave’s very helpful and I’m quite sure much more eloquent answer.
There is no easy answer to that question. There are valid points on both sides I suppose and it goes beyond a simple “yes” or “no.”
Ideally you would want to target whatever browser the majority of visitors use, which in most cases is IE (although 95% is a huge stretch).
The problem with that is that IE is broken.
If, and this is the point of my post, you can get IE to display your layout properly by using semantic XHTML and CSS there are many advantages there.
However, there are certain projects where it’s not practical to do so. The problem usually isn’t the developer, it’s the damn browser.
There is no right way or wrong way here. Not really. It’s just that CSS offers some really great advantages over traditional tabled layouts and because IE is a piece of crap it makes it very hard at times to take advantage of the power that CSS can give you.
My point isn’t that people shouldn’t use CSS. It’s not that CSS is hard, or inflexible. Quite the opposite. CSS based layouts are usually my preferred way to go, I always start out that way because usually I can work it out and I feel that it’s a more simple, more logical way to code.
When you code your CSS the way it’s supposed to work it works beautifully in just about every modern browser with the sole exception of IE. This is too bad, really. It’s the reason why people don’t want to get into CSS. The reason why it’s “hard” isn’t because CSS is hard to use, it’s because IE doesn’t work right. It wouldn’t be as hard if IE worked right.
It’s just that, because of IE, CSS isn’t a silver bullet and we need to rely on hacks and things like tables to control the layout at time. Some people don’t have a problem with hacks, some people think tables are just fine for layout.
I’m not one of those people. I want my code to be clean and hack free. I want to use tables to tabular data, not layout. I want to code based on Web standards, validate my code and have it work the way it’s supposed to. Because of IE I can’t always get what I want.
It’s pretty simple really. Don’t agree – that’s fine too. To each his own. Like I said, I don’t feel there is one way to do things.
Now I have a question for you or anyone who uses IE for that matter. How could IE be considered the “right” browser for anyone? I don’t mean this to be contentious, I’m just genuinely curious. What does IE offer that Mozilla doesn’t? I can’t think of a single thing, but I can think of all sorts of things Mozilla offers that IE doesn’t and just one of them is better support for Web standards and CSS.
Posted on January 24, 2004 12:37 PM | #
13. Josh Jarmin said:
Keith,
You have made some great points. I am always disappointed when people refuse to use anything other than IE just because it doesnt come preinstalled on their computer. IE only has this huge market share because people use it because it is there. No other reason most times, just because it came with their computer. It would be great to get some of these other browsers to ship with new computers to give IE some competition. No that they should, but if Apple made Safari for Windows (i really hope they never do) they could probably work out a deal to get Safari on the desktop of every new computer from at least one or two major distrubtors (think HP and iTunes). If we lived in a perfect world, every major browser would be on the desktop of new computers to give customers a choice and a chance to choose something other than IE.
*Offtopic: Why doesnt the IE development team see the need to catch up with everyone else and add tabs to their browser - i have loved tabs since the first time I used Opera. I guess they figure “why update? we are still #1.”
Posted on January 24, 2004 09:39 PM | #
14. Joel said:
I actually noticed something good about IE6 quite recently. It handles print stylesheets better than any other browser.
Like anyone who has attempted to get a CSS layout to work properly (or according to my expectations) in IE6, I have experienced frustration with it. I have railed against it. Now, however, I’ve stopped trying to do the things it won’t allow me to do and changed other things (don’t have to have a dotted 1px border it only renders as dashed, could have solid and lighter).
Now I’ve stopped blowing my top with it I start to see things in it that are okay, such as it prints pages well, unlike Firebird, which still seems to have some problems with printing.
Sometimes problems with onscreen display in IE6 have been solved by finding a better way to do the CSS. I think with IE6 many web designers give up before they’ve tried rather than regarding it as a challenge.
Okay, so IE6 is broken. But we have to live with it. Whining about it doesn’t get anyone anywhere.
Posted on January 25, 2004 07:17 AM | #
15. Keith said:
Joel said – “Whining about it doesn’t get anyone anywhere.”
I think that’s debatable, no wait, that’s simply wrong. I feel much better knowing that there are other folks out there who deal with the same problems. It makes me feel better about it and therefore it got me somewhere. I do count as someone don’t I?
In addition, if enough people point it out and “whine” about it maybe it’ll some day get fixed. And, anyway, what are blogs for if not for whining…?
What doesn’t get anyone anywhere is letting IE off the hook. You talk about finding a better way to do the CSS? I want to make this very clear. I did it right the first time and it didn’t work in IE. There was no “better way” – my code was valid and rendered as it should have in every browser but IE.
As far as regarding it as a challenge, I agree and usually I’m up for it. But at the same time, I don’t like spending my precious time (or my clients) trying to hack something together to satisfy a broken piece of software. It bothers me.
I guess I feel that it’s a crying shame that a designer has to “stop(ped) trying to do the things it won’t allow me to do and change(d) other things (don’t have to have a dotted 1px border it only renders as dashed, could have solid and lighter).”
If you want a dotted 1px border you should get a dotted 1px border. I hate to think a designer would have to compromise a design in that manner to satisfy IE. That’s a thought that really bothers me.
Posted on January 25, 2004 05:21 PM | #
16. H said:
I’m a beginner, but am I understanding this…IE doesn’t get the box right. IE doesn’t get the borders right. IE doesn’t support min-width making floats overlap. You use a hack to fix it and another hack to let the other browser ignore the first hack. I want a list of everything IE 6 Windows does wrong so people can see how crappy it is. Any supporters?
Posted on January 25, 2004 06:23 PM | #
17. TOOLman said:
I disagree. Keith did the design according to the rules of CSS, and it worked in a standards-compliant browser. CSS isn’t the problem; lousy browser support is!
Basically, we’ve got two choices:
I realize that there’s a huge difference between commercial sites and personal ones, but as long as we pamper the old dinosaurs, they’ll never become extinct. I say we make things work in them, but nothing more. Then include the more advanced features for capable browsers, as a reward for those who are smart enough to use Mozilla, Opera, or Safari.
I usually visit this site with IE5.5/Win, because that’s all that’s available for me at work, where I have a fast connection. At home, on a 56K modem, I always use Mozilla or Opera.
Posted on January 25, 2004 10:47 PM | #
18. Joel said:
Actually, I agree Keith, I don’t like the idea of changing the way I do things just to suit IE6 (which is probably why I insisted on having position:fixed on my site, using the IE6 fixed positioning hack, that’s hardly giving in to a browser!). But in the case of IE6 rendering 1px dotted as dashed in the end I gave in and chose a solid line alternative. And I ended up preferring it. So sometimes the limitations of a browser can dictate a choice that is actually okay, which was more my point.
It amazes me that so many people love IE6, and wrinkle their noses up at a change, but overall I think we will have more success showing them the benefits of multitabbed browsing in Firebird, for instance, rather than constantly slagging off IE6. If people hear too much whining over something, they eventually intinctively learn to distrust it and it has the opposite effect.
Posted on January 26, 2004 03:52 AM | #
19. Nollind Whachell said:
On one hand I have to laugh at the amount of time people spend trying to be standards compliant. On the other hand, I admire the fortitude some people have in trying to stick it out with something they believe in. Change doesn’t happen overnight but usually takes years of work in the distance before it hits us like a tidal wave in the mainstream.
A perfect world would have different browsers on the desktop to choose from? Uh, in my perfect world, all browsers would follow web standards 100% accurately. In our unperfect world, they don’t. Don’t make IE the scapegoat for everything because it causes the most problems. Address the issue that all browsers need to have the same full support.
Telling someone that Mozilla is better because it makes your job easier isn’t going to make them change. Why is it better for them, the user? Tell them what features will make their experience in using it more enjoyable than IE. Even then, you won’t make everyone switch because certain people may like certain features in IE that are not in any other browser (i.e. sidebar media player). Yes, some of these things may seem trivial to you but everyone has different tastes and therefore uses their browser and applications in different ways.
It’s kind of too bad that someone couldn’t just create a gecko rendering engine plug-in for other browsers like IE that would allow developers to add the plug-in to their page and make IE render a page using the gecko engine. A few snippets of code and voila, your site works the way you want it too. Even better, since it’s a plug-in, it downloads on the fly, and even more so, it allows other sites based around the IE rendering engine to display the way they were meant to be, since they just wouldn’t use the gecko plug-in unless they were called to do so. That would make IE users happy because they could still use the browser their way, yet gain all the advantages of the Mozilla, which would make a lot of developers out their happy. Of course, another way to do this would be to make a Mozilla skin that functioned exactly like IE does (i.e. including media sidebar, media type functionality, etc), so they get the same front end experience but the great back end engine of Mozilla. Either way, a lot of work involved I guess.
Oh well, in a perfect world…
Posted on January 26, 2004 08:35 AM | #
20. dw said:
Honestly, ALL browsers out there are goofy with CSS support. All you can do is hack until the day that IE12 is fully CSS1 compliant and someone has taken the Opera developers back behind the woodshed.
I’ve been struggling with Firebird refusing to admit that a DIV exists and has a red background. For some reason it’s decided it’s blue. Here’s the kicker: Works fine in IE/Safari/Konq/Opera but not in Firebird. CSS1 full support my arse.
Posted on January 26, 2004 11:54 AM | #
21. Richard@Home said:
I sat down to blog my own rant against IE and reading yours get me a great springboard.
Many thanks for the inspiration.
Posted on January 26, 2004 02:57 PM | #
22. Tom Trenka said:
Um, this is twice now I’ve heard someone asking for a Moz ActiveX control, so here’s a link:
http://www.iol.ie/~locka/mozilla/control.htm#download
(link from Erik A at Web-fx)
Although I’ll be honest, while some comments have been informative, I haven’t had a problem developing in IE and making small adjustments in the other browsers afterwards.
Posted on January 27, 2004 07:25 AM | #
23. Mike D. said:
This is not in any way an excuse for the way IE 6 handles things, but I’ve found that two things generally save my CSS layouts from manglement in IE 6… when you’re in doubt, do these two things:
1. Give your DIVs stated widths.
2. Set the default positioning for DIVs to ‘relative’.
It sucks to have to set widths for DIVs which otherwise shouldn’t require them, but especially with floats, IE 6 tends to handle things a lot better that way.
Posted on January 27, 2004 09:56 AM | #
24. Keith said:
Mike, it’s funny that you mention that, because I had to do the exact opposite (remove the width from a few divs as well as remove “relative” from another) to solve a problem I was having with this site’s redesign.
I’m not saying what you suggest doesn’t work, I’m sure that it does, but it my case the widths especially were what was causing the main problem.
Posted on January 27, 2004 10:25 AM | #
25. Paul said:
So IE has the large market share at the moment, but the alternatives are getting better and slowly becoming known. My prediction for the future is that IE share will start to drop and that other browsers will make a comeback.
So my point is that we should not ignor a small non IE market as it may/will become a large market in the future.
Posted on January 27, 2004 08:04 PM | #
26. Chris Hester said:
Im dying to know more about this. Maybe you can contact me Dylan?
Posted on January 28, 2004 07:32 AM | #
27. sosa said:
Hey come on!
Use a table when you need to… one Burger’s cholesterol won’t kill you, but you will bee no longer hungry.
Posted on January 29, 2004 11:25 AM | #
28. William said:
One other thing with regards to the necessity of supporting non-IE browsers is the mobile market. To my knowledge Microsoft is not dominant here and this market is bound to grow and grow.
In short, coding in XHTML/CSS is as near to “future-proofing” as you can hope for.
Posted on January 31, 2004 12:31 PM | #
29. royger said:
I was using an XHTML Transitional layout. Everything worked fine in any browser. Then I started thinking about migrating to CSS positioning and XHTML 1.0 Strict, a tables-free layout. But it is a mess-up, I spended a lot of time in doing a thing that I could do in an hour with tables. An then, when I get it more or less working, I’ve realitzed how dificult is to center a thing in CSS, why do things have to be so difficult? Isn’t CSS to make things easier? (sure not for me). Eventually I ended it, I hope it’s worth the time I spended on doing it.
Posted on February 1, 2004 06:33 AM | #
30. ben said:
i understand your frustration with using cssp and ie6.x. ie5.x on mac and pc are both horrible browsers.
however
tables for layout are not an option at this point. there is one thing more frustrating than debugging ie’s css quirks. –debugging an enormous broken page coded with tables/nested tables, etc. its an impossible nightmare of meaningless spaghetti code. it must stop.
Posted on February 10, 2004 03:13 PM | #
31. lolly said:
IE’s rendering engine is one of the few things that can make me swear out loud (very loud), at work.
Thankfully, CSS-D can be very helpful with this sort of thing :-)
Posted on May 10, 2004 04:32 AM | #
Comments are now closed