Inheritance not seeming to work.

mmerlinn Prominent Member

Messages:: 3,197

Likes Received:: 818

Best Answers:: 7

Trophy Points:: 320

#1

I am having trouble getting my CSS to work the way I think it should work. New to CSS, so maybe my expectations are flawed.

Anyhow, listed below are two snippets of HTML code and the relevant CSS markup.

This bit of HTML does not work like I think it should. All data cells are the same color which is NOT what I want. My thoughts are that the subColor CSS should override the RowColor6 CSS, but that is not happening.

**********

<TR CLASS='RowColor6'> <TD> Cell 1 </TD> <TD CLASS='subColor' COLSPAN='5'> Cell 2 </TD> <TD> Cell 3 </TD> </TR>

Code (markup):

**********

The following code DOES display data cells in two different colors, exactly like I want. However, my thinking is that I should NOT need to explicitly address every cell in a row when only one cell is different.

**********

<TR> <TD CLASS='stockAvail6'> Cell 1 </TD> <TD CLASS='subColor' COLSPAN='5'> Cell 2 </TD> <TD CLASS='stockAvail6'> Cell 3 </TD> </TR>

Code (markup):

**********

The relevant CSS is:

**********

.stockAvail6 { background: #FFF; } .subColor { background: #CFC; } .RowColor6 td, .RowColor6 th { background: #FFF; }

Code (markup):

**********

I would like to know what I am doing wrong here. I have tried figuring it out, but after spending two weeks on this issue I am ready for @deathshadow to set me straight.

Last edited by a moderator: Jul 18, 2016

mmerlinn, Jul 10, 2016 IP

PoPSiCLe Illustrious Member

Messages:: 4,623

Likes Received:: 725

Best Answers:: 152

Trophy Points:: 470

#2

First off, use the [ code ] inserts when pasting code. Please, for the love of god.

Second, I think you're missing a bit about inheritance and specificity.

Your code won't work, because the .RowColor6 td is more specific than the .subColor rule.

Also, inheritance is just that - the things that are posted first gets overwritten by the things defined later.

The following code works (I think) - I changed some colors to make it easier to see when I tested:
<!DOCTYPE html>
 <html>
 <head>
 <title>Blah</title>
 <style type="text/css">
 tr {
 background: blue;
 }
 .RowColor6 {
 background: red;
 }

 .stockAvail6 {
 background: #FFF;
 }

 .subColor {
 background: #CFC;
 }
 </style>
 </head>
 <body>
<table>
 <tr class="RowColor6">
 <td>Cell 1</td>
 <td class="subColor" colspan="5">Cell 2</td>
 <td>Cell 3</td>
 </tr>
 <tr>
 <td class="stockAvail6">Cell 1</td>
 <td class="subColor" colspan="5">Cell 2</td>
 <td class="stockAvail6">Cell 3</td>
 </tr>
</table>
</body>
</html>
PHP:
There's not really any reason to specify .RowColor6 td (the td after the class-selector) since it's gonna be all the td's in the row regardless (basically any children of the tr).

PoPSiCLe, Jul 10, 2016 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#3

@PoPSiCLe has it right that specificity is what's nabbing you here -- a parent class trumps a child's class. I would add to that that order also effects specificity, and some older browsers (IE7-) will in fact override a child class with the class if source order is reversed. They SHOULDN'T, but because some browsers do you are most always best off keeping your code in the order you want them applied... if you're going to override a value on some elements put the value being overridden FIRST.

Also while his suggestion of not targeting the TD and TH will work in some browsers, it too will fail in legacy browsers (and Safari if I'm not mistaken) if you still care about that, so the solution that would work better across all browsers would be to simply add the parent selector to it. That level of specificity targeting usually just makes more sense anyways...

So I'd have it more like:
.RowColor6 td,
.RowColor6 th {
	background: #FFF;
}
.RowColor6 .subColor {
	background: #CFC;
}
Code (markup):
Though I'm wondering why you've got RowColor uppercase at the start, why you're using pointlessly cryptic, uselessly vague and decidedly presentational classes like "RowColor6" and "subColor", why you have such massive colspans if these aren't THEAD or TFOOT rows (could it be you should have more than one table?), and why you'd need so many classes in the first place. In that same way the use of BOLD tags around what probably are NOT grammatical entity, groups, or proper names (as in professional writing) is semantic gibberish... leaving me wondering just what in blazes it is you're even outputting for content. Remember, your markup and even your classes/ID's should say what things ARE!

...but know how above I said all that stuff about "if you care about legacy browsers"? With things like colouration on tables I've said "OH WELL" to IE7/earlier getting such colouring and have just been using nth-child (IE9+ and RoW) or adjacent sibling selectors (IE8+ and RoW) instead of classes. The data would still be usable, just not as pretty -- so why waste the markup?

Really to say what the PROPER markup would be I'd need a full sample of the table and it's data, not some incomplete snippet with vague/presentational rubbish in it.

deathshadow, Jul 10, 2016 IP

mmerlinn Prominent Member

Messages:: 3,197

Likes Received:: 818

Best Answers:: 7

Trophy Points:: 320

#4

PoPSiCLe said: ↑

First off, use the [ code ] inserts when pasting code. Please, for the love of god..
Click to expand...

I did not put the code within code tags because the code would be INVISIBLE to me. The only way I have found to view code within code tags is to copy and paste it to a text editor. Obviously there is some setting on my computer that is wrong, but I have no clue where to find it so I can change it.

PoPSiCLe said: ↑

Second, I think you're missing a bit about inheritance and specificity.

Your code won't work, because the .RowColor6 td is more specific than the .subColor rule.

Also, inheritance is just that - the things that are posted first gets overwritten by the things defined later.
Click to expand...

I am absolutely missing a lot about inheritance. My understanding is that every child of a TR inherits from the TR, unless it is overridden. Obviously, my understanding is wrong in some way.

PoPSiCLe said: ↑

There's not really any reason to specify .RowColor6 td (the td after the class-selector) since it's gonna be all the td's in the row regardless (basically any children of the tr).
Click to expand...

For better visibility and testing I changed your sample code to:
<!DOCTYPE html>
 <html>
 <head>
 <title>Blah</title>
 <style type="text/css">
 tr {
 background: blue;
 }
 .RowColor6 {
 background: red;
 }


 .stockAvail6 {
 background: white;
 }

 .subColor {
 background: yellow;
 }
 </style>
 </head>
 <body>
<table>
 <tr class="RowColor6">
 <td class="stockAvail6">Cell 1</td>
 <td class="subColor" colspan="5">Cell 2</td>
 <td>Cell 3</td>
 </tr>
 <tr>
 <td class="stockAvail6">Cell 1</td>
 <td class="subColor" colspan="5">Cell 2</td>
 <td>Cell 3</td>
 </tr>
</table>
</body>
</html>
Code (markup):
The cells display as

WHITE, YELLOW, RED
WHITE, YELLOW, BLUE

This works for me.

Then I changed .RowColor6 in the following code:
<!DOCTYPE html>
 <html>
 <head>
 <title>Blah</title>
 <style type="text/css">
 tr {
 background: blue;
 }
 .RowColor6 td,
 .RowColor6 th {
 background: red;
 }

 .stockAvail6 {
 background: white;
 }

 .subColor {
 background: yellow;
 }
 </style>
 </head>
 <body>
<table>
 <tr class="RowColor6">
 <td class="stockAvail6">Cell 1</td>
 <td class="subColor" colspan="5">Cell 2</td>
 <td>Cell 3</td>
 </tr>
 <tr>
 <td class="stockAvail6">Cell 1</td>
 <td class="subColor" colspan="5">Cell 2</td>
 <td>Cell 3</td>
 </tr>
</table>
</body>
</html>
Code (markup):
The cells now display as

RED, RED, RED
WHITE, YELLOW, BLUE

This confuses me, since you say there should not be any difference whether the TD and TH are specified or not.

deathshadow said: ↑

@PoPSiCLe has it right that specificity is what's nabbing you here -- a parent class trumps a child's class. I would add to that that order also effects specificity, and some older browsers (IE7-) will in fact override a child class with the class if source order is reversed. They SHOULDN'T, but because some browsers do you are most always best off keeping your code in the order you want them applied... if you're going to override a value on some elements put the value being overridden FIRST.
Click to expand...

You say that the parent class trumps the child. Then you say that if I am going to override the parent that the child should be put first? I am confused here. Are you saying that the child (.subColor) needs to be defined BEFORE the parent (.RowColor6)?

Now if I keep the CSS code in the order that the browser will apply it, then I should define the parent (.RowColor6) before the child (.subColor). I am even more confused as I don't see how I can do BOTH in the same CSS file.

Further, I think CSS is bitch-slapping me back to the stone age of computing when order of application was required. Witness javascript 20 years ago when js would not work unless everything was in the order of application.

deathshadow said: ↑

Also while his suggestion of not targeting the TD and TH will work in some browsers, it too will fail in legacy browsers (and Safari if I'm not mistaken) if you still care about that, so the solution that would work better across all browsers would be to simply add the parent selector to it. That level of specificity targeting usually just makes more sense anyways...
Click to expand...

Note the sample code above. NOT targeting TD and TH works, while targeting them does NOT work. Since I do not want to limit my audience, I want the most widely useable CSS available.

I modified the CSS above a little more:
<!DOCTYPE html>
 <html>
 <head>
 <title>Blah</title>
 <style type="text/css">
 tr {
 background: blue;
 }
 .RowColor6 td,
 .RowColor6 th {
 background: red;
 }

 .stockAvail6 {
 background: white;
 }

 .RowColor6 .subColor {
 background: yellow;
 }
 </style>
 </head>
 <body>
<table>
 <tr class="RowColor6">
 <td class="stockAvail6">Cell 1</td>
 <td class="subColor" colspan="5">Cell 2</td>
 <td>Cell 3</td>
 </tr>
 <tr>
 <td class="stockAvail6">Cell 1</td>
 <td class="subColor" colspan="5">Cell 2</td>
 <td>Cell 3</td>
 </tr>
</table>
</body>
</html>
Code (markup):
Now the cells now display as

RED, YELLOW, RED
WHITE, BLUE, BLUE

Now I am even MORE confused.

Finally, I modified the CSS above a little more:
<!DOCTYPE html>
 <html>
 <head>
 <title>Blah</title>
 <style type="text/css">
 tr {
 background: blue;
 }
 .RowColor6 {
 background: red;
 }


 .stockAvail6 {
 background: white;
 }

 .RowColor6 .subColor {
 background: yellow;
 }
 </style>
 </head>
 <body>
<table>
 <tr class="RowColor6">
 <td class="stockAvail6">Cell 1</td>
 <td class="subColor" colspan="5">Cell 2</td>
 <td>Cell 3</td>
 </tr>
 <tr>
 <td class="stockAvail6">Cell 1</td>
 <td class="subColor" colspan="5">Cell 2</td>
 <td>Cell 3</td>
 </tr>
</table>
</body>
</html>
Code (markup):
Now the cells now display as

WHITE, YELLOW, RED
WHITE, BLUE, BLUE

I am so confused now that I am beginning to wonder why I even decided to begin using CSS.

Note that ALL of these changed ONLY the .RowColor6 and .subColor parts of the CSS. And to the best of my knowledge, based on what the two of you have said, ALL of them should produce the same results, but instead produce FOUR DIFFERENT results. WHAT AM I MISSING HERE? I need someone to baby step the way through this as I am totally lost.

deathshadow said: ↑

Though I'm wondering why you've got RowColor uppercase at the start, why you're using pointlessly cryptic, uselessly vague and decidedly presentational classes like "RowColor6" and "subColor", why you have such massive colspans if these aren't THEAD or TFOOT rows (could it be you should have more than one table?), and why you'd need so many classes in the first place. In that same way the use of BOLD tags around what probably are NOT grammatical entity, groups, or proper names (as in professional writing) is semantic gibberish... leaving me wondering just what in blazes it is you're even outputting for content. Remember, your markup and even your classes/ID's should say what things ARE!
Click to expand...

RowColor being initial uppercase was a typo which will be corrected in time. Figure there is no point in changing my FoxPro generator until after I get the CSS working.

RowColor6 is a direct spin off from .one, .two, and .three in http://www.cutcodedown.com/for_others/mmerlinn/screen.css which really does not say what things are either. Not sure how I can rename RowColor6 to something more expressive.

When I reduced the code for the example, I forgot to remove the colspan which is needed because the table is 8 columns wide and I needed to span 5 of them.

I don't know if I do need so many classes. Probably not, but until I learn otherwise this is what I have.

The content is not grammatical. It is just bits and pieces of information, some of which looks better in bold than not.

deathshadow said: ↑

...but know how above I said all that stuff about "if you care about legacy browsers"? With things like colouration on tables I've said "OH WELL" to IE7/earlier getting such colouring and have just been using nth-child (IE9+ and RoW) or adjacent sibling selectors (IE8+ and RoW) instead of classes. The data would still be usable, just not as pretty -- so why waste the markup?
Click to expand...

Not sure what you mean here. I definitely want the pages to work everywhere possible. And I realize that older browsers, especially IDIOT EXPLORER, won't properly render CSS, so coloration will be problematic with them. Without coloration, the data will still be useable, but in general hard to distinguish the different parts.

deathshadow said: ↑

Really to say what the PROPER markup would be I'd need a full sample of the table and it's data, not some incomplete snippet with vague/presentational rubbish in it.
Click to expand...

Here is an example of a page I am trying to add CSS to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



<HTML>

<HEAD>

<SCRIPT TYPE='text/javascript'></SCRIPT>





<TITLE>KM FA3 Catalog: END SHAFT</TITLE>

<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=utf-8">
<META HTTP-EQUIV="content-language" CONTENT="en">
<META NAME="copyright" CONTENT="Copyright 1984-2016 by mmerlinn">
<META NAME='robots' CONTENT='noindex, nofollow'>

<BASE HREF='http://mmerlinn.com/'>

<SCRIPT TYPE='text/javascript' SRC='http://mmerlinn.com/js/JSMain.js'></SCRIPT>

</HEAD>

<BODY TEXT='#000000' LINK='#0000FF' ALINK='#FF0000' VLINK='#FF00CC' BGCOLOR='#CCCCCC'>
<BASEFONT FACE='geneva, arial, helvetica, verdana' SIZE=2>

<A NAME='default'></A>

<HR WIDTH='1'>

 

&nbsp;&nbsp;Page number:&nbsp;&nbsp;KM-FA3-5n0

<TABLE WIDTH='100%' BGCOLOR='#CCCCCC' BORDER='1' CELLPADDING='2'>
<TR BGCOLOR='#FFCCFF'>
 <TH COLSPAN='8'>END SHAFT</TH>
</TR>

<TR BGCOLOR='#CCFFCC'>

 <TH COLSPAN='8'>Call 877-771-3372 for current price & availability</TH> 
</TR>

<TR BGCOLOR='#FFFFCC'>
 <TH ROWSPAN='5'>Style</TH>
 <TH>CC</TH>
 <TH>OA/Thick</TH>

 <TH>OD/Deep</TH>

 <TH>ID/Wide</TH>
 <TH>Part No.</TH>
 <TH BGCOLOR='CCFFFF'>List Price</TH>
 <TH ROWSPAN='5'>Picture</TH>

</TR>
<TR BGCOLOR='#FFFFCC'>
 <TH COLSPAN='3'>Tooth Counts</TH>

 <TH COLSPAN='3'>ID Marks</TH>
</TR>
<TR BGCOLOR='#FFFFCC'>
 <TH>Year</TH>
 <TH COLSPAN='4'>Miscellaneous Info</TH>

 <TH BGCOLOR='CCFFFF'>Shop Price</TH>
</TR>
<TR>

 <TH BGCOLOR='#FFFFCC'>Stock</TH>
 <TH COLSPAN='5' BGCOLOR='#CCFFCC'>Transmission Codes</TH>
</TR>
<TR BGCOLOR='#CCFFFF'>
 <TH>Seller Name</TH>

 <TH COLSPAN='3'>Seller Part Info</TH>
 <TH>Seller No.</TH>

 <TH>Seller Price</TH>
</TR>

<TR>
 <TH COLSPAN='8'>&nbsp;</TH>
</TR>


<TR BGCOLOR='#FFCCCC'>
 <TD ROWSPAN='5'>
 
 3-5/64" long
 
 </TD>

 <TD>
 

 KNR
 
 </TD>

 <TD>
 

 3-5/64"
 
 </TD>

 <TD>
 &nbsp;
 </TD>

 <TD>
 &nbsp;

 </TD>

 <TD>

 
 KM-FA3-5N-0001-QM
 
 </TD>

 <TD ALIGN='right' BGCOLOR='CCFFFF'>
 

 6.40
 
 </TD>

 <TD ALIGN='center' ROWSPAN='5'>
 
 Picture not available
 
 </TD>

</TR>

<TR BGCOLOR='#FFCCCC'>
 <TD COLSPAN='3'>

 
 N27A-27A
 
 </TD>

 <TD COLSPAN='3'>
 

 &lt;&gt;
 

 </TD>
</TR>

<TR BGCOLOR='#FFCCCC'>
 <TD>
 &nbsp;
 </TD>

 <TD COLSPAN='4'>

 &nbsp;

 </TD>

 <TD ALIGN='right' BGCOLOR='CCFFFF'>
 
 5.10
 
 </TD>
</TR>

<TR>

 <TD ALIGN='center' BGCOLOR='#FFCCCC'>

 &nbsp;
 </TD>
 <TD COLSPAN='5' BGCOLOR='#CCFFCC'>
 
 W4A321UNQ-BY5316=30*1,
 
 </TD>
</TR>

<TR BGCOLOR='#CCFFFF'>
 <TD ALIGN='center'>

 
 &#83;l&#97;u&#115;o&#110;
 
 </TD>

 <TD COLSPAN='3'>

 

 SHAFT, O/D CLUTCH 78mm long. Fits W4A 321 *** transmission.
 
 </TD>

 <TD>
 
 F4A&nbsp;8674B
 

 </TD>

 <TD ALIGN='right'>
 
 45.00
 
 </TD>
</TR>



<TR BGCOLOR='#FFFFFF'>

 <TD ROWSPAN='7'>
 
 3-5/64" long
 
 </TD>

 <TD>
 
 YRO
 

 </TD>

 <TD>
 
 3-5/64"
 
 </TD>

 <TD>
 &nbsp;

 </TD>

 <TD>
 &nbsp;
 </TD>

 <TD>
 
 KM-FA3-5N-0003-8R
 

 </TD>

 <TD ALIGN='right' BGCOLOR='CCFFFF'>
 
 23.00
 
 </TD>

 <TD ALIGN='center' ROWSPAN='7'>
 

 Picture not available
 

 </TD>
</TR>

<TR BGCOLOR='#FFFFFF'>
 <TD COLSPAN='3'>
 
 N27A-27A
 

 </TD>

 <TD COLSPAN='3'>

 
 &lt;&gt;
 
 </TD>
</TR>

<TR BGCOLOR='#FFFFFF'>

 <TD>
 &nbsp;
 </TD>

 <TD COLSPAN='4'>
 &nbsp;
 </TD>

 <TD ALIGN='right' BGCOLOR='CCFFFF'>
 

 19.00
 
 </TD>

</TR>

<TR>
 <TD ALIGN='center' BGCOLOR='#FFFFFF'>
 
 1_K09
 
 </TD>

 <TD COLSPAN='5' BGCOLOR='#CCFFCC'>
 
 W4A321UNQ-BY5316=30*1,
 

 </TD>
</TR>

<TR BGCOLOR='#CCFFFF'>
 <TD ALIGN='center'>
 

 M&#105;tsubish&#105;
 
 </TD>

 <TD COLSPAN='3'>
 
 SHAFT, End Clutch
 
 </TD>

 <TD>
 
 MD731561
 

 </TD>

 <TD ALIGN='right'>
 
 38.98 (1994)
 

 </TD>
</TR>
<TR BGCOLOR='#CCFFFF'>
 <TD ALIGN='center'>

 
 S&#108;&#97;u&#115;&#111;&#110;
 
 </TD>

 <TD COLSPAN='3'>
 
 SHAFT, OVERDRIVE CLUTCH 78mm Long. Uses bushing.
 

 </TD>

 <TD>

 
 177&nbsp;8674C
 
 </TD>

 <TD ALIGN='right'>
 

 45.00
 

 </TD>
</TR>
<TR BGCOLOR='#CCFFFF'>
 <TD ALIGN='center'>
 
 &#83;&#108;&#97;&#117;s&#111;&#110;
 
 </TD>

 <TD COLSPAN='3'>

 
 SHAFT, O/D CLUTCH 78mm long. Fits W4A 321 *** transmission.
 
 </TD>

 <TD>

 

 F4A&nbsp;8674B
 
 </TD>

 <TD ALIGN='right'>
 
 45.00
 
 </TD>

</TR>



<TR BGCOLOR='#CCCCFF'>
 <TD ROWSPAN='7'>
 
 3-22/64" long
 
 </TD>

 <TD>

 
 KKK
 
 </TD>

 <TD>
 
 3-22/64"
 
 </TD>

 <TD>
 &nbsp;
 </TD>

 <TD>
 &nbsp;
 </TD>

 <TD>

 
 KM-FA3-5N-0000-NK
 
 </TD>

 <TD ALIGN='right' BGCOLOR='CCFFFF'>
 
 6.40
 
 </TD>

 <TD ALIGN='center' ROWSPAN='7'>
 
 Picture not available
 
 </TD>
</TR>

<TR BGCOLOR='#CCCCFF'>
 <TD COLSPAN='3'>

 
 N27A-27A
 
 </TD>

 <TD COLSPAN='3'>
 
 &lt;&gt;
 

 </TD>

</TR>

<TR BGCOLOR='#CCCCFF'>
 <TD>
 
 91:94
 
 </TD>

 <TD COLSPAN='4'>

 &nbsp;

 </TD>

 <TD ALIGN='right' BGCOLOR='CCFFFF'>
 
 5.10
 
 </TD>
</TR>

<TR>
 <TD ALIGN='center' BGCOLOR='#CCCCFF'>

 
 1_K09
 
 </TD>
 <TD COLSPAN='5' BGCOLOR='#CCFFCC'>
 
 F4A331MNN2-AL3582=91*1, W4A33K1UP6=91*1,
 

 </TD>
</TR>

<TR BGCOLOR='#CCFFFF'>
 <TD ALIGN='center'>
 
 &#72;&#121;u&#110;d&#97;&#105;
 
 </TD>

 <TD COLSPAN='3'>

 
 SHAFT, End Clutch
 
 </TD>

 <TD>
 
 45840-37000
 

 </TD>

 <TD ALIGN='right'>
 
 60.77
 
 </TD>
</TR>
<TR BGCOLOR='#CCFFFF'>
 <TD ALIGN='center'>
 

 &#77;its&#117;&#98;&#105;s&#104;&#105;

 
 </TD>

 <TD COLSPAN='3'>
 
 SHAFT, End Clutch
 

 </TD>

 <TD>

 
 MD731176
 
 </TD>

 <TD ALIGN='right'>
 

 31.00 (1991)
 
 </TD>

</TR>
<TR BGCOLOR='#CCFFFF'>
 <TD ALIGN='center'>
 
 Sl&#97;us&#111;&#110;

 
 </TD>

 <TD COLSPAN='3'>

 
 SHAFT, O/D CLUTCH 85mm long.
 
 </TD>

 <TD>
 
 F4A&nbsp;8674A
 

 </TD>

 <TD ALIGN='right'>
 

 101.25
 
 </TD>
</TR>


</TABLE>

&nbsp;&nbsp;Last updated:&nbsp;&nbsp;03/06/2016
</BODY>

</HTML>
Code (markup):
This is an original example. It works fine as is. I want to add CSS to it where it displays the same without all of the excessive markup in the HTML. Right now my most important issue is getting the coloration to work. Everything else in due time since every change to the HTML requires me to change my FoxPro generation program. Since I cannot afford a broken website, I only want to attack one issue at a time.

mmerlinn, Jul 17, 2016 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#5

You're REALLY not grasping inheritance or selectors AT ALL here... of course if your indentation were proper it might help to visualize it:
 <tr class="RowColor6">
		<td class="stockAvail6">Cell 1</td>
		<td class="subColor" colspan="5">Cell 2</td>
		<td>Cell 3</td>
 </tr><tr>
		<td class="stockAvail6">Cell 1</td>
		<td class="subColor" colspan="5">Cell 2</td>
		<td>Cell 3</td>
 </tr>
Code (markup):
Assuming this style:
 tr {
 background: blue;
 }
 .RowColor6 td,
 .RowColor6 th {
 background: red;
 }

 .stockAvail6 {
 background: white;
 }

 .RowColor6 .subColor {
 background: yellow;
 }
Code (markup):
You set all TR to blue... TD and TH in theory inherit from the parent, but don't rely on that.

You set .RowColor6 td and th to red, since .RowColor6 is a TR, this will get applied properly.

.stockAvail6 is a TD, it cannot override the parent TR's declaration. These should in fact remain blue.

.RowColor6 .subColor on the other hand would apply as it's TR level.

REALLY though, you're throwing endless conflicting level styles in there... and to what legitimate reason I have no clue since you have zero indication of what the DATA is.

Your live page didn't help matters on that either -- there is ZERO semantic relationships between ANYTHING on that train wreck of how NOT to present data to users. It's a jumbled blob of rubbish that I'd be tossing into the trash in it's entirety as you get more than two records deep, **** only knows what any of the fields are supposed to mean. You have ZERO columnar relationship, zero way to even ESTABLISH such a relationship, and as such the entire mess is an accessibility and usability DISASTER that I'd be putting down like old yeller.

I would NEVER suggest presenting data on a website in the goofy jumbled colour coded mess you have in that code sample. It's a usability and accessibility disaster that I'd be shocked if anyone could be bothered to try and make sense out of long enough to actually try and figure out if you even have the product they want.

deathshadow, Jul 18, 2016 IP

mmerlinn Prominent Member

Messages:: 3,197

Likes Received:: 818

Best Answers:: 7

Trophy Points:: 320

#6

Well, I guess if it can't be fixed, I should quit wasting my time and go do something else worthwhile. These pages have been working fine for 9 years paying all of my bills, so my time would be better spent taking care of my customers and letting the current website generate new customers. I just thought I could get rid of some of the mess without spending the rest of my life making it work.

mmerlinn, Jul 18, 2016 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#7

I think it would be worth it to drag it kicking and screaming into usability as it could increase your sales through better functionality. Laughably with MORE words to say what the data IS and more uniform presentation of the data, you'd likely reduce bounce and still reduce bandwidth use too.

In the current form, it's likely resulting in a good number of folks looking for what you actually have to offer being turned away by not being able to find it -- you've just got content unlabeled slapped in all over the place...

OF course given the uniformity of said data, I'm surprised you've gone this long WITHOUT a proper database backing it or a logical organizational structure.

deathshadow, Jul 19, 2016 IP

Log in or Sign up

Advertising (learn more)

Inheritance not seeming to work.

mmerlinn Prominent Member

PoPSiCLe Illustrious Member

deathshadow Acclaimed Member

mmerlinn Prominent Member

deathshadow Acclaimed Member

mmerlinn Prominent Member

deathshadow Acclaimed Member

Log in or Sign up

Advertising (learn more)

Inheritance not seeming to work.

mmerlinn Prominent Member

PoPSiCLe Illustrious Member

deathshadow Acclaimed Member

mmerlinn Prominent Member

deathshadow Acclaimed Member

mmerlinn Prominent Member

deathshadow Acclaimed Member

Useful Searches