- 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
Page Layout Misdemeanors: Bringing the Usual Suspects to Justice
Now you have some tools to get to the bottom of layout problems. Unfortunately, your page still displays some of these common issues, and you aren't quite sure of the problem. Here's an overview of five of the most common problems, their sources, and solutions for fixing them.
Elements Lack Style
Issue: The page styles show up until a certain point; after that, the styles aren't rendering (see Figure 1).
)
Culprit: Author error: Omissions, mispelingz, and is syntax bad.
Often the little details can make all the difference in the world. A missing bracket at the end of a style declaration block is a major game-changer, because its absence tells the browser that the style block is unfinished, and therefore none of the styles following that point in the code will render. Code like the following will cause problems for everything after the last line:
#nav {
background-color: #EDE3A5;
border-top: 1px solid #AA9B4A;
list-style-type: none;
margin: 0;
padding: 10px 0;
text-align: center;
Misspelled selectors, properties, and values all have a similar (although less dramatic) effect. Misspelled selectors cause the styles of the entire declaration block to be ignored. However, the effect of a misspelled property or value, or a missing closing semicolon, is limited to that particular style declaration[md]not the entire selection block.
Finally, bad syntax will render your styles ineffective. Keep an eye out for these common mistakes:
- Incorrect syntax of shorthand styles (many shorthand properties require values for the style to be applied):
No:
#promo {border: solid black;}
Yes:
#promo {border: 1px solid black;}
Are you sure?
.last li #footer {text-align: right;}
Looking good!
#footer li.last {text-align: right;}
Not so much:
#5mistakes {padding: 0;}
Much better:
#fivemistakes {padding: 0;}
Solution: Validating your CSS code is the easiest way to catch author errors and is well worth incorporating into your workflow. Humans sometimes make mistakes. Luckily, we have applications that can catch them!
Elements Won't Go Where They're Told
Issue: You're trying to center an element, and it just won't go there (see Figure 2).
)
Culprit: Your element isn't fully defined, and thus the browser doesn't have enough information to render the style.
.centeredimg {
margin: 0 auto;
width: 380px;
}
...
<div class="centeredimg">
<img src="police-line-up.jpg" alt="line-up" />
</div>
Solution: If you're using margin-left: auto; margin-right: auto; to center your element, remember that the browser also needs the width of the element to be able to calculate how much to offset the left and right margins:
.centeredimg {
margin: 0 auto;
width: 380px;
}
Make sure that you know the properties and how they work. It may help to revisit the CSS specifications.
Mystery Whitespace
Issue: There's extra space around your element (see Figure 3). What gives?
){kind=small}
Culprit: Margin or padding values are not explicit.
Browsers are programmed with default values for margins and padding for page elements. Chances are that the elements in your specific design call for totally different values. If you don't make the margins or padding around elements explicit, the extra space may stem from inheriting and displaying the default values rather than your desired values.
Solution: Employ a CSS reset to establish the baseline values for particular elements on the page, and then style the desired element; alternatively, you can just style the element with the needed values directly. Either way, you'll get the correct amount of space (or lack thereof) around your element.
Element Overlaps Text/Borders
Issue: An image floated to the side of text overlaps the container's border, which wasn't your intention (see Figure 4).
)
Culprit: Uncontained floats.
Floats need to be contained properly inside of the parent element, or the parent will "collapse"; that is, the parent will shrink to the size of its content, except for that of its float.
Solution: For the float to be shown entirely within the parent container, the float needs to be cleared. There are many ways to clear floats, but I'll share these two popular techniques:
- Float (nearly) Everything (FnE): If the parent container is itself a float, it will contain the child float.
- Easy clear: With the "easy clear" method, you create an entity with the generated content property and then apply the clear property to it. You style the entity to take up no space and disappear. On the page, it's invisible, but it forces your floated element to clear, and thus forces the parent to contain it properly.
The traditional easy-clear is usually structured as follows:
.clearfix {display: inline-block;}
.clearfix:after {
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
Floats Drop on Page
Issue: You've calculated the numbers correctly, but one of the floats still drops below the intended space (see Figure 5).
)
Culprit: Double-margin float bug (IE6).
If you have the pleasure of having to code for IE6 because of your site's audience, then you'll probably encounter the double-margin float bug. This bug comes from having a margin value set on the same side where a element is floated. Suppose an element has styles like this:
#secondcontent {
border: 1px solid #33cc99;
float: right;
margin: 15px 15px 0 0;
width: 300px;
}
Then the double-margin float bug will turn the 15-pixel right margin into 30 pixels! That additional space will most likely cause the float to drop down on the page and break the layout.
Solution: IE6 is becoming less of a concern as more users finally adopt newer browsers, but this problem still needs to be addressed. The quick-and-easy solution is to add the following to your element's code:
#secondcontent {
border: 1px solid #33cc99;
display: inline;
float: right;
margin: 15px 15px 0 0;
width: 300px;
}
This addition will fix the problem.