CSS Class Overwrite 1

[Ascalonian]

Say I have a <TD> element defined as:

    <td class="leftAlign rightAlign" id="testTD">
         Align Me!
    </td>

In leftAlign, I have it align the text to the left. The opposite in the right.

When I do this, the text is always left aligned. I would think rightAlign would overwrite this.

Am I understanding this wrong?

PS... The only way to make it right aligned is to put "! important" into the class directly.

 

[vacunita]

Depends on what order you have them in in your CSS.

The lowest one will take precedence over the higher one.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Ascalonian]

So in my example, rightAlign should have trumped leftAlign. Correct? That is what I expected to happen, but it is not happening.

 

[ca8msm]

No, as vacunita said, it depends on what order they are defined in the CSS, not the order in the HTML.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[vacunita]

Again depends on their position in your CSS.

for example:

.class1{
border: 1px solid red;
}

.class2{
border: 2px solid blue;
}

<div class="class1 class2"></div>

class2 being lower in the CS definition would get applied last, and override the border definition of class1.




even if i did:
<div class="class2 class1"></div>

class2 would still override class1 because its lower in the definition.




----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Ascalonian]

Each class is in a different file actually (don't ask why, haha). And rightAlign is imported after the leftAlign file. This just does not make sense.

 

[vacunita]

Try adding a comma between your class names, see if that fixes it. It should make the second class overwrite the first one.

 <td class="leftAlign[red],[/red] rightAlign" id="testTD">

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Ascalonian]

Yep, the comma fixed it. Thanks vacunita!

 

[vacunita]

glad I could help.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.