PDA

View Full Version : Help: Small space between two images


DaveMatthew
13 Feb 2010, 07:58 PM
I'm making a preview page for a site, and it's mostly composed of images, and there is a small space between two of them that I don't want to be there.

Here's the site: www.unsunghero.ca

That space between the description image and facebook/twitter link.

There's 5 other images on the page stacked vertically, and I was able to eliminate the spaces between them by setting the display to block. However, if I do that for this one, it moves up and to the right and no longer appears below the image above, but rather to the right of the image above it.

Here's the CSS:


body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote {margin:0px; padding:0px; border:0px;}
body {background-color:#000000;}
.container {width: 1050px; margin: 0 auto; padding:0px; border:0px}


#top_image {
background:#000000;
margin-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
border: 0px;
margin: auto;
}

#top_image img{
display:block;
}

ul#menu {list-style: none; padding:0px; margin:0px; display:block;}
ul#menu li {float:left; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; border: 0px; margin: 0px; background:#000000;}

#menu li img{
display:block;
}

#description {
background:#000000;
margin-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
border: 0px;
margin: auto;
}

ul#menutwo {list-style: none; padding:0px; margin:0px; display:block;}
ul#menutwo li {float:left; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; border: 0px; margin: 0px; background:#000000;}

#menutwo li img{
display:block;
}

#end {
background:#000000;
padding:0px;
margin:auto;
}

And then the HTML...


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unsung Hero Apparel</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>
<body>

<div id="top_image">
<div class="container">
<img src="./images/top.gif">
</div><!-- end container -->
</div><!-- end top_image -->

<ul id="menu">
<div class="container">
<li><img src="./images/top_02.gif"></li>
<li><img src="./images/top_03.gif"></li>
<li><img src="./images/top_04.gif"></li>
<li><a href="http://blog.unsunghero.ca"><img src="./images/top_05.gif"></a></li>
<li><img src="./images/top_06.gif"></li>
</div><!-- end container -->
</div><!-- end menu -->

<div id="description">
<div class="container">
<img src="./images/description.gif">
</div><!-- end container -->
</div><!-- end description -->

<ul id="menutwo">
<div class="container">
<li><img src="./images/top_08.gif"></li>
<li><a href="http://www.facebook.com/unsungheroapparel"><img src="./images/top_09.gif"></a></li>
<li><a href="http://twitter.com/TEAMUNSUNGHERO"><img src="./images/top_10.gif"></a></li>
<li><img src="/images/top_11.gif">
</div><!-- end container -->
</div><!-- end menutwo -->

<div id="end">
<div class="container"><br>
<img src="./images/bottom.gif">
</div><!-- end container -->
</div><!-- end end -->


</body>
</html>

Any advice?

Thanks!