Need help? Check out our Support site, then


Can't gid rid of table borders

  1. I'm using <table border="0" cellpadding="5" cellspacing="5" width="100%"> to create a table with no borders. But I'm still getting borders as if I had used border="1". I suspect that I'm overlooking something simple, but can someone tell me what I'm doing wrong?

    The blog I need help with is iwanticewater.wordpress.com.

  2. In case you're wondering, I'm using tables to get around the sloppy way WP handles text wrapping for images. The preview looks exactly as I imagined it, with the exception of those ugly border lines! Help please.

  3. @izaakmak

    Can you paste the whole table code you're using? (between backticks ` - - on the same key as tilde ~)

    Can you detail what you find sloppy about text wrapping? I use lots of tables, so it may be that I've not noticed a problem.

  4. The post has several tables, which are used to lock text to a photo:

    <table border="0" cellpadding="5" cellspacing="5" width="100%">
    <tr>
    <td style="vertical-align:middle;"><a href="http://iwanticewater.wordpress.com/files/2009/11/are-you-kathlick-09.jpg"><img src="http://iwanticewater.wordpress.com/files/2009/11/are-you-kathlick-09.jpg" alt="" title="Are You Kathlick 09" width="300" height="160" class="aligncenter size-full wp-image-4373" /></a></td>
    <td style="color: teal; font-size: 22px; line-height:1.1em; text-align:center; vertical-align:middle;"><strong>"I think it means we're Pisskopailians!"</strong></td>
    </tr>
    </table>

    Maybe I'm just not good at it, but getting the images and text positioned and formatted the way I want is so much easier with tables than with the image text wrapping feature. My post has seven like this, with the positions of the text and images alternating.

  5. Is it possible that the INove theme I'm using overrides the border="0" setting?

  6. Not sure if it works but let's try:
    <table style="border:1;visibility:hidden;" cellpadding="5" _any other details here_>

    p.s I blog from mobile so excuse my flaw or just simply wait for other volunteers' workaround(s) say, Panos, TSP, devblog -- to name a few.

  7. Thanks. I'll try that.

  8. Sorry, but that hides the entire table.

  9. I decided to publish "as is" because the post was meant for Sunday. I'll gladly edit it to get rid of the borders if someone can show me how.

  10. Seems the problem is related to iNove. In other themes the borders are not visible. Also the text and image valign in the middle, but iNove seems to over-ride.
    This code hides the iNove borders with a white border around the table and around the td with the image.

    <table style="border:solid 2px #ffffff;" border="0" cellspacing="0" cellpadding="2" width="440" align="center">
    <tbody>
    <tr>
    <td style="border:solid 2px #ffffff;padding-right:.5em;" valign="middle"><a href="http://iwanticewater.wordpress.com/files/2009/11/are-you-kathlick-09.jpg"><img class="aligncenter size-full wp-image-4373" title="Are You Kathlick 09" src="http://iwanticewater.wordpress.com/files/2009/11/are-you-kathlick-09.jpg" alt="" width="300" height="160" /></a></td>
    <td style="padding-left:.5em;" valign="middle" align="center"><span style="color:teal;font-size:22px;line-height:1.1em;"><strong>"I think it means we're Pisskopailians!"</strong></span></td>
    </tr>
    </tbody></table>
  11. @ 1tess: Thanks! I understand changing the border color in the table definition (I'd thought of that, but didn't know how), but is it needed in the first data statement? If so, why not the second? Also, I don't get the other changes. Some I can see better coding, but some seem unnecessary, like changing the width of the table.

  12. I put the border on the td with the image, but I suppose you could put it with the text td.
    It appears you only need the one statement. If you don't use it, you get a small vertical line dividing one td from the other.

    As I said, it seems that iNove has CSS or something that over-rides what happens in the other various themes I tried in my test blog. They did not need the white border…

    I like to define the width of a table rather than use %, but I believe you can do either. Perhaps % is better than specific # in flex width themes? (440 is max width for images in iNove)

    the cell spacing etc. was just an artifact of a table i was fooling with when i started on your question: change as you like. I started with a basic table that I use regularly, so that would account for the differences.

    The key in my code is adding the white borders (ffffff=white if you like that better) to hide iNove's quirks.

    Hope this works for you…

  13. Using just the color statements (I did have to put in in the first data statement as well), worked perfectly. Thanks!

    INove supports image widths up to 600 I think, but I try not to exceed 500 to allow for the use of at least a few of the other themes. :-)

    Also, after some thought I remembered that using the align statements the way you suggested didn't work in a different post. I'm not sure why. The code I'm using was suggested as a work-around for that problem. Another theme issue?

    Thanks again! Another bit o' knowledge to help with future posts!

  14. I admit that iNove is a theme I've not looked at much. so could be theme related.
    Ack—right iNove = 600 max!

    re the align statements, I think you are correct. I was switching between answering your question while working on my own stuff and other things.

    So, you are satisfied? and if so, then good…

    Tess

  15. Very much so! Thanks.

  16. big smile!

    ≥^,^≤

  17. panaghiotisadam
    Member

    Alternative solution: change
    <table border="0"
    to
    <table style="border:none;"
    and add border:none to the td tag style declarations as well.

    Your problem was actually the same one you had asked about here:
    http://en.forums.wordpress.com/topic/html-table-code-not-working?replies=8
    As husdal explained in that thread, align=, border= etc. are dropping out of use. Apparently iNove accepts the "new" way only.

  18. "border:none;" [slaps forehead]

    And now I see where "vertical-align:middle;" came from!
    http://en.forums.wordpress.com/topic/html-table-code-not-working?replies=8#post-387860

  19. panaghiotisadam
    Member

    Yup, 'twas me... And I'm afraid that means some updating in my posts too...

  20. text and images (or whatever)?

  21. panaghiotisadam
    Member

    Sorry?

  22. "vertical-align:middle;" would apply to text only or also to images or other entities which could be vertically aligned in a table?

  23. panaghiotisadam
    Member

    Ah! Any entity.

  24. Based on these revelations, made the following changes to code I used to center that pesky audio player. I had already changed it to get rid of the table borders.

    I changed it from this:

    <div align="center">
    <table style="border: 2px solid rgb(255, 255, 255);" border="0"><tbody><tr><td>
    [audio http://www.fileden.com/files/2009/2/26/2340110/Elton%20John/Elton%20John%20-%20Levon.mp3|artists=Elton John|titles=Levon|remaining=yes|animation=no]
    </td></tr></tbody></table>
    </div>

    To this:

    <div style="text-align: center;">
    <table style="border: medium none ;"><tbody><tr><td>
    [audio http://www.fileden.com/files/2009/2/26/2340110/Elton%20John/Elton%20John%20-%20Levon.mp3|artists=Elton John|titles=Levon|remaining=yes|animation=no]
    </td></tr></tbody></table>
    </div>

    Not only did the borders return, but I lost my centering as well! The original code had evolved from a lot of trial and error trying to center that darned audio player, and it finally looks like I want it. Although I'd still like to know why I had to go through all of that to accomplish what should have been so simple, my concern now is for the future functionality of this code.

    Any thoughts?

  25. I don't know what happened there! What I typed in the first example for the border color was <table border="0" style="border:solid 2px #ffffff;">. What I typed in the second example for the table def was <table style="border:none;">. If I can't even get this thing to accurately reproduce my input, how can I even ask for help?

  26. panaghiotisadam
    Member

    I'm not sure I understand the question. Since you're using a fixed-width theme, the simplest way to center an audio player is this:

    <div style="margin-left:155px;">
    SHORTCODE_HERE
    </div>
  27. That works just fine, until you change themes. When I center text, it stays centered regardless of the theme. It should work that way with anything I place on the page. Size, of course, is a different matter. That's why I try to keep the size of images and other objects small enough to fit the themes I'm likely to try. It's difficult enough for us novices to produce attractive output as it is. The WP.com environment should make the process easier, not harder.

  28. panaghiotisadam
    Member

    I see. In that case you can center the item for good by putting it in the middle cell of a 3-cell table row:

    <table width="100%" style="border:none;">
    <tr>
    <td style="border:none;"></td>
    <td width="290px;" style="border:none;">SHORTCODE_HERE</td>
    <td style="border:none;"></td>
    </tr>
    </table>

    Works no matter what the main column width of the theme.

  29. I tried this in a test post, and it worked! I'm not sure why the "border:none;" code didn't work when I tried it before. I'll have to go back to find out what I did wrong.

    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic