[Resolved] CSS Class Conflict

Home Forums Support [Resolved] CSS Class Conflict

Home Forums Support CSS Class Conflict

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #522074
    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

    Results for the above table HTML

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

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #522487
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #522663
    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 ๐Ÿ™‚

    #522764
    Tom
    Lead Developer
    Lead Developer

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.