This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Table conflicts with theme

Open 15 replies premiumthemetheme-vantage
Ken Evans
10 years ago · Last reply by Andrew Misplon 10 years ago

I made a long table: 5 columns & 25+ rows within a single Visual Editor widget.

There are two problems:
1: As I was developing the table, a full-width line appeared randomly in one of the rows.
I looked at the HTML but cannot see anything wrong.

2: The bottom rows of the table are behind the translucent footer.
Scrolling has no effect.

Any clues?

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

15
  1. Ken Evans 10 years, 9 months ago

    Adding a new row moves the bottom row down to behind the translucent footer.
    My previous comments refer to Firefox.
    The effects are similar with IE – except that:
    – the full-width line (that I didn’t put there) appears one row higher in the table.
    – in IE only 1.5 rows are obscured by the footer whereas 2.5 rows are obscured in IE.

  2. Ken Evans 10 years, 9 months ago

    I meant 2.5 rows are obscured in Firefox

  3. Ken Evans 10 years, 9 months ago

    I made some images of the problems and put them in a PDF file..
    You can see the file with the images at this link: http://1drv.ms/1EF4FN5

    I would classify this problem somewhere between “serious” and show-stopping!
    Please help.
    Thanks
    Ken

  4. Andrew Misplon Staff 10 years, 9 months ago

    Hi Ken

    If you remove the height property and value from the table style tag, the problem will resolve.

    Before:

    <table class=" alignleft" style="height: 639px; border-color: #0d0c0c;" width="761" cellpadding="4">

    After:

    <table class=" alignleft" style="border-color: #0d0c0c;" width="761" cellpadding="4">

    Hope that helps.

  5. Ken Evans 10 years, 9 months ago

    Sorry for the dummy question but where do I find the table style tag?

  6. Andrew Misplon Staff 10 years, 9 months ago

    No problem. Edit the Visual Editor widget, click the Text tab to view the source, you’ll see it there.

  7. Ken Evans 10 years, 9 months ago

    Is that a “local” fix “for this table only” or is it a “global fix” = “for all tables made with the Visual Editor widget”?

  8. Andrew Misplon Staff 10 years, 9 months ago

    Ideally there shouldn’t be a width or height property in the style tag. I’m not quite sure how this table was created but assuming you’re using the same method in a new Visual Editor widget, you’d need to edit the new table and do the same.

  9. Ken Evans 10 years, 9 months ago

    OK –
    Test 1: Remove the height property and leave both rows there (duplicate of first row)

    Result 1:
    The two horizontal lines are still there.
    The bottom of the second table is still merged with the translucent footer.

    Test 2: Remove the height property and remove the duplicate VE widget.
    Result 2:
    There is now only one horizontal line – after the last row in the table. (but not needed or coded)
    The bottom of the table DOES NOT merge with the translucent footer.

    This is the html for the last row in the table.

    <tr>
<td>2015</td>
<td>General Election</td>
<td></td>
<td>?????</td>
<td>?????</td>
</tr>
</tbody>
</table>
 
  10. Ken Evans 10 years, 9 months ago

    To create the table, I used the “Table” drop down that appears after the “Add Media” button but before the first row of icons beginning : B ? …

  11. Andrew Misplon Staff 10 years, 9 months ago

    Thanks for the feedback. If you don’t mind I’m going to take over editing for a moment. Hopefully I can find a speedy solution!

  12. Andrew Misplon Staff 10 years, 9 months ago

    Please check the page now. All looks good to me. I duplicated the Visual Editor widget for testing purposes.

    A plugin called TinyMCE Advanced is most likely adding the extra line into the Visual Editor widget that is providing the table creation link. That’s 100%. Looks good to me.

  13. Ken Evans 10 years, 9 months ago

    Thanks very much
    How do I control the width of each column?
    The W3 Schools isn’t clear (except it says “use CSS”).
    But I don’t know where to put the CSS to explicitly define the width of each column.

    If you look at the table, it seems that the width is being “dynamically” defined by the content but it’s not very stable.
    Sometimes the text in one column is right next to the text in the next column
    And sometime “long” text creates a new row.
    What I want is for all rows to be the same height – and have just one line of text without any wrapping.

  14. Andrew Misplon Staff 10 years, 9 months ago

    You can try something like this under Appearance > Custom CSS:

    table tr td {
height: 40px;
}

    Adjust as required.

    For widths, you can define a global width that will apply to all table cells:

    table tr td {
width: 100px;
}

    or a global min-width:

    table tr td {
min-width: 100px;
}

    or you could give each table its own class name and then target that. For example if this was my table:

    <table class="table-one">
</table>

    I could then use the same CSS as before but prefix it with my table class to make it specific to only that table:

    table.table-one tr td {
min-width: 100px;
}
  15. Andrew Misplon Staff 10 years, 9 months ago

    Doing this all before pasting into WordPress in your Microsoft app is also another option.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread