Diagnosing layout problems

See more about:

Where are we?

You know how to add spacing around elements, float elements to the left and right, and set element widths. You’ll use these three things to make layouts.

But it’s easy to make mistakes in CSS, and sometimes it’s hard to find out what caused the mistakes. Let’s look at some tools that can help.

This lesson’s goals

By the end of this lesson, you should know that:

  • Editors like Netbeans help you spot typing errors before they get into your code.
  • The “MeasureIt”“:https://addons.mozilla.org/en-US/firefox/addon/539 add-on helps you figure out where the browser is putting things.

Argh!!

Getting pages exactly right with CSS can be tough. Why?

CSS is hard

It’s easy to do a simple layout with CSS. But complex layout, like CoreDogs? Argh!!

CSS has lots of strange quirks. Things you think should be easy, aren’t. Like vertical centering.

Containership and overriding can lead you astray. You might think you know what rule applies to an element. But the element could be affected by a rule you hadn’t thought about.

Cross-browser problems

CSS that works in one browser might not work in another. You’ve already seen that browsers use different defaults for margin and padding. But that’s just the tip of the iceberg.

Typos

Here are some typos in code:

margins: 10px;

background_color: blue;

padding 10px 5px 10px 5px;

The errors are easy to spot in isolated lines. Put them in a 100-line CSS file, and they’re hard to find.

Here are tools that can help you find mistakes.

Editors

Some editors spot some typing errors. Here’s a screen shot from Netbeans:

Error spotted

Figure 1. Error spotted

The Netbeans editor knows that margins is not a CSS property. I meant to type margin.

Download Netbeans. This one feature will save you a lot of time.

CSS validator

You can ask the W3C’s CSS validator to check your CSS. The validator is at http://jigsaw.w3.org/css-validator/.

For example:

Validator input

Figure 2. Validator input

Validator output

Figure 3. Validator output

Firebug

Firebug is an add-on for Firefox. It does many things. One of the most useful is showing you what CSS styles the browser is using on an element.

Suppose I wanted to find out the styles that the browser applied to Bird:

What styles?

Figure 4. What styles?

I would look at the page in Firefox, then press F12 to start Firebug (assuming I’ve installed Firebug, of course). Then I’d click the inspect button:

Inspect button

Figure 5. Inspect button

As I move the mouse over different HTML elements, Firebug shows where the element is in the HTML, and what styles apply to it:

Firebug showing HTML and CSS

Figure 6. Firebug showing HTML and CSS

You should install Firebug today. It’s free.

Web developer add-on

Web Developer is another good free add-on for Firefox. Let’s look at just one of the many Good Things it does.

Suppose I’m looking at this page:

Elements

Figure 7. Elements

I want to move things about, so I want an easy way to see the elements I can set padding and margins on. I can tell Web Developer to add outlines to the block elements:

Web Developer menus

Figure 8. Web Developer menus

It will show:

Outlined elements

Figure 9. Outlined elements

Measuring

Sometimes you want to know exactly how many pixels wide something is, or what the gap is between two elements. The MeasureIt add-on is handy.

It adds a button to the Firefox status bar. Click on it:

MeasureIt button

Figure 10. MeasureIt button

Drag the mouse, and see the size:

MeasureIt output

Figure 11. MeasureIt output

Exercise: Validating CSS

Here’s some CSS:

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 14px;
  background_color: #ffeaff;
  width 750px;
  margin: 5px auto 5px auto;
}
#top_region {
  background-color: #E0E0E0;
}
#left_region {
  float: left;
  width: 120px;
  background-color: #defe2;
}
#center_region {
  margin-left: 120px;
  margin-right: 120px;
  background-color: #fdffca;
}
#right_region {
  float: rght;
  width: 120px;
  background-color: #ddddff;
}
#bottom_region {
  backgound-color: #E0E0E0;
}

Figure 1. Some CSS

Check it with theW3C’s CSS validator. What problems are there?

(Log in to enter your solution to this exercise.)

Summary

Errors in CSS can be hard to spot. There are tools that can help.

  • An editor like Netbeans can check your typing.
  • MeasureIt is a Firefix add-on that helps you figure out exactly how things are positioned.

What now?

All the pieces are in place. Let’s see how you can make a liquid layout.


How to...

Lessons

User login

Log in problems? Try here


Dogs