Key CSS Concepts & Debugging
Submitted by webmaster@yamhi... on Thu, 03/22/2007 - 05:52.
HTML layout items (<p>, <li>, etc.) are plain, coded with one or more class names or with an ID. The later two are CSS styling.
- <p> = plain paragraph, inheriting its style information
- <p.myclass> is styled with any .myclass styles defined in the .css files
- <p id=myid> is styled with an myid styles defined in the .css files
CSS styles can be inherited from enclosing HTML tags, providing a hierarchical control of display, so you can define the outermost level and have the insides follow along without having to code them all too. Additionally, some control features interact, especially as it relates to display space around or inside objects. For example, in a table cell -- “padding” is the space around an object, say a box -- that buffers it from it’s surround; “margin is space inside the box that buffers it from what it encloses. If the space is wrong, is it because of the margin of the enclosing box or because of the padding of the enclosed box. Anyway, this get further complicated by trying to figure out where in the hierarchy the padding and margin definitions are actually coming from.
Debugging when the display isn’t what you’d like because it can be hard to figure out exactly which element or interaction of elements is causing the problem.
Here’s a basic strategy, though if trying the obvious doesn’t work:
- read the generated source code ([Firefox] View > Page Source, [Safari] View > View Source) for the page you’re having trouble with and print it out
- note two things: at the top, what order the .css style sheets are being read (you will want to both find them and note their order)
- when you find the file reference for the css files, go to <your site>/<style sheet address>.css and print out a copy
- find the point in your source file where the element that isn’t dislaying right is at
- the first thing to try is to look at your problem element and the elements of code before (enclosing) your problem element -- say a <div> or <td> or whatever and look back a few of those enclosing them and look for the class definitions (<div class=myclass>) and/or id definitions (<div id=myid>)). Now look at the style sheets, starting at the end (last read in) looking for definitions of those classes & ids for those elements. Try overriding their definitions in your own CSS to try and fix the problem.
- if that doesn’t work, take a more systematic approach, with two main concepts: make a map of the document layout structure and show the borders of the enclosing areas to be sure you know where the issues are
- starting from the beginning of your page’s view source html, draw a map of boxes of each element: <body> is a box of the entire page, a <table> is a box inside that, a row is a box inside that, at the top which box contains three cells (<td>) ,etc. Use a pencil as you’ll probabaly have to make adjustments as you read through and learn of new elements contained that may need more space inside an enclosing box. Attached is an example used in debugging some nastiness in the nice_menus.css module and its display (style.css).
- if you are having trouble identifying exactly where isses are coming from that are affecting, especially spacing, add custom CSS code (see xxx) to add/adjust the border display of elements and refresh your page, so that you get a box drawn on screen around your text, table cells , table row, etc. so you can figure out if the space is inside or outside an element, etc. Use different colors on the borders to tell them apart more clearly.
- Finally, set the element, or its enclosing ones, or different classes or ids to new positioning or other values in your custom CSS to see how things change on your page
- Good luck! Be patient! It can take a while, and a lot of page reloads, to isolate a problem.