CSS not actually cascading

[TeviH]

Hello!

I am building a site which will be translated into 15 languages. In the css, I am using generic styles for some parts, and then targeting specific areas using a programmatically set body class (body.de for German, body.ru for Russian for example).

What I did was I listed the language-specific styles first, and then the generic styles which applied to all languages last. The problem is, the language-specific styles overruled generic styles, which is shouldn't. For example, in the following snippit, the first line overrode styles meant for the sub-navigation which were not supposed to be overridden.

body.de #topnav ul li { margin: 0 13px 0 0; padding: 0 13px 0 0;}

#topnav ul li ul li { padding: 0; margin: 0;}

I would have thought that the second line would be the active code! And in fact, IE displays it as I would have thought. FF is the one that's giving me the problem.

Who's right? And how do I fix this without having to declare all 15 languages in all the generic styles?

 

[nasaboy007]

This is the order of... overridding:

1. Inline Body CSS (<span style="text-decoration: none;">text</span>)
2. Inline Header CSS (<style>p { text-decoration: none; }</style>)
3. Linked Style Sheets (<link etc in head)

The one at the top takes precedence over those below. I believe that the order within those also matters and depending on the browser it renders either the first or the last one. Try changing what order you have your included styles.

Otherwise, read up about the !important rule in CSS (http://www.w3.org/TR/CSS2/cascade.html) and see if that can help you.

 

[RageD]

It's easiest to just follow XHTML 1.0 Strict Guidelines IMO this way you completely separate structure from design keeping things simple.

-RageD