[Skip to the Main Content]

How I use CSS Background-Color for Layout Corrections

I don’t know if you ever happen to do this but it occurs when Sleepyheadedness sets-up or Stygian Deaths Rays Hypnotically emanating from Venus by way of your monitor have rendered you Brain Dead. Style sheet errors. I find that CSS “background-color” property fixes things.

1906 Magazine Advertisment
[1906 Advert]
One night—after supper—I was perusing The Ladies’ Home Journal [November 1906] for potential typography styles and/or layouts. I have stated elsewhere that advertisements are best suited for web design. They are formal grid structures; they are formal typography. However, the difficulty I’ve found is how does one translate printed design while engaging web standards notwithstanding where does new design go.

I’ve been pondering realignmented redesign of this site; I keep stumbling across printed layouts I like. The layout seen here was one.

The difficulty lies in where does one use that format. I’ve found numerous layouts that have no real-world use. Some I’ll construct as exercise; some I’ll modify and construct for later real-world use. This particular design I wanted to use on this site but I could not fathom which old template it would replace: I’d figure that later.

The first iteration of the HTML structure was a simple wireframe. I prefer not to scrawl on the original document and that is my reason for scanning an image that will be wireframed in Photoshop based on my original thoughts of what the HTML structure and presentational style should be.

And, one must consider where navigation and such should be placed. Still—for more complexity—I decided the layout would be used as a directory page with a modified Mall/Pennell Ordered List format of article titles and meta:descriptions used as summaries. Thus decided, the layout underwent several iterations before a near-complete version was found. However, the text alignments were not as precise as I wanted and I could not find my errors in the style sheet. That’s when CSS background-color is useful. [Note: Some developers prefer CSS border. I do not recommend it: it inserts pixel-widths.] I prefer visual-display.

This is what background-color showed.

Template Screenshot

After peering at the layout, I found my principle error: I had not removed margin and padding from the ordered list (as noted above).

I had peered at the style code but I could not find my error. It was only after setting a background-color that I immediately knew where my error occurred.

The error was corrected, the background-color was removed and the page was fine and done. It’s here.

Sean Fraser posted this on April 8, 2007 11:17 AM.

  • Add to Technorati Favorites
  • de.licio.us: http://www.elementary-group-standards.com/css/css-background-color-for-layout-corrections.html
  • furl: http://www.elementary-group-standards.com/css/css-background-color-for-layout-corrections.html
  • reddit: http://www.elementary-group-standards.com/css/css-background-color-for-layout-corrections.html


Comment Here

Reply guidelines: Basic HTML (a href, p, code, blockquote, dl, dt, dd, ul, ol, li, cite and q) are allowed. Line breaks and paragraphs are automated.

Inappropriate, unwarranted or self-aggrandizemented comments may suffer redaction. Or, deletion.

[Note: A gravatar, or globally recognized avatar, is that small image in the comments. Gravatar sets-up them.]

The Elementary Standards: A Compendium of Web Standards, CSS, Linguistics and Search Engine Optimization methodology Copyright ©2005-2007 Sean Fraser. All work is published under a Creative Commons License. All Rights Reserved.

Palm trees on a grassy field in Hawai’i

Main Content Returns thus