Need some help getting nth-child to display

semicolon · June 6, 2019, 1:54pm

As my screenshot below demonstrates I’ve gotten as far as I can with this little template and now need Sitepoint’s expertise to understand why my nth-child won’t consistently display its alternating row colors in any browser. I have bits of ronpat’s (and possibly Paul’s) solutions but apparently not all. This is a simple 12-row, 3-column template w/‘zebra’ striping. Thanks everyone.

p.s. re: tidying
If my blocked format offends, LEAVE THE THREAD. I’m doing this on a 3" cellphone screen with approximately >>1/8"<< of vertical typing-area visibility and what you see is what.you get. It took almost 1 hour just to get Sitepoint to accept my login with this p.o.s. phone so put a lid on it! Loathe though I am to encourage the use of these infernal smartphones to key in any code more complex than a 5-digit zip code, Sitepoint might want to think about incorporating a detectable ‘mobile’ interface into its architecture. Personally, I’d like to melt mine down and use it for a coaster. Just saying . . .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TABLELESS nth-child w/EVEN &amp; a Dashed Separator Line</title>

<style type="text/css">

BODY {
font-size: 16px;
line-height: 16px;
font-family:'LUCIDA CONSOLE', MONOSPACE;
padding: 0;
margin: 20px;
border: GROOVE CYAN;
border-width: 5px;
}

body > div {
overflow: hidden;
}

body > div:first-child {border-BOTTOM: 1px solid BLACK}
body > div:nth-child(even) {background-color: #FFFFDB;}

.COLUMN1, .COLUMN2, .COLUMN3 {
float: left;
padding: .4em;
}

.COLUMN1 {width: 240px; text-align: RIGHT; border-right: 1px solid BLACK;}
.COLUMN2 {width: 50px;  text-align: CENTER; border-right: 1px solid BLACK;}
.COLUMN3 {width: 500px;}

#NAME {
font-family: FRANKLIN GOTHIC MEDIUM COND, SANS-SERIF;
background-color: BLACK;
color: CYAN;
border-LEFT: 1px solid BLACK;
border-RIGHT: 1px solid BLACK;
border-collapse: collapse;
padding: 10px;
vertical-align: BOTTOM;
font-size: 18px;
line-height: 18px;
}

</style>
</head>

<body>

<DIV ID="NAME">
&#9834; Here come old &#9837; top &#9838; he come &#9836; groovin&rsquo; up slowly he got &#9835; joo-joo eyeballs he one &#9835; holy roller he &#9834; .&nbsp;.&nbsp;.
</DIV>

<DIV>
<div CLASS="COLUMN1">R1C1</div>
<div CLASS="COLUMN2">1</div>
<div CLASS="COLUMN3">R1C3</div>
</DIV>

<DIV>
<div CLASS="COLUMN1">R2C1</div>
<div CLASS="COLUMN2">2</div>
<div CLASS="COLUMN3">R2C3</div>
</DIV>

<DIV>
<div CLASS="COLUMN1">R3C1</div>
<div CLASS="COLUMN2">3</div>
<div CLASS="COLUMN3">R3C3</div>
</DIV>

<DIV>
<div CLASS="COLUMN1">R4C1</div>
<div CLASS="COLUMN2">4</div>
<div CLASS="COLUMN3">R4C3</div>
</DIV>

<DIV>
<div CLASS="COLUMN1">R5C1</div>
<div CLASS="COLUMN2">5</div>
<div CLASS="COLUMN3">R5C3</div>
</DIV>

<div>
<div CLASS="COLUMN1">R6C1</div>
<div CLASS="COLUMN2">6</div>
<div CLASS="COLUMN3"><span style="color: BLUE; margin-BOTTOM: 6px">R6C3</span></div>
</div>

<div STYLE="border-TOP: 3px DASHED DARKGREY; margin-top: 6px;">
<div CLASS="COLUMN1">R7C1</div>
<div CLASS="COLUMN2">7</div>
<div CLASS="COLUMN3">R7C3</div>
</DIV>

<DIV>
<div CLASS="COLUMN1">R8C1</div>
<div CLASS="COLUMN2">8</div>
<div CLASS="COLUMN3">R8C3</div>
</DIV>

