CSS Holy Grail

Just launched a rebuild of John Battelle’s Searchblog. Got some first-hand experience with the holy grail of CSS — 3-column layout with fluid center column (he wanted a right column to drop ads into). Quickly realized that this is clearly one of those areas where a table-based layout would have been infinitely easier, but just can’t bring myself to step back that far in time (or to accept defeat).

With Glish’s sample code, the initial implementation wasn’t difficult – what sucked was butting heads with IE/Win’s horribly broken box model. With the layout working in virtually every modern CSS-compliant browser, checked IE/Win only to find the left and right columns lapping up into the banner space. Trouble is, you can’t float three columns — you have to specify screen placement as absolutes. But do that, and you find out just how far off IE/Win’s reckoning of vertical height is from non-broken CSS implementations. At that point, it becomes a game of seesaw — fix one while breaking the other, or vice versa. Gad, it’s frustrating.

In the end, everything is working fine in IE/Win (IE/Mac was fine all along, of course, since IE/Mac has always had a better CSS implementation than IE/Win) with one small side-effect remaining for the working browsers. Feh. I’ll lick that too… eventually.

John’s post on the redesign.

Music: Cosmic Jokers :: The Cosmic Couriers Meet Philly Willy

18 thoughts on “CSS Holy Grail

  1. Who cares about IE/Win and its users?

    Strike one, you use Windows.

    Strike two, lots of sites render poorly in IE, it has no tabs, no pop-up blocking, lots of security issues and you haven’t thought about a switch.

    Strike three, you don’t use Firefox.

    You’re out.

    Yes, my tongue is in my cheek. But not as firmly as you may think.

  2. Nice, very nice. I’ve been toying with the three column layout for myself but I’m not looking forward to all the hair pulling to get it to work on Win/IE. I’m on a Mac but looking at my server logs, 90% of the visitors are on some Windows / IE combo. I’d like to say nuts to them but what can you do?

  3. >> Who cares about IE/Win and its users?

    Erm, maybe someone who’d like 70%+ (I’m guessing, but if anything erring on the low side) of people visiting their site to see it as they intended, not all screwed up.

    Your tongue just dropped off :-P

  4. Strike two, lots of sites render poorly in IE, it has no tabs, no pop-up blocking, lots of security issues and you haven’t thought about a switch.

    I am not an IE apologist in any sense of the word, I hate the damn software, but WinXP SP2’s IE does have popup blocking.

  5. Dan, I’m fully aware of the percentages. And I still don’t care. Parts of my site render incorrectly in IE/Win. And only IE/Win. And I’m not fixing it. As long as you cater to the slowest common denominator the slowest common denominator sees no reason to change.

    Why should anyone switch off of IE/Win, which we all know is broken in many ways, as long as people like you keep bending over backwards to accomodate them?

    Ask someone not technically saavy why they use IE. It won’t be “because it’s a great browser” or “it’s really speedy” or “I like the security.” It’ll be, “I dunno. It works.” Oh really? It works? And why is that?

  6. There are very few developers out there who have the luxury of ignoring IE/Win. Smart people do dumb things sometimes — people smoke cigarettes, use Explorer*, etc. It may not make sense, but it’s reality, and most developers would be crazy (or fired) not to support Explorer, with all of its broken-ness.

    What makes me angry is the fact that CSS is like this wonderful gift to the development community from the W3C, but that even now, four or five years after its introduction, compatibility is so problematic, and that almost all CSS problems today boil down to IE not respecting the standard. As a result, CSS is not deployed nearly as widely as it should be, and there are still tons of table-based layouts out there because developers get so frustrated trying to get IE to behave.

    But ignoring IE is unfortunately not the answer. Users who see sites that are broken in IE will blame the developer, not Microsoft.

    * Of course I’m referring here to people who have been told that they have a superior/better-featured/free choice in the matter and persist in using Explorer for inexplicable reasons, not people who don’t yet know they have a choice.

  7. When a IE user visits your site, have a little message that reads: “This site is not fully compatible with Internet Explorer. Please download a non-MS browser, such as Firefox, Opera, or Mozilla.”

    Non-IE users are accustomed to getting such messages. It’s time to give back to the ‘net community.

  8. There are very few developers out there who have the luxury of ignoring IE/Win.

    I know, that’s why I said my tongue was in my cheek.

    But it’s not there *firmly*. Why?

    Dan said:

    Erm, maybe someone who’d like 70%+ (I’m guessing, but if anything erring on the low side) of people visiting their site to see it as they intended, not all screwed up.

    Well, 70% of Americans cannot find New Jersey on a map.

    http://flathat.wm.edu/November222002/worldbeat.shtml

    In Dan’s world, we’d be relocating New Jersey to accomodate the dimwits. In mine, we’d hand people a map and tell them to stop dreaming and get on the beam. :)

  9. I think it’s ok to ignore IE/Win if you also exercise judgment when doing so. For example: I ignore my (personal weblog) site’s bustedness in IE/Win because doing so causes my small personally-known readership to start talking to me about how the site doesn’t render right on their machine. This has gotten at least a couple people to try a different browser, and also has fostered some interesting discussions whereby I get to tutor the uninitiated on the pleasure of non-IE browsing.

    For something like Amazon, though, it’d be wilfully stupid to ignore IE/Win.

    At the risk of overgeneralizing, the Internet is populated and supported by ‘priests’ and ‘laypeople’. The priests have watched the Internet go from geek-only to anybody-and-their-grandmother. The task of the priests is to lead the laypeople around and help them understand that things like security, interoperability, and universal interchangeabliity and compatibility are the soul of what enabled and continues to enable the Internet, and that, as such, they are important to understand well enough to be able to make informed decisions about how they’re going to use it.

    But I don’t want to ramble…

    Congrats on making progress with the 3-col layout. I’ve had to do that same seesaw, and I know how frustrating it can be!

  10. >> In Dan’s world, we’d be relocating New Jersey to accomodate the dimwits.

    My world is the real world. The one which is populated by vast numbers of fuckwits. You can tell them what you like, they ain’t going to stop being fuckwits. And they’re certainly not going to stop it if you walk around with a sign on your chest saying “I’m smarter than you. You’re doing everything wrong. Why the hell don’t you stop it now, and do what I do”.

    C’est la vie. To paraphrase Nike, adjust to it.

    And, hey, hand in the air time: I use IE. I use it because I’m lazy, because it’s already on my computer, because so far it has always enabled me to do what I want to do (get information) and because the various alternatives I’ve tried in the past all suck in their own special ways.

  11. My world is the real world. The one which is populated by vast numbers of fuckwits. You can tell them what you like, they ain’t going to stop being fuckwits. … And, hey, hand in the air time: I use IE.

    ‘Nuff said.

  12. >> Dan, I hope you’re running a robust firewall, anti-virus, anti-spyware on a regular basis, a HOSTS file, and High security settings in IE; I really do.

    Firewall, yes. Anti-virus, no: they cause more trouble than they’re worth, though I do scan regularly and have been virus-free for as long as I can remember. Anti-spyware, yes. HOSTS, yes. High security, no, again too much hassle. I’ve been running IE as my main browser for 7 years (ever since it became a serious browser at the same time as Netscape became a Mickey Mouse one) and, aside from one time I got hit by Code Red (which wasn’t a browser issue anyway) because I forgot to apply patches to a newly installed machine, I’ve had no problems.

    I would seriously love to run Mozilla, I prefer it to IE in most respects, but when I installed it, it refused to recognise the Flash plugin however many times I tried to shoehorn and hammer it into place, it never took. And swapping to another browser every time I wanted to view a Flash site became a serious inconvenience.

    Another reason I use IE is because I want to see how the websites I develop look to the vast majority of people who will be visiting them. I simply don’t have the luxury of ignoring my customers. Also, it should be pointed out that a large number of people (perhaps 50%?) viewing a website will have little or no choice over the browser they’re using: it will have been installed by the establishment (company, education authority, internet café, whatever) who own the computer.

  13. Jerimiah above has kindly mentioned a 3 col template called Vesuvius I have put together for the benefit of WordPress users. It is pretty straight forward , once you get your head around it :)

  14. Yeah, seems like there are a number of 3-column CSS example sites out there. I can’t readily see what others have above the others, but thanks all for posting the links.

  15. Abe – very interesting that the clanky solution does not use absolute positioning. I was under the impression this was not possible with 3-column layout. That would actually make a couple of things much easier for me. Hmmm… thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *