A Little CSS Frustration

Volume 7, Issue 119; 11 Jul 2004; last modified 08 Oct 2010

Absolute widths in CSS: browser bug, CSS bug, or just bad style?

The chief virtue of style is perspicuity, and nothing so vicious in it, as to need an interpreter.

Ben Jonson

I admit, I run my browser a little on the narrow side, but I’ve got my reasons and I think they’re good ones, which is what really matters on my desktop.

Sometimes this width causes layout problems. But what’s interesting is that the most difficult layout problems occur on sites that are CSS based. On sites that are table based, the browsers are pretty good at providing a horizontal scroll bar. But on CSS based sites, no such luck. Here’s an example from dive into mark:

Snapshot of dive into mark in Firefox
Snapshot of dive into mark in Firefox

That’s a clip of the left hand side of the full width of my browser window, as it appears. And there’s no scroll bar available to “move left”. Mark’s site is one I visit often that demonstrates the problem. Shelley Powers blog has the same problem and so do several commercial sites that I can think of off the top of my head.

The question is, should the browser be providing a scroll bar here, making this a Firefox bug? My guess is, probably yes.

Still, I wonder if setting the width property on the principle content rectangle of your layout to a fixed size is a good idea.

I bet the CSS pundits will tell me. Whatever the answer, I wish the problem would go away.

Comments

I went to Mark's page with Firefox 0.9.2, IE, and Opera 7.x on Win2000. All three behaved the same way, and I did get a horizontal scroll bar with Firefox. ut whent he window was narrow enough, the scroll bar was wider than the window. Still worked, though.

Then I tried the same thing on your site, on this very article. When I made the window narrow enough, your text got clipped too, and there was no scroll bar - both with Firefox. Opera had a scroll bar *and* wrapped. IE had a scroll bar and wrapped. Looks like a Firefox bug after all. Or maybe it is not a bug but the other browsers are smarter (but maybe wrong by the spec?) about handling overflow.

There is an overflow property, and it probably should be set to "auto" or "scroll", but it looks like that property applies when the line width is greater than the box width. In this case, though, the browser window is narrower than the box width, so overflow may not apply.

Hmm, I see that the CSS 2.1 Rec says that

"When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism"

That's a "should" not a "must". Bah!

I like to start a style sheet by giving the body a zero left and top margin. This stends to standardize some of the layout between IE and the other browsers. Then I like to give widths in ems or %.

—Posted by Tom Passin on 12 Jul 2004 @ 03:16 UTC #

I like the CSS max-width policy, it does pretty well exactly what you want. Only thing, it's not supported in IE. That means, if you visit ongoing in IE in a wide browser window, you're going to find the text sprawling out way across the screen in a way that makes it hard to read. Fortunately, IE just dropped below the 50% level among ongoing's visitors.

—Posted by Tim Bray on 12 Jul 2004 @ 06:11 UTC #

Firefox 0.9 seems to have fixed its problems with the CSS page centering technique used by Shelley’s weblog and many other sites. A workaround for older versions is included at the bottom of http://css-discuss.incutio.com/?page=CenteringBlockElement.

Mark is using a different technique based on a negative left margin, though, which makes some content inaccessible in IE 6 as well. It’s harder to argue that the browser should display content that’s been explicitly placed off to the left of the viewport.

—Posted by Carey Evans on 13 Jul 2004 @ 07:13 UTC #