Troubleshooting II: Son of Troubleshooting

More thoughts on What To Do When It Isn’t Working.

Those of you who have had a little experience with Cascading Stylesheets will probably already know this one, but it’s one of my favorites. You can style just about any tag to act like just about any other tag, of course. You can make all of your strong text italic, or all of your emphasized text look like H4 headings. But you can also draw a border around any visible element on your page.

This is really where CSS has it all over Tables, when it comes to design. You can add a border to your table, of course, but it places a border around everything that sketches out the table. Headings, rows, columns, cells and the outer edge of the table, itself. With CSS, you can style borders around only the fourth cell in a row.

So, td td td td { border: 1px solid green; } will place a one-pixel border around any cell that is fourth in a sequence, so remember that if your row has five boxes, it may have two “fourth boxes”, the 1-2-3-fourth box and also the 2-3-4-fifth fourth box. You have even more control. td td td td { border-bottom: 1px dotted red; } places a dotted red line at the bottom of that third box. Pretty neat, huh?

So, how does any of this help you when it comes to Stuff Not Looking Right? You can easily lose track of spans and divisions and columns and paragraphs and all of their various margins and paddings and so on. So, when it doubt, put a border around it!

I cannot begin to count the number of times I was not sure why something was not getting better as I tweaked this or that element, only to draw a box around something and discover I wasn’t even working on the right area of the page! With today’s pages full of zenboxes and columns and so on it can be easy to get off into an area where you think you are working in one part of the page, only to find that you are actually adjusting some other page element.

Again, table borders go around everything in the table. Adding { border: 1px solid blue; } to a table in CSS, however, just draws a box around the outer edges.

Where this is all really useful is in figuring out how various spatial adjustments will affect our pages. The two most-common CSS rules are probably going to be margin and padding. We remember from our HTML training that we have an image, a portrait. Surrounding that, we have padding, like the matte. Then comes the border, similar to the frame of the portrait, and finally we have the space outside of the border, like the room outside of the frame, which we call margin.

You have an image that you want flush-right against the right column of your page. If you apply padding of 1 em-unit all of the way around that image ( padding: 1em; ), you will be creating an air space equal to the size of the M character over the top, down the right side, across under the bottom and up the left side. Get used to traveling clockwise around the box. If you need help, remember that “Margins and Padding are TRouBLe”. T-R-B-L, Top, Right, Bottom and Left. Those are the order we specify margin and padding limits.

After adding some space around your photo, you may now be unhappy because all of the text on your page lines up at the edge of its container, but the right-most edge of the picture itself is back to the right a character or two, and its apparent top isn’t aligned with the first line of text, but aligns closer to the second line. The way to fix this would be to assign no padding at all to the top and the right, but keeping it in effect for the bottom and the left-side of the photo. Padding: 0 0 1em 1em; will do that for you. Remember TRouBLe. We are assigning a value of zero to the top padding, zero again to the right-side padding, 1em to the bottom and another 1em to the left side.

Some of these adjustments can be pretty subtle and depending upon the vagaries of servers and connections, you may not be able to simply refresh your browser quickly enough to see the difference. But if you draw a box around your image, it will be much clearer. In your stylesheet, img { border: 1px solid orange; } will place a one-pixel line around your image. Some people also like to color a background when using padding. Background-color: #353535; will place a dark gray background color anywhere you have visible padding.

Three things are important here. Choose a color that contrasts easily with the rest of the material on your page. If your page includes a lot of browns and greens, choose a bright yellow or pink for your border color or background-color. Secondly, if things are really tight, you may find that adding a 1-pixel border around elements destroys some of the design. Imagine a full-width container of 800 pixels for your page. Now you fill that with three boxes, one 350-pixels wide, one that’s 150-pixels wide and one that’s 300-pixels wide. There’s your 800, right? What do you suppose will happen, if you add a 1-pixel border around that middle box? Remember, you have a pixel on the left, and a pixel on the right to contend with.

Finally, remember to delete these little tricks before you walk away from your page. It may confuse your visitors if they happen upon a page with little lines drawn around various elements for no apparent reason.