Thoroughly skippable: CSS blogwank rant (with bonus Mozilla bug tip)
Posted: September 4th, 2003 | 9 Comments »Subject: My weight ruined my life jplbktzmqotag
(after Leonard)
I normally try to avoid writing posts like this. Blogging about blogging is bad; blogging about IM conversations is bad; blogging about fights amongst bloggers is bad; blogging about stupid CSS tricks is bad; blogging about in-jokes with your famous blogger mates is very bad. In combination, about it I should be taking an avoidance route with a continent-sized margin. But a challenge has been made, generic and it must be met. (By me, anyway. You can skip all this. You’ll lead a better life for it.)
I had been meaning for a while to rant about one of the web-based annoyances that pisses me off more than most, but blech of the loveable alpha grumps 2lmc went and beat me to it, at the same time identifying the code that causes the problem. If you narrow a page that’s using this trick, the page contents become unreadable, because no current browser will let you scroll to read the content that’s slid off the left-hand edge of the window, and this is all done in the name of a minor styling issue. My browsing day seems littered with sites that do this, and I notice because I’m on a laptop most of the time and I keep my browser window to what used to be a sensible width (~600px) until everyone seemed to decide that no, sites need to be wider, and no, we’re not going to make sites that squish down and stay readable because that would be a styling compromise.
So, during one of my many handy grumping visits with 2lmc, I decided to list some offenders, only I could hardly remember any and that day seemed to be one of the few where I wasn’t hitting a born-slippy site every other minute. But I did finger Tom, who took exception, especially since he and 2lmc are arch-nemeses, what with them regularly firing their airguns at his carefully-composed evangelical missives to the weblog faithful. Obviously this is not a war I would lightly jump into the middle of, but I love Tom lots and it hurts when I can’t read his site properly because his deliciously-witty epithets have slid drunkenly into the left gutter (but still gazing at the stars).
So during a passionately-heated IM conversation Tom challenged me to find a fix for his site and post it. This is what I am now doing, and my aims here are to (a) hand out advice to avoid slippy centering (b) tell you all about a really weird Mozilla bug and how to avoid it (c) get some embarrassment out of Coates in exchange for having fixed his site for him and (d) vent a bit, dammit.
The Problem: How to center a block element using CSS and NO TABLES. TABLES BAD. HIT TABLES WITH STICK.
The Solution: Here’s how to do it in a rather less stupid, hacky way than that “50%-400px” or whatever.
But it doesn’t work! What?
It doesn’t work on my site! So I have to use the hacky thing.
But you’re damaging the readability!
So widen the page! I want my content centered!
Sod the centering! What’s the point in styling if I can’t read it?
[ Fast-forward through half an hour of elbow-chewingly dull argument… ]
Okay, show me how to fix it.
Right. Fine. Can’t be that hard. After all, we have an alternative already, so I’ll just hack that in…
[ Ten minutes later ]
Nearly got it, just needs tweaking…
[ An hour later ]
Stupid buggy no-good piece of shite…
[ Another hour later ]
Right. Done. Works in IE6/Win, Mozilla, Safari and IE/Mac. So there.
So what was the problem?
Look, here’s the main bit of the fix, right:
#core {
position: relative;
margin-left: auto;
margin-right: auto;
width: 660px;
}
But that doesn’t work in Mozilla, for some reason. (At least, not on the Plasticbag front page, which presumably has enough weirdnesses to invoke Mozilla’s “quirks plus acid-flashback mode”) After beating my head against it for a while, it was only when I tried the old add-borders-so-we-can-see-what-all-the-blocks-are trick that the thing magically sorted itself out.
Except it didn’t fully sort itself out, because I didn’t want a border. After half an hour of randomised fiddling (because I’d realised that the only way to attack bugs that are being totally random at you is to be random right back at them) I ended up with a working thing:
#core {
position: relative;
margin-left: auto;
margin-right: auto;
width: 660px;
border-style: solid;
border-top-width: 0px;
border-bottom-width: 0px;
}
I hope that those of you with CSS-bug-busting experience (of which I have very little, but I feel I’ve been successfully blooded now) will not question that you need it to look exactly like that, and that specifying border widths any other way will not work, otherwise you get random lines appearing on top of things for no apparent reason. Have a play using the (utterly indispensable) edit styles bookmarklet if you don’t believe me.
During our long and mostly pointless argument, Tom made the very valid point that he knows his site won’t work for everyone, and it’s his prerogative; it’s his site. If he was working on a commercial site design for an employer, it’d be a different matter. I empathise here completely; my own site is very broken in various ways (such as nav bar links 404ing for the past year). The cobbler’s children run barefoot, as they say. Even so, I have to question any text-heavy site design that kills basic readability for many users in favour of a styling trick that only works for some others. Also, Tom, drop all the fixed widths and shit like that. You don’t know how big your user’s text preferences are going to be, and you’re pretending like the web is print, which is even worse than using tables. (Besides, you’ve got so many DIVs with absolutely-positioned style attributes that I honestly can’t tell the difference between that and tabling, other than tabling’s more flexible. Semantics? Where do semantics enter into it?)
(Tom also made the very valid point that instead of pointing the finger at Blogdex for their CSS, I should be lambasting the meaningless UI. “Track this site” vs “Track this weblog”? Eh?)
Okay, I’m done embarrassing Tom now, and done embarrassing myself with the kind of blog entry that makes me wish I’d spent the time surfing AIM for cute chicks to have cybersex with instead.
Thanks Yoz! I’ll implement that as soon as I get a moment. In the meantime, can I just take issue with a couple of minor things. You say, “Even so, I have to question any text-heavy site design that kills basic readability for many users in favour of a styling trick that only works for some others.” You use a rhetoric of many vs. some when in fact I could just as easily say (and in fact did), that it would kill basic readability for a small fraction of users in favour of a preliminary attempt at styling something in quite a likely-to-be-wanted-way using CSS that works for the vast majority. It’s important that we acknowledge that CSS isn’t going to become a standard way of building things if we can’t find ways to undertake simple pieces of design – that all designers will want to accomplish at some time or another – like centring fixed width blocks. Sites like mine are trying to find a way to do that – unfortunately without an unlimited amount of time to do so.
As to tables vs. CSS positioning – you’re making a typical absolutist distinction between tables and CSS without any regard for incremental changes or improvements. By using CSS I’ve made that site considerably lighter than if I was using Tables, and I’ve also (for the most part) used styled paragraphs, lists and divs to separate up chunks of content in a mostly logical fashion. It’s not entirely semantic in the sense that I haven’t yet done stuff like put the titles in as H1s or H2s, but again I don’t have all the time in the world and – to be honest – quite a lot of that stuff would be a relatively simple fix if someone else wanted to do it. This is not me claiming that it’s shiny and brilliant and awesome, simply that it has benefits over tables even in a not-quite validating, not-quite semantic enough, bit of a rough-place-to-try-and-work-things-through way.
Finally, as to the “fixed widths and shit” – I really think you’re just going to have to get over that one. I haven’t worked on a single commercial site in the last four years that wasn’t fixed width, including UpMyStreet which had celebrated and much-vaunted accessibility and standards-compliance as one of its main objectives. That’s not to say that they’re not all wrong, of course – but it is to say that if they thought there was a substantial problem associated with doing it in terms of people being able to read the things, then they wouldn’t do it. The uncomfortable truth of the world of the web is that at the moment for the most part, we do know what kind of screen resolution and text sizes people are likely to have, and that a good designer should be keeping that in mind throughout the process – ideally finding ways in which good typographic line-lengths will be seen by as many people as possible – enhancing readability and quick-parsing of information. As long as we design in ways that mean that they degrade relatively gracefully when people use them in non-average ways, that’s ok with me. Now, plasticbag.org doesn’t degrade well in many ways – a horizontal rule bar at the bottom would be my preference for the 2% of people using browsers below 800×600 or who choose to not have their browsers anywhere near full-screen – but that’s because I couldn’t find a better way at the time, because it’s a place for me to learn and experiment, not because I don’t care about it. I actually really don’t think that full screen width sites are the best design strategy most of the time, because they make sites completely unparseable for normal human beings who DON’T change their browser window size simply in order to be able to read certain individual sites (which after all is what they’d have to do to be able to get a recommended number of words per line that a human can read and follow – AND PRECISELY WHAT YOU’RE NOT PREPARED TO DO WHEN YOU COME TO MY SITE).
Very quickly; You have heard this arguement a billion times but it bears hitting with the legs of table until it bleeds and everyone has it fixed in their heads:
Crikey it is hard to read all this text when I have my browser in full-screen. My eyes go from left to right like a cartoon character eating corn off the cob. I have to un-maximise my browser and fiddle with the width until I get it down to about 400px so that I can track properly from line to line.
What would be really nice is an upper-limit width setting in CSS. Then you get the fluid nice to-crappy-old-small-screens-and-mobile-rubbish as well as stopping the paragraphs from becoming miles wide on bigger better screens.
my 2 cents, and good post over all (yours, not mine I mean)
An upper width setting exists: max-width. It’s supported by the major graphical browsers, with the really major exception of IE (up to and inclusive of IE6). There’s a hacky workaround which uses max-width for browsers which support it, and feeds IE a bit of Javascript in the CSS
And the link to that hacky workaround is http://www.svendtofte.com/code/max_width_in_ie/
Cor, thanks, Michael! I’ll apply that to my stylesheet shortly.
Wow, awesome. Thanks MW.
What’s wrong with “width=40em” or whatever? That’s fixed width but scales with font changes.
What’s wrong with that is precisely that is a fixed width. Using a max-width ensures readability for your typical Windows user, with their maximised browser, but avoids horizontal scrollbars for people who have their browser taking up only half the horizontal space of their screen (á la typical Mac/$X_WINDOW_MANAGER user).
Since this article, I’ve run into a couple of other blogs who’ve adopted plasticbag.org-esque designs, notably Mark Pilgrim, who knows (but apparently doesn’t care) that it’s unreadable at small browser widths.
Sadly Pilgrim doesn’t even provide full-entry RSS feeds. I may have to start screenscraping the bastards.