[Resolved] CSS Class Conflict

[vr51]

This CSS class bug has had me tearing myself apart trying to narrow it down since yesterday.

There seems to be a CSS class bug that affects tables. Any table row that contains the class ‘content’ has its child <th> and <td> elements pushed one column over to the right (at least in the ltr context). Example code and image are presented below.

Tested with different themes. Only happens with GP, with and without GPP, with and without any other plugins, with and without CSS resets.

Tested with Opera and Firefox.

I suspect a jQuery script or regex on the_content() in GP is doing something funky with CSS classes of the form class=”(.+)?content(.+)?”

Table

<table>
<tbody>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
<th>TH 4</th>
</tr>

<tr class="">
<td>TD 1 with parent tr class=""</td>
<td>TD 2</td>
<td>TD 3</td>
<td>TD 4</td>
</tr>

<tr class="content">
<td>TD 1 with parent tr class="content"</td>
<td>TD 2</td>
<td>TD 3</td>
<td>TD 4</td>
</tr>

<tr class="row-content">
<td>TD 1 with parent tr class="row-content"</td>
<td>TD 2</td>
<td>TD 3</td>
<td>TD 4</td>
</tr>

<tr class="content-row">
<td>TD 1 with parent tr class="contentrow"</td>
<td>TD 2</td>
<td>TD 3</td>
<td>TD 4</td>
</tr>

<tr class="something">
<td>TD 1 with parent tr class="something"</td>
<td>TD 2</td>
<td>TD 3</td>
<td>TD 4</td>
</tr>

</tbody>
</table>

Result

Image URL: https://pasteboard.co/Hcfpep9.png

[Tom]

Hi there,

Yes, I believe that’s this bug: https://github.com/tomusborne/generatepress/issues/60

We’ll be fixing it in the next version of GP 🙂

[vr51]

It drove me crazy. I was rewriting a plugin when I noticed the bug. I rewrote my plugin several times because I couldn’t understand why a table had suddenly become disfigured after its first round of surgery. I checked everything I could think of. And then.. 24 to 36 hours later I wondered what happens if I delete the hyphenated sections of the classes bit-by-bit..? It is such an obscure bug.

I am relieved to know I’m not the only one caught out by it. Probably a good thing it happened. There must be a few scripts in the wild that act on any found ‘content’ class without checking for word boundaries. When I publish my new plugin I at least know it is safe from this particular bug.

Thanks Tom. Has been an interesting few days 🙂

[Tom]

Sorry about that! It was something built into “Underscores”, which is the base theme that GP was built on.

[Author]

Posts