<DIV>
<div CLASS="COLUMN1">R9C1</div>
<div CLASS="COLUMN2">9</div>
<div CLASS="COLUMN3">R9C3</div>
</DIV>

<DIV>
<div CLASS="COLUMN1">R10C1</div>
<div CLASS="COLUMN2">10</div>
<div CLASS="COLUMN3">R10C3</div>
</DIV>

<DIV>
<div CLASS="COLUMN1">R11C1</div>
<div CLASS="COLUMN2">11</div>
<div CLASS="COLUMN3">R11C3</div>
</DIV>

<DIV>
<div CLASS="COLUMN1">R12C1</div>
<div CLASS="COLUMN2">12</div>
<div CLASS="COLUMN3">R12C3</div>
</DIV>

</body>
</html>

coothead · June 6, 2019, 3:55pm

Hi there semicolon,

this looks like tabular data to my old eyes.

Is there any reason that you can think of for not using the "table element " ?

coothead

SamA74 · June 6, 2019, 5:10pm

What’s the problem we are trying to solve here?
The rows do show in alternating colours like the first screen-shot in Firefox, Chrome and IE.
Or was it about something else?

coothead · June 6, 2019, 5:41pm

Hi there semicolon,

here is a table example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>TABLE nth-child w/EVEN &amp; a Dashed Separator Line</title>

<style media="screen">
body {
    margin: 1.25em;
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif; 
 }

table {
    width: 100%;
    border: 0.322em groove #0ff;
    border-collapse: collapse;
    font: 100% / 150% 'lucida console', monospace;
 }

table th  {
    padding: 0.2em;
    border: 1px solid #000;
    border-top: 0;
    background-color: #000;
    font: 112.5%/ 180% 'franklin gothic medium cond', sans-serif;
    color: #0ff;
 }

table tbody tr:nth-child( odd ) {
    background-color: #ffffdb;
 }

table tbody tr:nth-child( even ) {
    background-color: #999974;
 }

table td {
    padding: 0.16em 0.5em;
 }

table tbody tr:nth-of-type( 7 ) span {
    display: block;
    margin: 0.2em 0;
    border-top: 0.25em dashed #a9a9a9; 
 }

table tbody tr td:nth-of-type(1) {
    border-right: 1px solid #000;
    text-align: right; 
 }

table tbody tr td:nth-of-type(2) {
    width: 2em;
    /*padding: 0.25em 0;*/
    border-right: 1px solid #000;
    text-align: center; 
 }

table tbody tr:nth-of-type( 7 ) td {
    border-right: 0;
 }
</style>
</head>

<body>
 <table>
  <thead> 
   <tr>
    <th colspan="3">&#9834; Here come old &#9837; top &#9838; he come &#9836; groovin&rsquo; up slowly he got &#9835; joo-joo eyeballs he one &#9835; holy roller he &#9834; .&nbsp;.&nbsp;.</th>
   </tr>
  </thead> 
  <tbody>
   <tr>
    <td>R1C1</td>
    <td>1</td>
    <td>R1C3</td>
   </tr><tr>
    <td>R2C1</td>
    <td>2</td>
    <td>R2C3</td>
   </tr><tr>
    <td>R3C1</td>
    <td>3</td>
    <td>R3C3</td>
   </tr><tr>
    <td>R4C1</td>
    <td>4</td>
    <td>R4C3</td>
   </tr><tr>
    <td>R5C1</td>
    <td>5</td>
    <td>R5C3</td>
   </tr><tr>
    <td>R6C1</td>
    <td>6</td>
    <td>R6C3</td>
   </tr><tr>
    <td colspan="3"><span></span></td>
   </tr><tr>
    <td>R7C1</td>
    <td>7</td>
    <td>R7C3</td>
   </tr><tr>
    <td>R8C1</td>
    <td>8</td>
    <td>R8C3</td>
   </tr><tr>
    <td>R9C1</td>
    <td>9</td>
    <td>R9C3</td>
   </tr><tr>
    <td>R10C1</td>
    <td>10</td>
    <td>R10C3</td>
   </tr><tr>
    <td>R11C1</td>
    <td>11</td>
    <td>R11C3</td>
   </tr><tr>
    <td>R12C1</td>
    <td>12</td>
    <td>R12C3</td>
   </tr>
  </tbody>
 </table>

</body>
</html>

coothead

