CSS Style Diagrams - working out where attributes come from

Archive - Originally posted on "The Horse's Mouth" - 2009-06-08 07:11:54 - Graham Ellis
I have just been helping a customer who's got a problem with white text on a white background ... and hasn't been able to easily identify where the problem lies. Some of his code looks like this:

<div id="Layer6">

    <div align="center" class="style11 style13">

      <div align="left" class="style17">

          <span class="style12">[Phone no]</span>

       </div>

    </div>

</div>

And I found myself struggling as well! The solution is to draw up a diagram showing the nesting and where each of the relevant attributes is sourced from ... filling in a table that looks something like this:

That will then give him (or me or you) a firm foundation on which to edit the source and experiment to confirm the analysis, which it turn will lead on towards a solution. I suspect the problem will become quickly apparent!

I made one further little suggestion - is there any way he could rename some of his styles? Using words like "style17" doesn't make them very self-descriptive, and so it is very easy for logic errors to slip in. In fact, I suspect that the customer's problem relates to the style called "style11 style13" which may be a typo. We tend to use words like "bodytext" and "headline" for our styles, and it makes the analysis much easier.

Comment - Caitlinn says ...

... "style11 style13" means that they are applying both style11 AND style13 to the div and it is correct syntax for combining classes.

That is one serious case of div-itis. Any way they could use HTML elements rather than so many divs? That too would help them to better understand their layout and probably cut down on the use of some many styles.

Main Content

CSS Style Diagrams - working out where attributes come from