By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,568 Members | 1,713 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,568 IT Pros & Developers. It's quick & easy.

unwanted vertical margins on horizonatally stacked images

P: 1
Hello web experts, a question form a lonely beginner in HTML and CSS crying out for help!!,

I am trying to stack 5 images of the same dimensions next to each other horizontally as the top bar of my website. I am adding them separately as they will move around from page to page, and will also be links.

I have floated the 5 images left, and they have white margins vertically where the edges of the images meet when i want them to sit flush.

This is the div in my HTML:
Expand|Select|Wrap|Line Numbers
  1. <div id="top_banner">
  2. <a href="alligator.html"><img src="images/top_alligator_02.jpg" alt="alligator thumbnail" title="alligator_thumbnail" /></a>
  3. <a href="excalibur.html"><img src="images/top_excalibur_03.jpg" alt="excalibur thumbnail" title="excalibur_thumbnail"/></a>
  4. <a href="fabrication.html"><img src="images/top_fabrication_04.jpg" title="fabrication_thumbnail" alt="fabrication thumbnail"/></a>
  5. <a href="minigator.html"><img src="images/top_minigator_05.jpg" title="minigator_thumbnail" alt="minigator thumbnail"/></a>
  6. <a href="balmoral.html"><img src="images/top_balmoral_06.jpg" title="balmoral_thumbnail" alt="balmoral thumbnail"/></a>
  8. <a href="index.html"><img src="images/hl_logo_07.gif" title="henry lewis logo" alt="henry lewis logo"/></a>
  9. </div>
  11. and my CSS is 
  13. #top_banner {
  14.     margin: 0px;
  15.     border: 0px;
  16.     padding: 0px;
  17. }
- so i have tried to turn off all ways of having the margins but still get space between the images - aaarrrrrrrrrrrgggggghhhhh!!.

Does anyone have any other suggestions?

Thank you sooooooo much for your time :)
Oct 13 '08 #1
Share this Question
Share on Google+
2 Replies

Expert 100+
P: 397
Target the element that determines how a picture is displayed.
Expand|Select|Wrap|Line Numbers
  1. <img>
Expand|Select|Wrap|Line Numbers
  1. img {
  2. border:none;
  3. float:left;
  4. width:150px;
  5. height:150px;
  6. }
No CSS is needed (so far, anyway) for the parent container.
Expand|Select|Wrap|Line Numbers
  1. #top_banner { }
Some versions of IE need the height and width stated in the markup or the image may not appear; or, it will appear but may be distorted.
Expand|Select|Wrap|Line Numbers
  1. <img src="images/hl_logo_07.gif" width="155" height="155" alt="" />
Make sure the document has a doctype and that the markup and the CSS are valid.

PS Please enclose your html and CSS in code tags when posting to the forum. Thanks.
Oct 13 '08 #2

P: 79
you can try an over flow hidden property for the parent div ... this will fix the problems,,,, enjoy coding--
Dec 2 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.