Need help? Check out our Support site, then


Images being re-aligned from edit page to preview page

  1. Hello,

    I'm trying to setup an about us page for my blog and am having some trouble. I would like to include LinkedIn and Email links along with a picture of the user (we have four users). I have tried pasting a table from word to give me the format that I would like and align the images correctly. For example, I have 3 columns and 1 row with a profile picture in the left column, a LinkedIn and Email picture with hyperlinks in the middle column, and a short summary in the right column. This looks fine on the "Edit Page" but when I preview the post or update the post the right column stays in the position I want it to, while the middle column shifts down the page and re-aligns itself. I have tried playing around with the auto-correct xhtml settings and have not had any luck.

    Please help!

    Thanks,

    Ross

    The blog I need help with is biznxt.co.

  2. We Volunteers cannot view any drafts. We can only view published pages and posts.

  3. Don't paste a table from Word, that will only lead to pain and heartache. Word is a word processor, not an HTML editor. Word uses plenty of proprietary text formatting we can't understand.

    Instead, try an HTML table: http://www.w3schools.com/html/html_tables.asp

  4. Hopefully this will make my problem a bit easier to understand.

    Here is a picture of what I was talking about in the "Edit Page" view:

    http://biznxt.co/?attachment_id=197

    And this is what it looks like when I publish the post:

    http://biznxt.co/?attachment_id=196

    Hopefully this clarifies what I was talking about a little bit.

  5. I do see, but please try HTML tables, not tables copied and pasted from Word.

  6. I just tried using an HTML table and it seems to be giving me the same alignment problems. Any other potential solutions?

  7. Did you wind up with the same third column as you have in your screenshot? If so, try removing the right column.

  8. Yeah for some reason it results in the same problem even if I delete the 3rd column. The LinkedIn and email icons show up below the "profile picture" and are shifted to the right, whereas I would like them to be next to the picture.

  9. This is happening because of the default vertical alignment of images. You can paste here the code you tried to use so I can tell you what you need to change. Paste it between backticks (see the note on "Allowed markup").

  10. The backtick ` not to be confused with the single quote mark ' is located to the left of the number 1 key in lower case under the tilde ~.
    backtick
    code
    backtick

  11. "located to the left of the number 1 key in lower case under the tilde"
    Not necessarily. There are various keyboard layouts.

  12. True but I thought it was a safe bet in this case. :)

  13. Here is the HTML code I'm using:

    <table border="0">
    <tbody>
    <tr>
    <td><a href="http://biznxt.files.wordpress.com/2013/03/2769b031.jpg"><img class="alignnone  wp-image-55" alt="2769b03" src="http://biznxt.files.wordpress.com/2013/03/2769b031.jpg" width="120" height="120" /></a></td>
    <td><a href="http://biznxt.files.wordpress.com/2013/03/linkedin.png"><img class=" wp-image-53 aligncenter" alt="linkedin" src="http://biznxt.files.wordpress.com/2013/03/linkedin.png" width="34" height="34" /></a>
    <p style="text-align: center;"><a href="http://biznxt.files.wordpress.com/2013/03/email_icon_small.gif"><img class=" wp-image-51 aligncenter" alt="email_icon_small" src="http://biznxt.files.wordpress.com/2013/03/email_icon_small.gif" width="27" height="27" /></a></p>
    </td>
    <td>Sample Text Here</td>
    </tr>
    </tbody>
    </table>
  14. 1) border="0" is outdated coding that has no effect.
    2) The image width as usually expressed has no effect inside a table cell: when "Sample Text Here" becomes real text, it will squeeze the profile image and make it tiny.
    3) I don't see what the p style="text-align: center;" is doing there.
    4) And, as I said, the vertical alignment needs to be corrected.

    So start with this then tell us if and what you'd like to change:

    <table style="border:none;">
    <tbody>
    <tr>
    <td style="border:none;vertical-align:top;width:30%;">
    PROFILE IMAGE CODE
    </td>
    <td style="border:none;vertical-align:top;text-align:center;width:13%;">
    ICON1 CODE
    ICON2 CODE
    </td>
    <td style="border:none;vertical-align:top;width:57%;">
    TEXT
    </td>
    </tr>
    </tbody>
    </table>
  15. That looks great, thanks so much for the help. One small thing, is there anyway to bring the icons in the 2nd column closer to the profile picture so that it looks a bit more clean?

    '<table style="border: none;">
    <tbody>
    <tr>
    <td style="border: none; vertical-align: top; width: 30%;"><img class="wp-image-55 alignright" alt="2769b03" src="http://biznxt.files.wordpress.com/2013/03/2769b031.jpg" width="160" height="160" /></td>
    <td style="border: none; vertical-align: top; text-align: center; width: 13%;"><img class="wp-image-53" alt="linkedin" src="http://biznxt.files.wordpress.com/2013/03/linkedin.png" width="34" height="34" />
    <img class="wp-image-52" alt="twitter_small_logo1" src="http://biznxt.files.wordpress.com/2013/03/twitter_small_logo1.png" width="30" height="30" /><img class="alignnone wp-image-51" alt="email_icon_small" src="http://biznxt.files.wordpress.com/2013/03/email_icon_small.gif" width="29" height="29" /></td>
    <td style="border: none; vertical-align: top; width: 57%;">SAMPLE

    SAMPLE

    SAMPLE

    SAMPLE</td>
    </tr>
    </tbody>
    </table>'

  16. Oops...

    <table style="border: none;">
    <tbody>
    <tr>
    <td style="border: none; vertical-align: top; width: 30%;"><a href="http://biznxt.files.wordpress.com/2013/03/2769b031.jpg"><img class="wp-image-55 alignright" alt="2769b03" src="http://biznxt.files.wordpress.com/2013/03/2769b031.jpg" width="160" height="160" /></a></td>
    <td style="border: none; vertical-align: top; text-align: center; width: 13%;"><a href="http://biznxt.files.wordpress.com/2013/03/linkedin.png"><img class="wp-image-53" alt="linkedin" src="http://biznxt.files.wordpress.com/2013/03/linkedin.png" width="34" height="34" /></a>
    <a href="http://biznxt.files.wordpress.com/2013/03/twitter_small_logo1.png"><img class="wp-image-52" alt="twitter_small_logo1" src="http://biznxt.files.wordpress.com/2013/03/twitter_small_logo1.png" width="30" height="30" /></a><a href="http://biznxt.files.wordpress.com/2013/03/email_icon_small.gif"><img class="alignnone  wp-image-51" alt="email_icon_small" src="http://biznxt.files.wordpress.com/2013/03/email_icon_small.gif" width="29" height="29" /></a></td>
    <td style="border: none; vertical-align: top; width: 57%;">SAMPLE
    
    SAMPLE
    
    SAMPLE
    
    SAMPLE</td>
    </tr>
    </tbody>
    </table>
  17. You're welcome.
    Yes, of course you can decrease the space: among other things, you can remove the default horizontal padding of each cell.
    You also need to lower the text a little bit.
    So try turning the three opening td tags to this:

    <td style="border:none;vertical-align:top;width:30%;padding:0;">
    
    <td style="border:none;vertical-align:top;text-align:left;width:13%;padding:0;">
    
    <td style="border:none;vertical-align:top;width:57%;padding:1em 0 0 2em;">

    By the way, once you've published it you no longer need to paste the code here: we can see it in the sourcecode of your page.

  18. Great, this is definitely much more in tune with what I had in mind. Thanks again for all your help!

Topic Closed

This topic has been closed to new replies.

About this Topic