<< First Impression of the iPod Shuffle | Home | Java's Open Source Accessibility, From Sun! >>

Layout Problems, Seeking Explanations or Fix

Eric mentioned it 4 days ago. And I was able to observe it yesterday on a reproducable basis.

The problem shows up only in Firefox on Windows and Linux, not on IE on Windows or OS X, nor on Firefox on OS X, nor on Safari on OS X.

The problem is simply this: on the first visit to http://www.weiqigao.com/blog/ after a restart of Firefox, the title of the first blog entry is 13px lower than on a subsequent visit. Thus if you hit the reload button, the title seems to jump up a little bit.

I'm totally in the dark as to why Firefox behaves this way. My speculation is that this is a race condition of some sort between the HTML and the CSS.

I did encounter the measure 13px last week when I customized the CSS. At one time the header of this blog was 13px lower than before. Inspecting the HTML I discovered that the new version wraps the <body> element in a <div> element, which pushes everything down by 13px.

Several other layout issues that I discovered last week, and one Jonathan discovered, include:

  • Floating elements (the blogroll) pushes <pre> elements way down, leaving the page looking empty, when the window is resized to be very narrow. (In IE they merely overlap, which is what I expected.)
  • Increasing font size once will introduce the horizontal scroll bar that won't go away, no matter how wide the window is resized to be.
  • Increasing font size even further, the dotted lines around the calendar will diverge from the actual calendar.

Since I was irritated when this sort of things happen on other websites, I would like to resolve all these issues on my own blog.

Responses[3] RSS feed for responses to this blog entry
Posted by Weiqi Gao on March 13, 2005 10:17:28 AM CST #


Reply

Re: Layout Problems, Seeking Explanations or Fix

Comment from Anonymous on March 14, 2005 10:01:25 AM CST #
What you're finding is that CSS positioning sucks. There are two groups it was trying to satisfy: the markup people who think content is king, and just want the text to be available in all systems/browsers/sizes/resolutions; and the layout people who want total control of everything. CSS positioning is a perfect compromise - neither party got what they wanted. Your sidebar is defined as 200px. When you increase your font size, the calendar text doesn't fit within the 200px. The box that binds the calendar (and it's border, background color, etc) only resizes with the text as long as it doesn't violate other rules (such as your 200px rule). The markup people decided that text should never be cropped due to layout rules, and the layout people decided that layout rules should not be ignored for the sake of text. The result was CSS.
Reply

Re: Layout Problems, Seeking Explanations or Fix

Comment from Eric M. Burke on March 14, 2005 4:17:49 PM CST #
Moving away from HTML tables seems like an academic solution to layout that doesn't work well in practice. CSS layout results in an awful lot of hardcoded pixel dimensions when HTML tables make it much easier to create flowing layout.
I am fully aware that my opinion - stick with HTML tables - is not "in vogue".
Reply

Re: Layout Problems, Seeking Explanations or Fix

Comment from Weiqi Gao on March 14, 2005 11:00:14 PM CST #

I've changed the size of the sidebar from "200px" to "29ex". That seems to alleviate the dotted line problem a bit.


Add a comment Send a TrackBack