How to fix disintegrated CSS layouts

A disintegrated CSS layout is surely one of the the worst daily nightmares for a web developer. There are several reasons that determine when and how a CSS layout gets disintegrated, but basically the most important are only two: browsers and user interaction. The process that leads a browser to disintegrate a CSS layout is surely related to its current implementation of the CSS specifications and, in most cases, to some undocumented and untested bugs. For example, all the bugs related to the hasLayout property in IE 6 were actually unknown when it was shipped (2001) and they were documented only a few years later. But IE is not alone.

All browsers have bugs. This is a fact. In the overwhelming majority of cases it's rare to stumble on some of these bugs in the current releases of Firefox, Safari, Opera and Chrome. It's more common in older versions of IE. However, before you get to the point of having a disintegrated layout, the best thing you can do is to run some preliminary tests on your layout. First, starts with element dimensioning. Second, add floating or positioning. Third, add fonts, margins, padding and colors. Fourth, add text properties. Finally, add graphics, for example background images. At each step, test your pages on the most used browsers on the web. Does the page look ok? If so, move to the next step.

If something goes wrong during a step, isolate the browser where the problem occurs. Is it a problem related to floats? Or everything is due to vertical collapsing margins? In either case, check out your code, find the part that doesn't work and create another test page that reproduces the problem. Then run a search on Google or another search engine, making sure that you're using the correct keywords to describe your problem. For example, start with a generic query such as internet explorer float bugs and then refine your search by adding more keywords, for example internet explorer float margin bugs.

To simplify things, remove all scripts and inline styles and embed your CSS code within the style element. If you're not able to go on alone, search for help on some forums and mailing lists, such as CSS Discuss. Be sure that your HTML and CSS are valid before doing this.

Finally, user interaction is the ultimate challenge to face when dealing with CSS layouts. When a user interacts with your layouts, bear in mind that he/she has the final word on how your pages will be displayed. A user can set his/her own style sheet. This is not a problem, because it's up to the user to set all styles. Instead, problems arise when the user causes a reflow on the page, for example by adjusting the base font size. In this case, if you have followed a scalable layout design by using relative lengths or fluid widths, then everything will work fine.

But if your layout uses fixed lengths and is not scalable, then it's likely that your page will be disintegrated when a user tries to resize fonts or zoom the page. In cases like this, it's always preferable to follow a scalable approach to page layout.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.