Firebug Tutorial

Continuing the discussion from Simplified responsive header logo image and text - #21 by graecille

I will use the Services page to demonstrate a common use of Firebug as a troubleshooting tool. If one does not understand basic HTML and CSS, Firebug is practically useless because it does not give answers to problems, it gives information that one can use to solve the problem.

Nothing that I demonstrate will make a big difference in the appearance of your web page, just small differences. But the important thing is that the techniques can be applied to other situations to solve more obvious issues.

Here’s the idea…

The two boxes containing the lists are not centered… they are slightly off-center to the left. I’m not concerned about the lists, only their containers. We will use Firebug to find out why the boxes are not centered and to test a solution that centers them.

I believe that you have Firebug installed, but if you don’t, please do install it at asap. All tools take a little gettings-used-to.

By default, Firebug opens at the bottom of the browser window. That location can be changed.

Left-click the Firebug icon and an options menu appears. As the bullet indicates, Firebug UI Location is at the Bottom of the screen. To change the location, select another of the options. I usually have Firebug in its own window and detached from my browser so I have more room to work.

1 Like

Hi Ron,

I am getting the same as your screenshot when I click on Firebug - where to from here?

1 Like

I am still working on the write-ups with the screen-shots. It should take another day to finish the next few. But here is a start. If you have any trouble following my rather brief descriptions or the logic behind anything that I am doing, please do not hesitate to say so.

To use Firebug…

You should have an element that you wish to inspect in mind already.

1. Click the Inspect button.

2. Move the mouse to the element that you wish to inspect.
NOTE: the blue outline around the element. Blue outlines will appear as the mouse moves over the web page. Their purpose is to help you pinpoint the element you wish to inspect. In this case, if the pointer were moved further inside the box, the <ul> element would be outlined, a little further in and the individual <li> elements would be outlined.
CLICK the mouse on the element that you wish to inspect.

3. Firebug will show you the HTML code.

4. Firebug will also show you the CSS rules being applied. There may be a series of properties overriding one another. Those overridden will be lined through. CAUTION: A lined through shortcut property (think margins and padding) may not be entirely overridden.

5. Firebug shows exactly where to find the CSS rules.

6. Hover over the HTML and watch the colors on and around the chosen element.

7. Transparent blue is the content area.
Purple is padding.
Yellow is margin.

8. Both boxes are class “one_half”. The CSS confirms that there is far more left margin than right margin assigned which suggests that the boxes are left aligned and are being apparently centered with the percent margin-left.

9. What is an easy way to test to see if indeed the boxes are left-aligned as we suspect? We could delete the horizontal margins or reduce the width of the boxes and see if the boxes move to the left.

9. Using Firebug, I reduced the width from 42% to 36% to see what would happen. The boxes became narrower and moved to the left confirming that they are left-aligned.

(looks like I skipped “10”)

11. How can one center-align inline-block boxes? We need to apply {text-align:center} to the parent container.
HOWEVER, before we do that, let’s decide how to get rid of the unbalanced margins on the two containers, otherwise the boxes will simply be off-center to the right instead of to the left.
a). We can apply .one_half:first-child {margin-left:1%}. That will leave the separation of the boxes unchanged at 5%. That would work.
b) However, I would prefer to assign equal margins to both sides of the div.one_half containers, if practical - and in this case, it is. So using Firebug again, let’s change the margins from margin-left:4%; margin-right:1%; to margin-left and right 2.5%. (I’m showing 2% in the screenshots.) Remember, these are temporary changes. If you reload the page, the Firebug changes go away. To make the change, click the existing property value and type a new value.

12. Confirm the assignment by hovering over the HTML code in Firebug and viewing the yellow margins.
You can slide the mouse up in the HTML (left panel) to the other div.one_half and view the colors of the left box.

 

This is as far as I have prepared. I’m working on the next step now. :slight_smile:
It should be ready tomorrow evening.

3 Likes

Hi Ron,

Yes, I sort of see how it works. It appeared I could do these changes within the CSS in Firebug and the live version apeared to reflect the changes. Is that the idea of it, where you can test it and then do the proper changes and upload. However the left & right margins of both boxes are not even, it is all slightly to the left. However I may be jumping the gun and that may be what you are leading on to.
Cheers.

