Hello Michel,

I don't pretend to give an exact answer here but a couple of days ago I read somewhere that browsers apply complex algorithms in order to display the page using the styles you put into CSS files. If so, I think the order in which you define your classes may affect this algorithms' behaviour ...

>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?