Having a spot of trouble with spaces between images

  • Unknown's avatar
    honeybunch55 · Member ·

    As you can see here –

    http://honeybunch55.wordpress.com/2011/04/08/big-clouds/

    my use of the padding tag (or whatever the correct term is, I forgot!)

    <img style=”margin-top: 12px; margin-bottom: 12px;” alt=”” />

    isn’t going too well. I’d like a bit more space between the first two images but less space betwixt the second and third one… I’ve been using that style tag with success in earlier efforts, but now it sort of seems I’ve lost control of it. lol…

    thanx in advance –

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    You need to put the margin declarations into the actual image code. You have them separate below the images, and that will not work. You need to delete all those and the break tags you put around them.

    <a href="http://img823.imageshack.us/img823/7347/wallofcloudkindapretty.jpg"><img style="margin-top:12px; margin-bottom:12px;" width="948" height="648" alt="" src="http://i1131.photobucket.com/albums/m551/wildwanderingrl/USUM/Sky/Summer/wall_of_cloud_kinda_pretty_redux.jpg" class="alignleft"></a>

    On the images that are not linked as above, you need to do the same thing.

    <img style="margin-top:12px; margin-bottom:12px;" width="756" height="1122" class="aligncenter" src="http://img847.imageshack.us/img847/6049/prettyclouds.jpg" alt="">

    Also, go to settings > writing and select “WordPress should correct invalidly nested XHTML automatically” and then click save changes. This should help to keep some of the issues I see happening in your posts from happening in the future.

  • Unknown's avatar
    jessiethought · Member ·

    I’ll do that too. I’ve been having trouble sometimes. Thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • Unknown's avatar
    honeybunch55 · Member ·

    It’s a good thing I don’t have too awfully many posts up yet, I see I have some work to do! There will be text on the pages also…once I have the ducks in a row otherwise…

    Thank you, Sacred!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • Unknown's avatar
    honeybunch55 · Member ·

    Okay, I carefully inserted all the elements correctly, I think…but I still have less space between the first two images than between the second and third. Why would this be happening? I’m sure it’s not an illusion…

  • Unknown's avatar
    honeybunch55 · Member ·

    On the ‘big clouds’ post, that is…I haven’t gotten to the rest yet…

  • Unknown's avatar
    thesacredpath · Member ·

    You have an extra break tags that need to be removed Note the break between the first href and the img src sections of the beginning? This is what I’m seeing in the source code.

    <a href="http://img823.imageshack.us/img823/7347/wallofcloudkindapretty.jpg">
<br>
<img class="alignleft" width="948" height="648" src="http://i1131.photobucket.com/albums/m551/wildwanderingrl/USUM/Sky/Summer/wall_of_cloud_kinda_pretty_redux.jpg" alt="" style="margin-top:12px;margin-bottom:12px;">
</a>
<br>
<img class="aligncenter" width="756" height="1122" alt="" src="http://img847.imageshack.us/img847/6049/prettyclouds.jpg" style="margin-top:12px;margin-bottom:12px;">
<br>
<img class="aligncenter" width="924" height="648" alt="" src="http://i1131.photobucket.com/albums/m551/wildwanderingrl/USUM/Sky/Summer/big_cumulus_clouds.jpg" style="margin-top:12px;margin-bottom:12px;">
  • Unknown's avatar
    honeybunch55 · Member ·

    Now I see what you mean by break tags, those are certainly not needed.

    How do I find the source codes for *only* the section that I posted, rather than the whole magilla, which I see when I choose “view page source” in Windows?

  • Unknown's avatar
    thesacredpath · Member ·

    I’m using the firebug add-on for Firefox, which allows me to zero in on the code. Open the post in the editor, switch to the HTML tab, clear everything from the text window and paste the following into the text window and save. I’ve taken out all the break tags and fixed the code.

    <a href="http://img823.imageshack.us/img823/7347/wallofcloudkindapretty.jpg"><img class="alignleft" style="margin-top:12px;margin-bottom:12px;" src="http://i1131.photobucket.com/albums/m551/wildwanderingrl/USUM/Sky/Summer/wall_of_cloud_kinda_pretty_redux.jpg" alt="" width="948" height="648" /></a>
<img class="aligncenter" style="margin-top:12px;margin-bottom:12px;" src="http://img847.imageshack.us/img847/6049/prettyclouds.jpg" alt="" width="756" height="1122" /><img class="aligncenter" style="margin-top:12px;margin-bottom:12px;" src="http://i1131.photobucket.com/albums/m551/wildwanderingrl/USUM/Sky/Summer/big_cumulus_clouds.jpg" alt="" width="924" height="648" />
  • Unknown's avatar
    honeybunch55 · Member ·

    Yeah! That one looks fine now, thanks! I’m inclined to think maybe the smaller space between images looks best…

    Firebug, huh? I should get that one. I’ve been working on my posts very carefully but still seeing extra spaces where they shouldn’t be. And I’ve looked around but not found any means in WP to bring up just the code in our text window. So, looks like I’m off to grab me a Firebug…!

  • The topic ‘Having a spot of trouble with spaces between images’ is closed to new replies.