It is really, really important that you understand the basics of how Firebug works so it can show you how dimensions, margins and padding are affecting your code and where the CSS is located on the stylesheet(s). So, please do not hesitate to talk about any questions or doubts that you have.

As I mentioned earlier, Firebug gives information about the code on a page, it does not create solutions. That is where your knowledge of HTML and CSS come into play. With Firebug, you can test changes before committing the change to a stylesheet.

Yes, that is the idea.!!!.

Yes, that is where I left off. I’ll try to finish the procedure and screenshots today.

In this next step, we learn one more Firebug “how-to”… How To add a property to an existing rule.

As I mentioned at the beginning of step #11, to center align the boxes we need to apply {text-align:center} to the parent container of the .one_half boxes. You can read the HTML in an editor or use Firebug and see that the parent container of the .one_half boxes is a div with class “post”.

13. In Firebug, Click the HTML <div class="post">. The selector and rules will appear in the right column along with the CSS filename and line number where the selector is located, just as before.

14. To apply a new property to the .post selector using Firebug, right-click over the selector in the right pane and choose “New Property…”.

 
15. An empty box will appear at the bottom of the .post properties where you can type {text-align:center}.

 
16. You should see the .one_half boxes center promptly when {text-align:center} is properly entered.

 
17. One last change… move the mouse down the left pane and click either of the .one_half boxes again and change the width from 36% back to 42%. The boxes should spring wider and remain centered.

 
The changes you would make on your stylesheet to properly center those boxes are:
1) change the margins around the divs .one_half to 2.5% left and right, and
2) assign text-align:center to .post

 
End of first Firebug exercise.

2 Likes

Hi Ron,

Thanks for that. Everything appeared as supposed to. I have made changes to the CSS styles, but not uploaded live yet in case you were doing something and didn’t want to over-write you.
Cheers.

Please go ahead and upload the two CSS changes to the live site.

I’ll assume that you were able to follow my “train of thought”-with-screenshots style of presenting a method of analyzing and solving the issue. A measure of success would be for you to utilize a similar logical routine to solve a different problem. Therefore,

Part 2 of the Firebug tutorial is a challenge to you :eek:

The headers in the .one_fourth boxes, “Carpentry”, “Painting”, “Drywall”, “Decking”, etc, are slightly off-center to the left, as are the smaller headers, “Various Building Services”, “Painting Renovations”, etc.

Your challenge is to find the culprits and fix them.

Here’s a clue. You only need to change one value in one declaration to fix each ruleset (all of the headings are targeted by one ruleset and all of the smaller headings are targeted by the other ruleset). The solution to the smaller heading is more obvious. Firebug will help you identify the cause of the problem and your knowledge of CSS will provide the fix. Review the first exercise, if necessary.

It should be easy. If not, let me know and I’ll make a series of screenshots.

It is vital that you understand how to use Firebug to evaluate HTML and CSS. You may not recognize the code in your revised site without it.

Hi Ron,

Where Firebug puts a line thru the code, should I remove all of those?

First an important reminder… Firebug is showing the CSS rules that are being applied to your HTML. By themselves, declarations that are lined-through are not indications of problems. They simply show that they have been partially or fully overridden later in the cascade. This may be expected.

As I said in the first paragraph of this topic:

Back on topic, in post #3:

You should not remove or change code until you have determined that it is causing a problem on the page that you see in your browser, and you should test that “fix” using Firebug first. You don’t want to break perfectly good CSS

Firebug is there to help you make that determination.

If Firebug shows a line through a padding property like this:

.thisclass {padding:10px 10px 10px 0}
(read as: {padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:0;})

Look above it in Firebug for something that might override one or more of the values. For example

.thisclass {padding-right:0}

would override only the right value, but Firebug would show a line through all of the original property and values.

You have to mentally realize that the padding being applied to the selector being examined is
.thisclass {padding:10px 0}
(read as: {padding-top:10px; padding-bottom:10px; padding-left:0; padding-right:0;})

No, do not assume that values that appear to have been overridden should be removed. You must determine if all of the lined-through values are being overridden or if just one or two are being overridden. That answer will be found by evaluating the information in the column of code that Firebug is showing.

The “proof of the pudding” will be seen in Firefox as you make temporary changes using Firebug.

2 Likes

