- The Crime Scene
- Follow the Evidence
- The Evidence Never Lies
- Case Closed!
From the book
From the book
The Evidence Never Lies
Our initial review of the HTML page code indicated that the markup is well structured, and a routine validation produced no errors. Harry grins with self-satisfied relief.
The CSS validation results, however, are another story (Figure 5.3):
W3C CSS Validator results for TextArea (CSS level 2.1) Sorry! We found the following errors (3) 18
#logo Value Error : position attempt to find a semicolon beforethe property name. Add it. 25 #tagline Value Error : margin only 0 can be a length. You must
){kind=small}
Figure 5.3 FarfallaEffect’s page-validation results
Confirming suspicions and naming the culprit
My first hunch was correct: Harry’s knowledge of HTML and CSS is solid, but he missed some minutia that made the difference between the page he was shooting for and the one he was getting.
Upon reviewing the validation results, it’s clear that we need to make the following fixes:
- The logo is out of position because Harry forgot the semicolon at the end of the following declaration:
- The tagline is slightly off because Harry forgot the unit of measurement after the value:
- The list items aren’t floating to the left because of a misspelling:
#logo {
position: relative;
top: 0;
left: -33px;
}
#tagline {
color: #BF4B1D;
font-size: .8em;
margin: -13px 0 0 28px;
}
dl.projects {
float: left;
margin: 0 10px 10px 10px;
text-align: center;
width: 260px;
}
Once these changes are incorporated, the validation results produce no errors, but the look of the page shows that something is still amiss (Figure 5.4 on the next page).
)
Figure 5.4 Page after validation errors were fixed
The logo is still not where it’s supposed to be and didn’t the main body area have a white background in the original design spec? There is something wrong with the styles that control the main body of the page. Let’s go back to the styles to see what small detail could elude both the validator and Harry’s tired eyes.
Did you spot it yet? If not, go back to the code and read it through from the top, keeping in mind that the problem will probably be with a selector that controls the main section of the page. Also remember that it may be a simple detail that makes the difference.
Aha! Something just isn’t quite right about the selector created for the <div id=”container”>, is it? In typical Harry Terry fashion, he forgot to put a # in front of the container selector. Thus, none of the #container styles show up: the middle alignment from the margins, the background color and the border, and the font size as well. If you found it, then bravo! Your apprenticeship has already served you well!
Here is the fix:
#container {
background-color: #ffffff;
border-left: 1px solid #aaaaaa;
font-size: .9em;
margin: 0 auto;
padding: 10px 1px 0 1px;
text-align: left;
width: 900px;
}
With the addition of the # sign, voilà! The main container shows up as expected, the logo and tagline finally fall into place properly (Figure 5.5) and the relative text sizes all render as desired (Figure 5.6).
){kind=small}
Figure 5.5 FarfallaEffect Design’s logo in place
)
Figure 5.6 Relative text sizes are fine and dandy.