Need help? Check out our Support site, then


extra space between image and caption Twenty Thirteen Theme

  1. I am preparing to release a post for tomorrow morning.

    I added a number of images above their captions in the post. However, the first image insists on putting extra space between it and its caption. This is not happening with the other images.

    This is only happening in the Twenty Thirteen Theme in Chrome.

    When I posted the HTML in a draft in P2, the captions fell into place as I wished under the images.

    When I viewed my draft in Firefox with Twenty Thirteen, the images fell into place.

    I am giving my URL because the bot seems to require it, but, as I stated, the post is not yet released.
    http://weavergrace.wordpress.com/2013/11/28/thanksgiving-days

    1. I played with the Text view to make sure no extra line breaks were inserted.
    2. I deleted all the code from the Text view, and copied and pasted the text from Notepad to the Visual view.

    3. I replaced the image with a different one

    Still, the problem persisted with the first image on the page, no matter what image it was. I am using Chrome Version 31.0.1650.57 m on Win8.

    I welcome other suggestions.

    The blog I need help with is weavergrace.com.

  2. Hi there - Rather than using the Caption field within the images themselves, you're manually styling the captions by making the font small and italicized, but it's still regular post text to the editor.

    The first image is left-justified, which means that all text (including the text you're using as the caption) wraps around to the right of the image. Your other images are centered with their captions centered below them.

    You can either center the top image in he same way, or you can use the caption fields in the images to fix the captions just below them.

  3. Thank you Eurello for taking a look. Yes, I don't like the Caption field; I prefer to manually style the captions. When I used the caption field, I didn't like the formatting.

    I found that the only way I could make that first photo tolerable to look at was to left-justify it, even though its left margin is out of alignment. As I wrote above, centering the top image resulted in a gaping space between it and the next line, being the caption in this case. You can see that gaping space above the caption. It only has a line break (not paragraph break) above it.

    I hope you are enjoying your day.

  4. It only has a line break (not paragraph break) above it.

    No, it has a paragraph break.
    Switch the editor to Text and
    a) enter a paragraph break (blank line) after "teepees anywhere."
    b) turn alignleft to aligncenter
    c) delete this useless pair:
    <em></em>
    d) make sure the opening "em" tag that follows is right next to the closing "a" tag that precedes it:
    ETC ETC width="300" height="206" /></a><em><span style="font-size:small;">ETC ETC

  5. Thank you justpi for your suggestion.

    I wish I could show you a screenshot of what happened after I made the changes you suggested. It looked as I described in my first message.

    After changes:
    I could not see teepees anywhere.
    <img class="wp-image-137 aligncenter" title="Teepee" alt="Teepee" src="http://weavergrace.files.wordpress.com/2013/11/tipi.jpg?w=300" width="300" height="206" /><span style="font-size: small;">Watercolor painting by Karl Bodmer

    Back to where it was:
    I could not see teepees anywhere. <img class="wp-image-137 alignleft" title="Teepee" alt="Teepee" src="http://weavergrace.files.wordpress.com/2013/11/tipi.jpg?w=300" width="300" height="206" />
    <span style="font-size: small;">Watercolor painting by Karl Bodmer

    I also tried a line break before caption:
    I could not see teepees anywhere. <img class="wp-image-137 alignleft" title="Teepee" alt="Teepee" src="http://weavergrace.files.wordpress.com/2013/11/tipi.jpg?w=300" width="300" height="206" />
    <span style="font-size: small;">
    Watercolor painting by Karl Bodmer

    but the extra white space remains the same

    a photo/caption that is working:
    threatening to attack me with tomahawks.
    <p style="text-align: center;"><img class="wp-image-138 aligncenter" title="Indian Tomahawks" alt="Indian Tomahawks" src="http://weavergrace.files.wordpress.com/2013/11/indians-tomahawks.jpg?w=300" width="300" height="255" />
    <span style="font-size: small;">The Death of Jane McCrea

    copying that formatting became:
    I could not see teepees anywhere.
    <p style="text-align: center;"> <img class="wp-image-137 aligncenter" title="Teepee" alt="Teepee" src="http://weavergrace.files.wordpress.com/2013/11/tipi.jpg?w=300" width="300" height="206" />
    <span style="font-size: small;">Watercolor painting by Karl Bodmer

    The same result.

    I wonder what I'm overlooking...

  6. a) To display code correctly in this forum, you enclose it in backticks (see the note on "allowed markup").
    b) To show us a screenshot, you upload it to your blog via Media > Add New, click Edit, copy its URL from the File URL field of the Save module, paste the URL here.
    c) But you don't need a or b when the post is published: we can see the code.
    d) If you tried what I suggested and it didn't work, then you probably made some mistake. Try again please so I can check the result.

  7. Thank you, justpi, so much for your persistence with me.

    Thank you for the tips on communicating here. I really appreciate it.

    You can see my post at http://weavergrace.com/2013/11/28/thanksgiving-days/

    How do you check the code of someone else's published post?

  8. You're welcome.

    To check the code you select View Source form the View menu of your browser (or whatever the equivalent is in the browser you use).

    You had already given the link to the post in question, in your original post above.

    But at the moment the post is just as it was, without the changes I suggested.

  9. When I view my code in Chrome, it looks like this:
    I could not see teepees anywhere.<a href="http://weavergrace.files.wordpress.com/2013/11/teepee300x206.jpg"><img class="alignleft size-full wp-image-223" alt="TeePee" src="http://weavergrace.files.wordpress.com/2013/11/teepee300x206.jpg?w=604" /></a><em><span style="font-size:small;">Watercolor painting by Karl Bodmer

    I don't see any extra page breaks or paragraph breaks. Please show me.

    In Firefox the caption displays properly, and the code is identical:
    I could not see teepees anywhere.<a href="http://weavergrace.files.wordpress.com/2013/11/teepee300x206.jpg"><img class="alignleft size-full wp-image-223" alt="TeePee" src="http://weavergrace.files.wordpress.com/2013/11/teepee300x206.jpg?w=604" /></a><em><span style="font-size:small;">Watercolor painting by Karl Bodmer

    By the way, thank you so very much for your blog post about resizing images before uploading them. What a difference when I replaced almost all the images for this post!!!! The biggest difference is that I can see the Indians in The First Thanksgiving painting! Also, I can read the words on the UAINE banner!

    Thank you for all your help. I appreciate your holding my hand through this.

  10. You're welcome!

    I suggested four things but you did only the two of the four. Plus you need to center the caption. Remove the first two sections of the post (in the "Text" editor) and replace them with this:

    When I was in college, each time that I drove on the interstate highway past <a title="Onondaga Nation Indian reservation" href="http://www.onondaganation.org/" target="_blank">a certain Indian reservation</a>, I couldn’t understand why I couldn’t see it. I repeatedly looked at maps to verify that I was looking in the right place. I could not see teepees anywhere.
    
    <p style="text-align:center;"><a href="http://en.wikipedia.org/wiki/File:Tipi01.jpg"><img class="aligncenter size-full wp-image-223" title="TeePee" alt="TeePee" src="http://weavergrace.files.wordpress.com/2013/11/teepee300x206.jpg?w=604" /></a><em><span style="font-size:small;">Watercolor painting by Karl Bodmer 1832-1834
    This work is in the public domain in the United States,
    and those countries with a copyright term of life of the author plus 100 years or less</span></em></p>
  11. I think I see the misunderstanding.

    At 6:05 this morning, I posted:
    "Thank you justpi for your suggestion.

    "I wish I could show you a screenshot of what happened after I made the changes you suggested. It looked as I described in my first message...

    I could not see teepees anywhere.
    <p style="text-align: center;"> <img class="wp-image-137 aligncenter" title="Teepee" alt="Teepee" src="http://weavergrace.files.wordpress.com/2013/11/tipi.jpg?w=300" width="300" height="206" /><span style="font-size: small;">Watercolor painting by Karl Bodmer

    The same result."

    I'm not worried about the italicized text right now.

    Still, I copied and pasted your code to replace my code and previewed the result. Same extra space between the image and caption when viewed in Chrome.

    New question: we can't comment out code in WordPress when in the Text view? <!---- ---> changed to become visible on the webpage >:

    Thank you!

  12. What I pasted above produces the exact result you want (in all the browsers I use, including Chrome), so I don't really know what you're talking about: on http://weavergrace.com/2013/11/28/thanksgiving-days/ the image isn't even centered, so that can't be my code, can it? You didn't copypaste my suggestion into that post, or you didn't click Update after copypasting it.

  13. I know it sounds ridiculous, but I think the problem is with my computer.

    I couldn't use Chrome in Sept and Oct, perhaps between Windows updates. You can imagine how that drove my corporate IT Administrator son-in-law and me crazy while I turned everything on and off, CCleaning, downloading from scratch and reinstalling, trying to get Chrome back.

    No, my website did not use your code when you were looking at it because the extra space looks so bad on my Chrome. I considered using Writer's Helper, or my private duplicate blog, to show you that I followed your directions, but don't see how I can give you access to either. I wouldn't leave my post formatted with the extra space.

    You'll have to trust me or not that I actually followed your directions, and refreshed my screen.

    I trusted you, finally, and it occurred to me to look at the page on someone else's computer. The caption was aligned to the right on the HP while it was aligned left on my Toshiba! Now, it looks as intended on Firefox and IE again, and the code is correct again. So, different Chrome on different computers is screwing it up differently? I should have guessed.

    The good news is that you assured me that it looks good on other people's monitors. I hadn't even considered finding out.

    Would you check it one more time to see if my computer is messing up reading the code (my most likely guess), or messing up something the sending the code?

    I am extremely extremely sorry for this wild goose chase. Please let me know if I can do anything to compensate you for your time, energy, effort and annoyance.

  14. Hi there - Here's how this post looks on my computer now (using Chrome v. 31): https://cloudup.com/ck6AoawTAm4

    Is that how you intend it to look?

  15. Yes! Perfect! That looks like Chrome should! Are you on Win8?

    I haven't had a chance yet to call out my troops to find out who sees what, so thank you so very much for pitching in. I feel reassured that I am not leaving a gaping hole out there for my readers to trip over and fall into.

    Mine still looks broken. http://wp.me/a41TCx-3X

  16. Hi there - Hmm, no, I'm on a Mac, but I doubt that's it -- didn't you say it looked correct on your friend's HP? Looks fine for me in Firefox, too. Do you use any browser add-ons or extensions with Chrome?

  17. Thanks Eurello. I wonder if Windows is the problem, because of the trouble I had with Chrome in Sept and Oct.

    On the HP in Chrome with Win 7, the first image was right-aligned even though my code specified left-aligned, and that was how it was on my computer. Screwy, huh? But now it looks great on the HP, since I centered the image.

    Chrome extensions:
    AdBlock 2.6.16
    Disconnect 5.10.2
    Google Docs 0.5
    Mail Checker Plus for Google Mail™ 1.3.24
    Turkopticon 3.32

    I continue to find that my computer has a unique point of view.

    I welcome any comment and suggestions.

  18. I'd try disabling each of your browser extensions one-by-one to see if any one of them might be causing this somehow. Let me know how that works.

  19. I had disabled all of my extensions and added them back in one-by-one when I had the Chrome trouble previously. I can do that again. Thanks for the suggestion. I'll let you know how it turns out.

  20. Chrome suddenly began showing my posts correctly and consistently, regardless of my extensions. I suspect that something updated that was conflicting.

    Thank you again for your help.

    Happy New Year!

  21. Wonderful! I'm glad it's working now. Happy New Year to you, too! :)

Topic Closed

This topic has been closed to new replies.

About this Topic