Image alignment issues

  • Hi all,

    I’m having some dramas getting images to align within the body of a post.

    I’m not sure if it is WP or Theme related.. (I am using a version of the “Corporate” theme by Ori Pearl)

    In safari the site looks great. But in IE and FireFox the images don’t quite align as they should.

    Attempt at a text-based example:

    Image 1
    Image 1 Image 2 Image 3 Image 4
    Image 1 Image 2 Image 3 Image 4
    Image 1 Image 2 Image 3 Image 4
                  Image 2 Image 3 Image 4

    Images align in page like the above.. as opposed to desired:

    Image 1 Image 2 Image 3 Image 4
    Image 1 Image 2 Image 3 Image 4
    Image 1 Image 2 Image 3 Image 4
    Image 1 Image 2 Image 3 Image 4

    It aligns perfectly in Safari, but aligns like the first example in IE 6, IE 7 and FireFox (latest release).

    Would love any help that can be suggested!

Viewing 6 replies - 1 through 6 (of 6 total)

  • Could you post a link so we can take a look?

    Thread Starter slylake

    (@slylake)

    Thanks Alex. Sure, wasn’t sure if i should go posting links here.

    https://www.aussiemategardensheds.com.au/press/products/

    You can see images align perfectly straight line in safari, however not in IE or Firefox.

    Alright, I think I found it. You have spaces between the images in the HTML. So go into WordPress and go to the page where you’re having the trouble. When you go to edit that page, you’ll see that you have 2 options: Visual, and HTML. Choose HTML. You’ll see the code that makes up that page. Look for the lines that hold the images. For example, this is the line that holds the first row of pictures:

    <p><a rel="lightbox" href="https://www.aussiemategardensheds.com.au/press/wp-content/uploads/2008/11/build1.jpg" rel="lightbox[roadtrip]"><img class="alignnone size-thumbnail wp-image-23" title="build1" src="https://www.aussiemategardensheds.com.au/press/wp-content/uploads/2008/11/build1-150x150.jpg" alt="" width="150" height="150" /></a> <a rel="lightbox" href="https://www.aussiemategardensheds.com.au/press/wp-content/uploads/2008/11/build2.jpg" rel="lightbox[roadtrip]"><img class="alignnone size-thumbnail wp-image-24" title="build2" src="https://www.aussiemategardensheds.com.au/press/wp-content/uploads/2008/11/build2-150x150.jpg" alt="" width="150" height="150" /></a> <a rel="lightbox" href="https://www.aussiemategardensheds.com.au/press/wp-content/uploads/2008/11/build3.jpg" rel="lightbox[roadtrip]"><img class="alignnone size-thumbnail wp-image-25" title="build3" src="https://www.aussiemategardensheds.com.au/press/wp-content/uploads/2008/11/build3-150x150.jpg" alt="" width="150" height="150" /></a></p>

    It is the tags that make the links. Notice the spaces after the tags. Remove those spaces, save the page, and things should be a bit better. Hope that helps.

    Oops, I forgot to but some of the code between backticks. The last paragraph should have said:

    It is the <a> tags that make the links. Notice the spaces after the </a> tags. Remove those spaces, save the page, and things should be a bit better. Hope that helps.

    Thread Starter slylake

    (@slylake)

    Fantastic! Thanks Alex – you’re a star.

    Thread Starter slylake

    (@slylake)

    I don’t suppose you have any idea why the text has lumped itself off to the right and not as per page layout:

    Title
    image image image

    Title
    image image image

    etc etc

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Image alignment issues’ is closed to new replies.