Site logo

Archived topic

CSS Class Conflict

3 replies · Started by vr51 on March 16, 2018

Viewing posts 1–4 of 4

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

Results for the above table HTML

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

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 :)

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

This archived topic is closed to new replies.