The Usual Suspects: Detecting and Preventing the Most Common Culprits Behind CSS Problems
- Prepare Yourself with Structure and Interrogation Know-How
- Page Layout Misdemeanors: Bringing the Usual Suspects to Justice
- Book 'Em, Danno!
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
No matter what your level of expertise is with coding CSS, you'll probably run up against some typical miscreants that cause layout issues. With a bit of foreknowledge, however, you can code proactively and prevent CSS crimes from being committed in your code. In case you don't catch the problems before they happen, I've provided some solid troubleshooting tips as well.
Prepare Yourself with Structure and Interrogation Know-How
The first step in preventing the usual culprits from page layout foul play is to create a structured environment in your code. Having standards-based, well-formed, and organized code goes a long way toward averting misdeeds. Following are five good tips for establishing a zero-tolerance policy for bugs and problems.
Get Everything in Order
Putting your CSS declarations into alphabetical order is a great way to set the stage for clean code and fewer problems. Why? Because your style declarations will be easier to locate. Don't believe me? Look for the width property in these two examples:
Example 1:
.login {
margin-top: 5px;
line-height: 1.5em;
padding-left: 5px;
float: right;
list-style-type: none;
width: 80px;
font-weight: bold;
border-left: 1px solid #69824d;
}
Example 2:
.login {
border-left: 1px solid #69824d;
float: right;
font-weight: bold;
line-height: 1.5em;
list-style-type: none;
margin-top: 5px;
padding-left: 5px;
width: 80px;
}
Of course you found the property in each example, but knowing that width was going to be at the bottom of one of the examples helped you to find it more easily, didn't it?
Clearly Indicate Hierarchy
Another way to maintain control of your coding environment (which acts as a preventive measure against later problems) is to indent style declarations. My preferred method is to match the style declarations to the hierarchy of the HTML document. Suppose you have an HTML document with this hierarchy and structure:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example Website Title</title>
</head>
<body>
<div id="pagewrap">
<div id="header">
<h1>Website Title</h1>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- end #header -->
<div id="contentwrap">
<div id="maincontent">
<h2>Main Content Title</h2>
<p>Main content, which is so much more important than the secondary
content that it makes one teary with emotion.</p>
<p>More main content, which has you glued to the screen,
reading every new word with sweet anticipation.</p>
</div><!-- end #maincontent -->
<div id="secondarycontent">
<h3>Sidebar Title</h3>
<p>Sidebar content, which is not as important as the primary
content (which is why it is in the sidebar)</p>
</div><!-- end #secondarycontent -->
</div><!-- end #cotentwrap -->
<div id="footer">
<p>standard copyright and footer information</p>
</div><!-- end #footer -->
</div><!-- end #container -->
</body>
</html>
You would structure the stylesheet style declarations like this:
body {...}
#pagewrap {...}
#header {...}
#nav {...}
#nav li {...}
#contentwrap {...}
#maincontent {...}
#secondcontent {...}
#footer {...}
This kind of structure in the stylesheet not only reflects the document hierarchy, but helps you to find your styles more easily.
Make Comments
Comments are the unsung heroes of stylesheet organization and prospective bug management. Comments in stylesheets are used for many purposes, such as writing notating styles for yourself or anyone else who may be working in the document:
font-size: 1.2em; /* font size change from original 1.25em */
Comments are also used to create sections in the stylesheet for better organization:
/* ---- Content Wrap Section Styles ---- */
#contentwrap {...}
#maincontent {...}
#secondcontent {...}
Maintain Neutrality
You may have gotten to the point in your code where you've detected a de facto problem[md]or one that's waiting to happen. There are a couple of ways to take out potential code offenders.
Just as you can use comments to notate and organize your stylesheet, you can use them to remove pieces of code while troubleshooting:
#pagewrap {
/* background: transparent url(bg_design.png) top center no-repeat; */
border: 1px solid #eee;
margin: 0 auto;
padding: 0;
width: 990px;
}
Another good way to incapacitate styles for an element is to add x- in front of the selector:
x-#navigation {
border: 5px solid #aaa;
color: #456829;
margin: 10px 5px;
padding: 0;
width: 350px;
}
This is a quick way to disconnect the style from the element on the page, helping you get to the bottom of any issues in the document that much faster.
Establish a Perimeter
A final tool in your arsenal against delinquent styles and wayward elements is to box them in and show their boundaries. By adding either the border or outline property to the style declaration block, you can clearly delineate the periphery of the element. Here's an example using border:
#secondcontent {
border: 1px dotted blue;
font-size: .90em;
float: right;
margin: 0;
padding: 0;
width: 250px;
}
Or you can use outline:
#secondcontent {
outline: 1px dotted green;
font-size: .90em;
float: right;
margin: 0;
padding: 0;
width: 250px;
}
What's the difference between border and outline? A border is a component of the box model, so giving an element a border adds to the dimensions of the element. In contrast, outline is not part of the box model. Instead, an outline is drawn on top of the element's box. Thus, the outline property doesn't add to the dimension of the element.
Which technique is better? That depends on which browser you're using for testing. outline is great for modern browsers, but isn't supported by Internet Explorer 6 and 7. For delineating elements in these older browsers, border is a better bet.