SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75! 
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

lining up images

5 years 7 months ago - 5 years 7 months ago #123363 by photofixations
lining up images was created by photofixations
Hi,

If you look at the "testimonial" at the bottom of atlantainternetdesign.com/ you can see that I am having a problem with the images stacking with various top/bottom margins. I am using the following code for each image: <img src="images/testimonial_6.jpg" alt="testimonial from Minhnuyet Hardy" width="518" height="192" style="margin: 20px; float: left;" /> What am I doing wrong?

Thanks for the help

Please Log in to join the conversation.

5 years 7 months ago #123373 by Nick
Replied by Nick on topic lining up images
Hi Bob,

It looks great here. Try clearing cache and see if it looks better on your end. If you're still having issues could you upload an annotated screenshot of the issue and also provide the browser and browser version that you're using? evernote.com/skitch/ is a great tool for annotated screenshots.

Looking forward to helping.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 7 months ago #123426 by photofixations
Replied by photofixations on topic lining up images
Hi Nick,

Look at the attachment. This is what I am seeing on google and firefox. On explore I see just one column.

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 7 months ago #123433 by Valentin
Replied by Valentin on topic lining up images
Hi Bob,

The images has an inline CSS that increase the margin.

For example, this is the HTML of one image:
<img width="518" height="168" style="float: left; margin: 20px;" alt="testimonial from Hollis Williams" src="http://myzone1.atlantainternetd.netdna-cdn.com/images/testimonial_5.jpg">

Remove margin: 20px; and replace with margin-bottom: 20px; to keep spacing between images but without the extra gap around.

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 7 months ago #123461 by photofixations
Replied by photofixations on topic lining up images
Hi Valentin,

I tried your solution but unfortunately ended up with this:

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #123522 by Valentin
Replied by Valentin on topic lining up images
Hi Bob,

The page looks fine here:



Maybe your screen is bigger and due the float property, the images are aligned in that way due the extra space.

If the issue persists, remove this inline CSS for each image:
float: left;

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!