semicolon · June 7, 2019, 12:00am

Hey coot. Wellll . . . we’re supposed to be giving Tables the heave ho. Plus I like <DIV>s, they’re very elastic. I’m trying in my pathetic way to be (cough) modern. And aren’t tableless designs lighter on the coding? And give you groovy effects you can’t get with tables? Yes it’s a humble template but it has aspirations to be more!

semicolon · June 7, 2019, 12:04am

WHAT?? You see the colored rows? In Chrome? In Explorer?

semicolon · June 7, 2019, 12:31am

I assume no responsibility for missing words and mangled spelling you see in my replies. I can’t see what I’m typing! That was “DIVs” before my phone mangled it; I like DIVs. And I was able to to render it in table format coot but I’ll download your code and compare it with mine.

PaulOB · June 7, 2019, 6:19am

Yes the rows are colored in Chrome and will be colored in latest versions of IE.

No we are most certainly not

Tables must be used for tabular data and your data looks tabular. You must always use the correct and semantic html element for the job in hand.

If the data is tabular then tables are the only semantic and accessible answer.

If the day is not tabular then don’t use tables.

In the end it all boils down to what the content actually is

Just to reiterate that tables are not deprecated and must be used for tabular data if you want semantic and accessible html

semicolon · June 7, 2019, 5:16pm

I take your point Paul, got it.

Paul & Sam . . . I want to make sure I understand you:

You opened the TABLELESS version I uploaded to the beginning of my thread and you see the nth-child row colors in both Chrome and Explorer?

Then I’m trying to understand why I DON’T. It displays in Mozilla but nowhere else – including Dreamweaver 8, Nvu and RJ Editor. I’ve completely renamed it to avoid cache ghosting.

I’m on Windows 7 Pro 64-bit – are you seeing the rows in Windows 10? in Linux? on a Mac? I’ll revert my little project to tables but I’d appreciate the OS and browser versions you’re each using. Thanks.

SamA74 · June 7, 2019, 5:39pm

Same here.

ronpat · June 7, 2019, 5:46pm

Before you revert to a table, you might explain or demo what the contents of those cells will contain. Tabular data is text like one might find in a spreadsheet (I mention that because you are presently showing spreadsheet cell designations). In contrast, one should not use a table to frame a layout with paragraphs and images, ie. non-spreadsheet-like data. That would be the inappropriate use of a table.

About the alternating rows of color… Is there any other code in play that we do not see? It really sounds like their must be.

EDIT: I think you are using the library’s hardware, aren’t you? Since the yellow is very pale, I wonder if it might be interpreted as white in a system with limited color rendition. Try using one of the “web friendly” colors or just something more visible like #FFFF00.

PaulOB · June 7, 2019, 6:07pm

They are not browsers. Test in a real browser. WYSIWYG editors seldom render css correctly

Nth-child in its basic form is supported back to IE9 I believe.

semicolon · June 7, 2019, 9:57pm

Paul disregard the editors I’ve used. The page won’t display in either Chrome or IExplorer. I don’t know how many other ways I can say this. But I respect your privacy and won’t ask again. Perhaps someone else will share the test conditions in which they got it to work. For now I’m going to just stick with the code in my lead post and accept that it will render in Mozilla only.

coothead · June 7, 2019, 10:50pm

That code, as pointed out, in not semantic, so why won’t you use
the semantic version which was presented in post #5 ?

coothead

semicolon · June 7, 2019, 10:52pm

Hi RP. No, I’m posting from The Cellphone From Hell. I’m coming up with workarounds however, and composing on an Android notepad which I then >>PASTE into the Sitepoint reply box. Pathetic, yes, but at least I can see what I’m typing!

semicolon · June 7, 2019, 11:30pm

Coot, you designed a completely different page! WTF? It’s ugly man! Nothing I design needs to be USDA Choice – I’m the only one who will ever see it. Sure, I’d like to know why 2 people can see my tableless version render accurately, but it’s no big deal. I just have to remember to open these little guys in Mozilla (it will be evident the minute I find myself looking at a pane of white heh).

m_hutley · June 8, 2019, 12:01am

It renders in Chromium (Chrome 77), and IE (11.765). It should be noted that both browsers are normalizing the tag output to remove all the unnecessary capitalization in both HTML and CSS components, but the file renders as expected.

