CSS for table with special error formatting

[radi8]

With my site, I have a lot of form validation going on. If a user has an error in a form (table based), I want to highlight the row by set the TH cell background color to RED and change the TH cell text color to BOLD WHITE. CSS can do all this, but I need some help in making it work.

 

Currently, my CSS will format the table for normal operation and display of good (or validated) data. I need to add to this so that I can change the one row to highlight the invalid entry or data.

 

Here is my current CSS which works nicely to format the table for easy viewing:

table.reference{
    border: 1px solid #c3c3c3;
    border-collapse: collapse;
}
table.reference caption{
    background-color: #e5eecc;
    border: 1px solid #c3c3c3;
    padding: 3px;
    vertical-align: top;
    font-size: 100%;
    font-weight: bold;
}
table.reference th{
    background-color: #e5eecc;
    border: 1px solid #c3c3c3;
    padding: 3px;
    vertical-align: top;
}

table.reference td{
    border: 1px solid #c3c3c3;
    padding: 3px;
    vertical-align: top;
}

[radi8]

I should have looked a little more, this resolves the issue:

 

table.reference{
    border: 1px solid #c3c3c3;
    border-collapse: collapse;
}
table.reference caption{
    background-color: #e5eecc;
    border: 1px solid #c3c3c3;
    padding: 3px;
    vertical-align: top;
    font-size: 100%;
    font-weight: bold;
}
table.reference th{
    background-color: #e5eecc;
    border: 1px solid #c3c3c3;
    padding: 3px;
    vertical-align: top;
}
// ADD THIS STANZA
table.reference tr.error th{
    background-color: #ff0000;
    color:white;
    font-weight: bold;
    border: 1px solid #c3c3c3;
    padding: 3px;
    vertical-align: top;
}
// END NEW STANZA
table.reference td{
    border: 1px solid #c3c3c3;
    padding: 3px;
    vertical-align: top;
}

 

usage:

<table class="reference" width="400" border="1" align=center>
     <caption>
     <?php print $formHeading; ?>
     </caption>
          <?php
               if($_formError['error'])print $_formError['message'];
          ?>
          <tr>

// where the $_fromError['message'] is formatted like so:
$msg='<tr class="error"><th colspan="3">The following errors occurred while processing your login:<br>';
// continue to build output...
$_frmError['message']=$msg;

[cssfreakie]

i can really recommend you use a reset.css, (if you don't allready) to eliminated most browser differences.

I assume your original issue was solved?

cheers!

[radi8]

I have no friggin idea what the heck a reset.css is. I love it when this type of terminology is quoted but NO references or explanation are provided.

 

But yes, the problem is solved.

[cssfreakie]

:olol are you facking serious :o. next time you ask for help and you don't know what someone means either ask in a gentle/polite way instead of implicitly push them of a building. Or use a search engine! i hope that last things rings a bell in fact. if you would have googled:

 

What is a reset.css ? this would have been the result :

http://lmgtfy.com/?q=what+is+a+reset.css&l=1

 

I hope you know what google is right?

 

Edit and what a reset.css was is provided (minified) in the exact same sentence. this is what BA baracus tell's

[radi8]

I d apologize for the tone of my previous reply, but yours was way overboard and totally childish. Typically, when a submission to a question is provided, the response should be as concise and complete as possible.

 

I will try to be more 'friendly' to bad replies in the future.

[cssfreakie]

overboard and childish it may be, but that doesn't make my prior post incorrect or less accurate.

a reset.css is a common term and for fack sake i explained what is was:

i can really recommend you use a reset.css, (if you don't allready) to eliminated most browser differences.

besides that it was extremely easy to find. All i wanted to do is help you out since tables are by far the most cross browser facked objects because of all the different paddings/margins line height issues etc. BUt sure mark my first post as bad, non concise and incomplete. and i quote:

the response should be as concise and complete as possible.

 

I will try to be more 'friendly' to bad replies in the future.

lol just read that again