Client-proof Columns

Figure A Large

A common problem I face regarding CMS template implementation is that the HTML/CSS is restricted to only valid code. This commonly used WYSIWYG editor boasts XHTML 1.0 output but sometimes that may not be enough for a good looking document in most browsers. When working with pixel-perfect designs, this quickly becomes a major issue. Naturally, we can all argue as to why everyone should be writing valid code; the bottom line is we’ve got to please the client whether they know how to write standards-compliant code or not. This document will go over some of the common client-related quirks we’ve uncovered and outline possible fixes using CSS and HTML.

Problems:

  1. No P tag for paragraphs
  2. Long word breaks column in IE
  3. List nested in P tag + IMG tag inside the P

We start by using a DOCTYPE of Transitional instead of Strict. This gives a little tolerance for variance in source code. Usually, clients will have multiple editors inserting content.

Problem 1:

No P tag for paragraphs

Figure A Thumb

WYSIWYG editors can often get confused easily and leave text out of a P element. The client may not notice this right away but when it comes to fixing it, it is too cumbersome to have the client check the code. Even worse- when in WYSIWYG mode the error may not be apparent at all.

The fix:

If you are seeing text margins get distorted when a P is not used, chances are your document’s CSS styles essentially strip the tags of any margins or padding (or not), and then apply them manually within the appropriate column. This is the most prevalent problem associated with this method. I recommend using the Tan Hack as shown below to add padding to the column rather applying a margin/padding to the elements inside of it.
A strong 2-column structure should end up looking something like this:

CSS:



Figure A

This way your boxes are going to look nice and tight in all widely used browsers.

Problem 2:

Long words break column in IE

This problem is especially apparent in thin columns such as sub navigation or other floated fixed-width elements.

Affects: IE6, IE5.5, IE5

The fix:

There are two usual fixes for this problem: Using either overflow:hidden or word-wrap:break-word.

Each of these have their benefits and drawbacks, I tend to go with a word-wrap because when working with a CMS, the left column content is usually only text. This article expands very thoroughly on this fix so check that out for further information.

Problem 3:

Image alignment problem breaks layout

List Overflow

Sometimes, the IMG element may get placed inside the P tag and this can cause unwieldy results in page layout. When combined with a list element (sometimes these get left in as well), you may see something similar to the image below.

The fix:

The only real solution for this is to get in there and separate the code manually. When multiple block level elements are nested inside a P, you are going to get unwieldy results. Here’s a nice post for more information.

Download HTML/CSS from this example

Leave a comment