Also remember that when Firebug shows properties with a line through, it is only showing that those properties are being over-ridden for the element you are currently viewing; they may be (and probably are) still used by other elements elsewhere.

For example, an element on one of my sites shows that all the styles being inherited from “body” are being over-ridden.

But that element is just a Facebook button, for which Facebook is dictating the styling. I very definitely don’t want to delete those styles, which are used throughout the rest of the site.

3 Likes

Hi, @graecille,

Moving right along… the <h3> headers (within the red outline) on the Services page are slightly off-center to the left in each box.

When we used Firebug earlier, we found that a less-than-ideal technique with margins contributed to the unordered list container boxes being slightly off-center to the left. Let’s see if a less-than-ideal use of margins is the culprit here, too.

(BTW - As an experiment, I have placed the images above most of my narrative this time. Please let me know if this is more or less confusing :slight_smile: )

 

1) Begin by clicking the small arrow in the left end of the Firebug toolbar to “prime” Firebug to explore an element.

2) Drag the mouse to one of the <h3> headers. The relevant HTML and CSS code will appear in the Firebug panes. Notice the blue outline around the header and notice that it is slightly off-center to the left.

2*) Click the element so the code that is showing doesn’t scroll away when you move the mouse away from the <h3> element.

 

3) Position the mouse pointer over the highlighted HTML element in the left Firebug pane.

4) Observe the colors applied to the header element being inspected by Firebug. Light blue is the content area. Yellow reveals margins. There is no purple padding.

5) One can see in the right pane that the <h3> element is being styled in three locations, but margins are being applied in only one of those locations.

.post h3 {
    margin:15px 15px 15px 0;  /* read: top right bottom left */
}

From the code one can see that there is 15px of margin-right but zero margin-left being applied. As shown by the Firebug coloring of the element, the {margin-right:15px} is reducing the width of the content portion of the h3 container on the right end and causing the text to appear off-center to the left.

 

One can use Firebug to temporarily change the {margin-right:15px;} to {margin-right:0;} to see if that fixes the header centering problem.

6) Highlight the value to be changed.

7) Type the new value.

8) Be aware that Firebug may reformat the shorthand.

 

9) By hovering over the <h3> header element in the HTML pane, one can see that the yellow margin-right no longer exists. With that confirmation, we can confidently make the change in our css sheet that will properly center the text in all of these <h3> elements.

Code from styles.css (line 306)

.post h3 {
    font : bold 1.25em arial, georgia, times;
    color : #000;
    margin : 15px 15px 5px 0;  /* read: top right bottom left *//* CHANGE THIS to one of the following formats... */
/*    margin : 15px 0 5px 0;  /* Four value shortcut, read: top right bottom left */
/*    margin : 15px 0 5px;   /* Three value shortcut, read: top right-&-left bottom */
    padding : 0;
    text-align : center;
}
2 Likes

Hi Ron,

Thanks for the instructions, I had already done it 15px 5px 10px 5px prior to receiving this
instruction and it appears to have worked. Now uploaded.

It is right?

It looks good! Looks like you managed the <h2> element, too.

The only problem with youjr choice of using 5px of horizontal margin is that it is totally unnecessary. Nothing is gained by applying it. In fact, at narrow widths, 10px of width is lost and that is a waste.

I do not recommend applying any property or value that is not needed.

@graecille, You haven’t mentioned Firebug.

I would like to ask if the Firebug procedures have been of any value to you? Have you learned anything that helps you work with HTML and CSS?

If not, I need to hear that, too. :slight_smile:

Hi Ron,

Yes, the Firebug tutorials have been very helpful, I am starting to get the gist of it now.

I also noticed in Firebug where the margin was 15px 5px 15px 5px, Firebug reduced it to just 15px 5px so I have now done the same.

What would happen if you changed it to 15px 0 ?

In fact, what happens if you comment out that margin property altogether? so it is no longer part of the rule.

From the notes in the tutorials, hopefully you understand what that difference represents. Firebug is simply displaying your code in a shorter, more efficient format.

I see. Another bug has reared its’ head. When I added .post p { text-align: justify; }

I ended up centering the text nicely, but UN-centering my original boxes which we had added text-align:center;, so I added the property back in again but the boxes never reset. I guess something is over-riding it.