Generic Content widget tables are creating a bottom border?

I am using a simple two-column table in one of my Generic Content widgets, and for the life of me cannot figure out why it is creating a bottom border (or possibly a <hr> html element) between the widget and the widget below it. 

I set the widget's format to "No Border No Spacing", which should prevent this.  In fact I've tried every format and the line still persists.  I've set the table properties inside the widget to no borders...also the properties of the cell and rows as well.  Still doesn't eliminate it.  Note that the widget below it is also a Generic widget containing a PNG image, and it is also set to No Border No Spacing.  The PNG itself also does not have a line at the top. (plus I've moved things around and proved that the line belongs to the widget with the table)

Here's a screenshot:

Any thoughts?

Parents
  •    - I looked at Lisa's link, that line is defined in the screen.less file:

    .modal-content .content>.content table th,.content-fragment .content>.content table th,.popup-list .content>.content table th,.modal-content .content>.content table td,.content-fragment .content>.content table td,.popup-list .content>.content table td {
    word-wrap: normal;
    line-height: 1.5em;
    padding: 13.333333333px;
    border-bottom: 1px solid #b0b0b0
    }

    It can be overwritten from the theme level (with an override to the code), on the page level (with an Unfiltered HTML widget), or on the cell level (Cell Properties) by changing that to 0px on each cell in the table. 

    Those lines were not added by me and can't see how to remove them in the html source code when editing? 

    I can go into more detail on this part if you need from the Source Code, but here's an example: 

    cell with the border cell without the border

    and here's the code:

    <table>
    <tbody>
    <tr>
    <td>cell with the border</td>
    <td style="border: #fff solid 0px;">cell without the border</td>
    </tr>
    </tbody>
    </table>

  • It can be overwritten from the theme level (with an override to the code), on the page level (with an Unfiltered HTML widget), or on the cell level (Cell Properties) by changing that to 0px on each cell in the table. 

    The screen.less file associated with my Site's theme does not appear ot have any table settings in it.  The modal.less file has some, but adding "border-box: 0px" and "border-top: 0px" did not seem to change anything.

    Setting the table's border to 0px and its border color to the same as the background color also did nothing.

    What seems to have worked was going into each individual cell and setting the border color to the background color (which in this case was #FFFFFF).  This feels very much like a hack, but at least it worked.

    What's also annoying is that settings on tables, rows, and cells don't display every time you open the dialog box to change something.  You have to re-enter them every time or else it thinks you are saving over the setting with a blank value.

    Thanks for the tips!

  • Yes, tables are not the easiest to style, but by judging what you need to do, it is an option.

    The other option would be to have consistent rendering in the article for the images and then use CSS to float: left so they appear to the left of the adjacent paragraph. It would make content generation easy, although it wouldn't look the same in preview, it would render fine

    Last suggestion is to create a new custom.less or cssoverrides.css file and put all your customizations there. It becomes a challenge with future updates to make changes direct to theme files.

Reply
  • Yes, tables are not the easiest to style, but by judging what you need to do, it is an option.

    The other option would be to have consistent rendering in the article for the images and then use CSS to float: left so they appear to the left of the adjacent paragraph. It would make content generation easy, although it wouldn't look the same in preview, it would render fine

    Last suggestion is to create a new custom.less or cssoverrides.css file and put all your customizations there. It becomes a challenge with future updates to make changes direct to theme files.

Children
No Data