So you made a layout or you took some code here and there and your layout has some problems. Well this first tutorial on how to “Debug your layout” will focus on investigating the CSS that can have an impact on the elements that you wish to debug.

In this tutorial you’ll learn :

• How to view the HTML source of an element
• How to view the CSS that is modifying a selected element
• How to modify CSS for a selected HTML element without HTML code manipulation and without reloading the window

Get FireFox and FireBug

First, you’ll need to use Firefox (it’s another browser like Internet Explorer) and the FireBug extension for Firefox (it’s a plug-in for FireFox that helps debugging HTML layouts). You can download those two programs there :

• Firebug extension for FireFox

(note : these two programs are 100% free !)

If you still have trouble installing FireFox, read this really nice and basic tutorial on how to install FireFox

FireBug basics for inspecting your MySpace profile page

After the installation of FireFox and FireBug, you’ll have this little icon at the bottom right of FireFox :

Just click on it and it should bring up FireBug. It will look similar to that :

In this first tutorial, we will focus on the “Inspect” button and the “HTML thumbnail” of Firebug as illustrated in this image :

First, we will experiment with FireBug. Go to any website (or, for the purpose of the tutorial, to your MySpace profile page), open Firebug, click on the “Inspect” button and move your mouse on your MySpace profile page. You’ll notice that the FireBug “main window” highlight the HTML source of the element that is just under your cursor. That’s some kind of “quick focus” on the HTML source of the element that you want.

FireBug and HTML elements

Now we know that we can move our mouse over stuff, but lets get a little farther… While you are in the “Inspect mode” (you just clicked the Inspect button and you can move your mouse over stuff and get the HTML in Firebug’s window), choose an interesting element in your MySpace profile (or anything really… an image, a text, whatever) and click on it. If it’s a link, it won’t bring you the page of the link because you were still in “Firebug’s Inspect mode”. Look at Firebug’s “main window” and you’ll see that the source of the element you clicked is selected.
Here is a little image to illustrate the steps so far :

For the example, I used MySpace home page, so all the tricks here are also good on any HTML web page, not only your MySpace profile ! ;). Anyway, so you see that the blue box here is a DIV, with the id “splash_greybox” (grey box? it’s blue!!)… So it’s some kind of magic “focus the HTML source of the element that I clicked in all the site’s source”… or something like that

FireBug, CSS styles and “on the fly” modifications

The coolest option of Firebug is that you can see not just the HTML source of the element, but all the style sheets (in the little right window) that transform the element. You know what’s more hot than that? You can add, remove, edit CSS properties on selected elements on the fly and see the result without reloading the whole page ! It’s so cool that it’s a tool that a lot of web designers and developers are using (I’m using it at work !).
Here is a little example :

You can see here the CSS elements of the little blue box I clicked earlier. I also disable on the fly the “background-color” property to see what whould happen. So here is what you can do with the Firebug CSS window (the little window on the right) :

• Disable a css property : Just like I said (you are not listening? :P), just click on the left of the property that you wish to disable. You’ll see a grey icon, and when you click it will be red and will stay there.
• Add a property : To add a property, right click on the class/id you where you want to add that property and click on “New property…”
• Modify a property value : To modify a css property, simply click on the value of the property in the CSS window and you’ll be able to change it. Press ENTER and you’ll see what are the impacts of the change.

FireBug final CSS explanations

Ok, so you can modify an HTML page on the fly without having to reload the Window… You can test modifications on your own MySpace profile without having to edit your “About me” section and saving all the stuff… Isn’t that great ?! Now, here are some final explanations of the CSS window. If you see a “strikethrough” element in Firebug’s CSS window, it means that it’s not applying the CSS property because another CSS property has the priority over it. Also, you can see where is the CSS coming from (is it a file, from the page directly?). You’ll see this over the CSS declarations, it will have the name of the file it’s coming from or if it comes from the page directly, it will have the name of the HTML page. So you’ll be able to find quickly where the “bad css” is coming from if you have a profile with graphic problems, if you are using a lot of codes or if you wish to debug your own layout !