Personal tools
You are here: Home → Documentation → FAQs → Why is there so much blank space under my images?
Navigation
 
Document Actions

Why is there so much blank space under my images?

Up to Table of Contents

This FAQ applies to: Any version.

Depending on how you set the alignment of an image, you may have too much space under images, especially when viewed with Internet Explorer 6. Learn when to use Inline setting for images.

Let's say you want an to insert and image and wrap some text around the image. Here's two examples of that, one with the image left aligned and another with the image right aligned.

Left Aligned

LizardLorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer id lacus vel eros faucibus pellentesque. Nunc lacinia diam bibendum nisl. Vivamus et magna. Phasellus feugiat neque eget sem. Maecenas vitae odio. Vestibulum pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer feugiat lacus in erat. Ut pede arcu, blandit eu, condimentum at, suscipit quis, tortor. Sed nisi turpis, condimentum in, ultrices eu, vulputate non, purus. Nunc congue tempor nulla. Pellentesque bibendum magna. Integer ultricies dolor at odio. Vivamus egestas vehicula orci.

 

Right Aligned

LizardLorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer id lacus vel eros faucibus pellentesque. Nunc lacinia diam bibendum nisl. Vivamus et magna. Phasellus feugiat neque eget sem. Maecenas vitae odio. Vestibulum pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer feugiat lacus in erat. Ut pede arcu, blandit eu, condimentum at, suscipit quis, tortor. Sed nisi turpis, condimentum in, ultrices eu, vulputate non, purus. Nunc congue tempor nulla. Pellentesque bibendum magna. Integer ultricies dolor at odio. Vivamus egestas vehicula orci.

 

Now let's say that you want text to appear under an image, and not wrap the text at all. In that case, you will want to use the Inline setting for images. If you use Left or Right alignment, you will have to enter several line breaks to get the text to appear under the image. The result is too much space below the image - it's nearly impossible to get it to look right. Here are examples of each scenario -

Look at this page in several browsers to see how the layout changes.

 

Inline Image with text below (the right way to do it)

Lizard

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer id lacus vel eros faucibus pellentesque. Nunc lacinia diam bibendum nisl. Vivamus et magna. Phasellus feugiat neque eget sem. Maecenas vitae odio. Vestibulum pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer feugiat lacus in erat. Ut pede arcu, blandit eu, condimentum at, suscipit quis, tortor. Sed nisi turpis, condimentum in, ultrices eu, vulputate non, purus. Nunc congue tempor nulla. Pellentesque bibendum magna. Integer ultricies dolor at odio. Vivamus egestas vehicula orci.

Left Aligned Image with text below (not the right way)

Lizard

 

 

 

 

 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer id lacus vel eros faucibus pellentesque. Nunc lacinia diam bibendum nisl. Vivamus et magna. Phasellus feugiat neque eget sem. Maecenas vitae odio. Vestibulum pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer feugiat lacus in erat. Ut pede arcu, blandit eu, condimentum at, suscipit quis, tortor. Sed nisi turpis, condimentum in, ultrices eu, vulputate non, purus. Nunc congue tempor nulla. Pellentesque bibendum magna. Integer ultricies dolor at odio. Vivamus egestas vehicula orci.

This section looks fine in Firefox, but there aren't enough line breaks for Internet Explorer 6 to display this properly. You could add more line breaks, but then it won't look good in Firefox! Use the Inline style and the above example will look good across all browsers.

 

by samk — last modified 2007-11-12 10:03 All content on this site is licensed under a Creative Commons License.
Still Stumped?
If you've still got questions about Plone, here are your best bets for finding out more:
 
All content in this site distributed under the Creative Commons "Attribution-NonCommercial-ShareAlike" license unless otherwise noted.

Powered by Plone CMS, the Open Source Content Management System