workarounds Archives

After viewing this site’s redesign in progress, Peter Petrus wrote:

[Y]ou’re using footer to clear floats (content + sidebar). This creates a large drawback, because before footer is downloaded and displayed in the browser, parent wrapper lacks any background.

It means that we’re staring on black text / orange background combo for a few moments. Well, few moments now, but should you put any unresponsive widgets in the sidebar, everything can render much slower. Having main content flash like this isn’t very pleasant – especially when you named the redesign “Designing from the content out”.

Solution is very simple – use ‘:after’ clearing for the main wrapper. Sure, it won’t work on IE, but 1) setting width to wrapper sets hasLayout and triggers clearing 2) #footer is still there, in any case.

I’d read about using “:after” clearing but hadn’t implemented it and thought I could solve the problem an easier way. This afternoon, with about five minutes’ work, I did so.

I solved the orange background flash by moving the faux column background image up in the CSS hierarchy.

In the original CSS, I used the faux column background image on the wrapper element only.
In the updated CSS, I’ve now added the same background image to the body element as well.

Doing so fixed the orange background flash problem, because the browser no longer has to wait for the footer to clear before showing the background image.

Compare body element on new z.css and previous z-bak.css. (Likewise, compare body on alt.css and alt-bak.css.)

[tags]css, workarounds, clear, float[/tags]

In “Universal Internet Explorer 6 CSS,” Andy Clarke proposes a novel approach to the problem that has vexed standards-based designers since time immemorial (or at least since we could quit worrying about Netscape 4).

The problem is IE6. Outdated but still widely used, especially in the developing world, its inaccurate and incomplete CSS support forces web designers and developers to spend expensive hours on workarounds ranging from hacks, to IE6-only styles served via conditional comments, to JavaScript. Some refuse to serve CSS to IE6 at all; others stop IE6 users at the gate. In some situations (personal site, web app used by first-world hipsters), ignoring IE6 may work; but mostly it doesn’t.

After a brief but thorough tour of current IE6 solutions and their limitations, Andy unveils his zinger. He proposes to serve IE6 users a set of universal styles completely unrelated to the design of the site in question. Not unlike Arc90’s awesome Readability plug-in, the styles Andy has designed concern themselves with typographic hierarchy and whitespace. Here’s the theory: make the page easy to read, make it obvious that somebody designed it, and the IE6 user will have a good experience.

(By contrast, block styles from IE6, as some developers suggest, and that user will have a bad experience. Most likely, in the absence of styles, the user will think the page is broken.)

No hammer fits all nails, and no solution, however elegant, will work for every situation. But if we’re open minded, Andy’s proposal may work in more situations than we at first suspect. Where it works, it’s what business folk call a “win, win:” the visitor has a good reading experience, and client and developer are spared tedium and expense.

Check it out.

[tags]IE6, workarounds, design, development, webdesign, hacks, legibility, styles, CSS, andyclarke[/tags]