I faced a bizarre problem today when I was working with a stylesheet. My stylesheet contains various classes for table formatting. One class is formatting a table with borders. Another class is formatting a table with no border. So, when I have a table which calls the class to format it with borders, sometimes, I'll also have another table inside it which I'll call my no border class. Basically, it's like when creating a message here on the Universal Thread. I have a main table with borders. Then, to align the forum, the category and the title fields, I have another table which is using the class for no border.

So far, so good, I never had any problem with that. Today, I added another class in my stylesheet to have graphical backgrounds for tables. So, I added the definition at the end of the my stylesheet. Surprised I was when I discover that I was not able to have my no border table class to be shown with no border. It took me a while to figure that the order of class definitions inside a stylesheet has to respect the cascade calling sequence even if the class do not relate to each other.

This code shows a section of my stylesheet:

TABLE.LISTBackground
{
   BACKGROUND: url(http://www.levelextreme.com/tableback.gif);
   BORDER-BOTTOM: #000000 1px solid;
   BORDER-LEFT: #000000 0px solid;
   BORDER-RIGHT: #000000 1px solid;
   BORDER-TOP: #000000 0px solid;
}

TABLE.LISTBackground TD
{
   BORDER-BOTTOM: #000000 0px solid;
   BORDER-LEFT: #000000 1px solid;
   BORDER-RIGHT: #000000 0px solid;
   BORDER-TOP: #000000 1px solid;
}

TABLE.LISTBackground TH
{
   BACKGROUND: url(http://www.levelextreme.com/tableheader.gif);
   BORDER-BOTTOM: #000000 0px solid;
   BORDER-LEFT: #000000 1px solid;
   BORDER-RIGHT: #000000 0px solid;
   BORDER-TOP: #000000 1px solid;
   COLOR: #FFFFFF;
}

TABLE.INVISIBLE
{
   BORDER-BOTTOM: #000000 0px solid;
   BORDER-LEFT: #000000 0px solid;
   BORDER-RIGHT: #000000 0px solid;
   BORDER-TOP: #000000 0px solid;
}
TABLE.INVISIBLE TD
{
   BORDER-BOTTOM: #000000 0px solid;
   BORDER-LEFT: #000000 0px solid;
   BORDER-RIGHT: #000000 0px solid;
   BORDER-TOP: #000000 0px solid;
}
TABLE.INVISIBLE TH
{
   BORDER-BOTTOM: #000000 0px solid;
   BORDER-LEFT: #000000 0px solid;
   BORDER-RIGHT: #000000 0px solid;
   BORDER-TOP: #000000 0px solid;
}

If I have the LISTBackground class after the definition of the INVISIBLE class, it doesn't work. Why is it like that?