coothead · June 8, 2019, 12:18am

Yours :-

Mine :-

If you don’t like my layout, as it stands, then two minor
amendments to the CSS willtake care of that…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>TABLE nth-child w/EVEN &amp; a Dashed Separator Line</title>

<style media="screen">
body {
    margin: 1.25em;
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif; 
 }

table {
    width: 100%;
    border: 0.322em groove #0ff;
    border-collapse: collapse;
    font: 100% / 150% 'lucida console', monospace;
 }

table th  {
    padding: 0.2em;
    border: 1px solid #000;
    border-top: 0;
    background-color: #000;
    font: 112.5%/ 180% 'franklin gothic medium cond', sans-serif;
    color: #0ff;
 }

table tbody tr:nth-child( odd ) {
    background-color: #ffffdb;
 }


table tbody tr:nth-child( even ) {
    /*background-color: #999974;*/ /* minor amendment 1 */
 }


table td {
    padding: 0.16em 0.5em;
 }

table tbody tr:nth-of-type( 7 ) span {
    display: block;
    margin: 0.2em 0;
    border-top: 0.25em dashed #a9a9a9; 
 }

table tbody tr td:nth-of-type(1) {
    width: 20%;                    /* minor amendment 2 */
    border-right: 1px solid #000;
    text-align: right; 
 }

table tbody tr td:nth-of-type(2) {
    width: 2em;
    border-right: 1px solid #000;
    text-align: center; 
 }

table tbody tr:nth-of-type( 7 ) td {
    border-right: 0;
 }
</style>
</head>

<body>
 <table>
  <thead> 
   <tr>
    <th colspan="3">&#9834; Here come old &#9837; top &#9838; he come &#9836; groovin&rsquo; up slowly he got &#9835; joo-joo eyeballs he one &#9835; holy roller he &#9834; .&nbsp;.&nbsp;.</th>
   </tr>
  </thead> 
  <tbody>
   <tr>
    <td>R1C1</td>
    <td>1</td>
    <td>R1C3</td>
   </tr><tr>
    <td>R2C1</td>
    <td>2</td>
    <td>R2C3</td>
   </tr><tr>
    <td>R3C1</td>
    <td>3</td>
    <td>R3C3</td>
   </tr><tr>
    <td>R4C1</td>
    <td>4</td>
    <td>R4C3</td>
   </tr><tr>
    <td>R5C1</td>
    <td>5</td>
    <td>R5C3</td>
   </tr><tr>
    <td>R6C1</td>
    <td>6</td>
    <td>R6C3</td>
   </tr><tr>
    <td colspan="3"><span></span></td>
   </tr><tr>
    <td>R7C1</td>
    <td>7</td>
    <td>R7C3</td>
   </tr><tr>
    <td>R8C1</td>
    <td>8</td>
    <td>R8C3</td>
   </tr><tr>
    <td>R9C1</td>
    <td>9</td>
    <td>R9C3</td>
   </tr><tr>
    <td>R10C1</td>
    <td>10</td>
    <td>R10C3</td>
   </tr><tr>
    <td>R11C1</td>
    <td>11</td>
    <td>R11C3</td>
   </tr><tr>
    <td>R12C1</td>
    <td>12</td>
    <td>R12C3</td>
   </tr>
  </tbody>
 </table>

</body>
</html>

Mine - with minor amendments :-

coothead

ronpat · June 8, 2019, 8:22am

Humor me, semi.

OK, let’s stick with your original code for now and focus on the zebra stripes (alternating rows of colors).

Please change the yellowish background-color from “#ffffdb” to "#ffff00" which can also be written "yellow" (without the leading “#”).
Are the yellow stripes visible, or are they still missing?

Give descriptive feedback and post a copy of your revised code.

Thanks.

PaulOB · June 8, 2019, 10:07am

Assuming you are not talking about older versions of IE then as mentioned by everyone in this thread so far No matter their system the nth child striping is working fine.

This likely means the issue is your end in some way (cache maybe or perhaps different code or outdated browser).

The only way we can tell for sure is for you to put your code online so that we see exactly the same as you (you can do this in codepen if you have no online facility).

There obviously is an issue of sorts but it seems likely it is somewhere in your environment.

Are you not seeing stripes in the code that others have posted?