Mystery Gap between images

Get Started
1

Lol I am trying to keep sane. It’s been one bug after another. Take a look; I am not sure what’s going on but this gap is showing up between to ads. I put borders in to show you the gap. It’s like 2-3 px. It’s just annoying.

Could anyone take a look? I am perplexed.

http://www.newmanexpressions.com/sandbox/Billy/Articles/index.html

Code



<!DOCTYPE html>
<html lang="en">
<head>

<title>New Man Expressions</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="robots" content="index, follow">
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css-main/styleSheet.css">
<link rel="stylesheet" type="text/css" href="css-main/Akiane/styleSheet.css">
<body>

<div id="container">

	<div id="header">
		<h1><a href="index.html" title="New Man Expressions">New Man Expressions<span>&nbsp;
		</span></a>
		</h1>
	<!-- "header" --></div>
	<div id="pageWrapper">
	
		<!-- <div id="navArea">
			<p id="instructions">Choose a selection to the right to open our media sharer or choose a topic. . .</p>
			<div id="topNav">
				
				<ul>
					<li><a class="vision" href="#"><span>Vision</span></a></li>
					<li><a class="stream" href="#"><span>Downloads</span></a></li>
					<li><a class="social" href="#"><span>Socialize</span></a></li>
					<li><a class="partner" href="#"><span>Partnership</span></a></li>
					<li><a class="tools" href="#"><span>Tools</span></a></li>
					<li><a class="mail" href="#"><span>E Mail Us</span></a></li>
				</ul>
			
	        </div>
	
			
				<ul id="navTab">
					<li><a href="#"><span>MEDIA</span></a></li>
					<li><a href="#"><span>SERVICES</span></a></li>
					
				</ul>
			
		
	    </div> -->
		
		<div id="page">
				
			<div id="pageIntro">
				<div id="intro1BoxTop"></div>
				
				<div id="intro1BoxContainer">
				
					<div id="AkianeProfile">
						<h2>Akiane</h2>
						
						<img id="profilePict" src="css-Main/Akiane/AkianePhoto.jpg" alt="Young Akiane" width="200" height="200" />
						
						<p>Inducted into the Richest Kids-Entrepreneurs of America, Kids Hall of Fame & World Council for Gifted and Talented Children</p>
						
						<a href ="#"><img id="galleryButton" src="css-Main/Akiane/gallaryButton.jpg" alt="See the Gallery of Akiane" width="200" height="65" /></a>
					
					</div>
					
					<div id="imageViewer">
					
						<span id="photoIcon"></span>
						
						<h3>Celebrated Images</h3>
						
						<iframe name="mainEvent" src="css-Main/Akiane/Prince.html" width="370" height="385" frameborder="0" scrolling="no" ALLOWTRANSPARENCY="true"></iframe>
						
						<span id="clickIcon"></span>
						
						<div id="thumbnailContainer">
							<a href ="css-Main/Akiane/Prince.html" target="mainEvent"><img class="thumbnails" src="css-Main/Akiane/thumbnail-1.jpg" alt="Prince of Peace" width="70" height="70" /></a>
							<a href ="css-Main/Akiane/Youth.html" target="mainEvent"><img class="thumbnails" src="css-Main/Akiane/thumbnail-2.jpg" alt="Prince of Peace" width="70" height="70" /></a>
							<a href ="css-Main/Akiane/Hand.html" target="mainEvent"><img class="thumbnails" src="css-Main/Akiane/thumbnail-3.jpg" alt="Prince of Peace" width="70" height="70" /></a>
							<a href ="css-Main/Akiane/Boy.html" target="mainEvent"><img class="thumbnails" src="css-Main/Akiane/thumbnail-4.jpg" alt="Prince of Peace" width="70" height="70" /></a>
							<a href ="css-Main/Akiane/Horse.html" target="mainEvent"><img class="thumbnails" src="css-Main/Akiane/thumbnail-5.jpg" alt="Prince of Peace" width="70" height="70" /></a>
						</div>

					</div>
					
					<div id="AkianeText">
						<h4>Child Prodigy Painter</h4>
						<p>Does the word child prodigy have real meaning these days? Many think that it's just extraordinary talent, almost hiding it's deeper more prophetic resonance.</p>
						<p>I have come across the path of a young woman with blossoming personality named Akiane. Many people have wondered at the beautiful expressions this young passionate child prodigy has painted.</p>
						<p>At the moment she entered this world her mother saw the very gentle yet vehement nature of creation while her water born baby grasped with delicate fingers her pulsing umbilical cord in the presence of her father. </p>
						<p>Akiane captures the essence of life with prophetic cue to unveiling the greater mysteries as she finds her identity in the Prince of Peace.</p>
					</div>
				</div>
				
				<div id="intro1BoxBottom"></div>
			
			<!-- "intro1BoxTop" --></div>
		<!-- "pageIntro" --></div>
		
			
			<div class="sponsors">
				<div id="helpMenu"></div>
				<a href="#"><img src="css-Main/Akiane/prayerSponsor.jpg" alt="Prayer Support" width="245" height="520" border="1"/></a>
				<a href="#"><img src="css-Main/Akiane/AfricaSponsor-a.jpg" alt="Prayer Support" width="245" height="498" border="1"/></a>
			<!-- "sponsors" --></div>
			
			
			
		<!-- "page" --></div>
		
	<!-- "pageWrapper"--></div>
	<div id="footer"></div>




<!-- "container" --></div>
</body>
</html>

Page CSS



* { margin:0; padding:0;}

/* Intro Container */

#pageIntro{padding-top:50px; }

#intro1BoxTop {background: url(introBox.gif)  -2px 0 no-repeat;
width:969px;
height:20px;
}

#intro1BoxContainer {background: url(introBoxSides.gif) -2px 0 repeat-y;
width:969px;
height:600px;
}

#intro1BoxBottom {background: url(introBox.gif) -2px -20px no-repeat;
width:969px;
height:20px;
}

/* ------- Intro Content -------*/

/* - Profile - */
#AkianeProfile {width:240px; height:600px; float:left; font:normal 24px Times; padding: 0 0 0 25px;
}

h2 {font:normal 36px Times; padding:17px 0 30px 0;
}

#profilePict {border: 1px solid #333; margin-top: 9px;
}

#AkianeProfile p {font:normal 12px Times; width:200px; line-height:24px; padding-top:25px;
}

#galleryButton {padding-top:90px;}

/* - Image Viewer - */

#imageViewer {width:415px; height:600px; padding-left:5px; float:left;
}

#photoIcon {background: url(photoIcon.jpg) no-repeat; display:block; width:68px; height:68px; float:left;
}

h3 {font:normal 36px Times; padding:17px 0 30px 0; float:left;
}

#clickIcon {background: url(thumbnailClick.jpg) no-repeat; display:block; width:365px; height:35px;
}

#thumbnailContainer {padding:5px 0 0 3px;}

.thumbnails {float:left; padding-left:3px;}

/* - Intro Text- */

#AkianeText {float:left; width:240px; height:600px;}

h4{font:normal 24px Times; padding:28px 0 28px 0;
}

#AkianeText p{font:normal 14px arial, verdana, helvetica, sans-serif; padding-top:13px;}



/* ------- Main Content -------*/
.sponsors{ width:245px; height: 100%; padding: 25px 0 0 15px;}

#helpMenu {background: url(helpMenu.jpg) no-repeat; width: 245px; height: 68px;}

Template CSS



* { margin:0; padding:0;}


body {background: #000;
	font:normal 85%/120% arial, verdana, helvetica, sans-serif;
	color:#333;
}

#container {width:995px;}

#header {background:url(header.png) 1px -20px  no-repeat;
	height:54px;
	width:995px;
	position:relative;
}

h1 {font-size:150%;
	padding-top:20px;
}

h1 a {text-decoration:none;
	cursor:pointer;
	color:#ccc;
}

h1 span {display:block;
	background:url(header.png) 1px -20px no-repeat;
	width:995px;
	height:54px;
	position:absolute; top:0; left:0;
}


#pageWrapper{background:url(pageBG.gif) repeat-y 0 0;

}


#navArea{background:url(navBar.gif) repeat-x right bottom;
    width:969px;
	height:107px;
	margin-left:12px;
}

#instructions{display:block; float:left; padding:20px 0 0 20px;}

#topNav {width:328px;
	height:38px;
	list-style:none;
	float:right;
	margin-right:10px;
	background:transparent;
	padding-top: 9px;
}
#topNav  li {display:inline;
	float:left;
}

#topNav  a {background:url(navIcons.gif) no-repeat 0 0;
	display:block;
	width:48px;
	height:38px;
	vertical-align:middle;
	text-decoration:none;
	color:#333;
}

#topNav  a.vision {background-position:0 0;}


#topNav  a.stream {background-position: -40px 0;}


#topNav  a.social {background-position:-82px 0;}


#topNav  a.partner {background-position:-125px 0;}

#topNav  a.tools{background-position:-173px 0;}

#topNav  a.mail {background-position:-221px 0;}





/* DISPLAY TEXT TO Left OF ICONS */
#topNav a span {display: none;}
#topNav a:hover span {display: block;
	position: absolute;
	top:75px;
	left:550px;
	z-index:100;
	font-weight:bold;
}

#topNav a:hover span.instructions {display: block;
	position: absolute;
	top:75px;
	left:200px;
	z-index:100;
	font-weight:bold;
}


#navTab{
	width:700px;
    height:59px;
    line-height:normal;
	padding:1px 0 0 21px;
	clear:both;
}


#navTab li {display:inline;}

#navTab li a {
    float:left;
    text-decoration:none;
}

#navTab li a span {
    float:left;
    display:block;
    width:148px;
    background:url(navTab.gif) no-repeat left top;
	padding:15px 0px 17px 0px;
    text-align: center;
    font-size:125%;
	font-weight:bold;
    color:#FFF;}

#navTab li a:hover span {background-position:0 -59px;}




#page{width:969px;
	height:100%;
	margin-left:12px;
	}
	
#footer {background:url(footer.gif)no-repeat top left;
	width: 995px;
	height:55px;
}

I’ll literally paypal you a six pack of beer if you take a look. Gimmi your account. I feel like hooking somebody up!

2

If you add this to your style sheet—

img {vertical-align: bottom;}

—the problem will be removed.

By default, images have a little gap beneath them, because they are inline elements and the gap means that their bottom edge will sit inline with the bottom edge of any text beside them (leaving room for the descenders). The rule above removes that default.

3

The problem doesn’t really lie in the CSS or the IMG that you have been trying to target, thus all the hair pulling. What you are noticing is the white space character between the anchors created by the carriage return in your HTML markup. Anchors are inline elements and as such are subject to this kind of behaviour.


						<div id="thumbnailContainer">
							<a href ="Prince.html" target="mainEvent"><img class="thumbnails" src="thumbnail-1.jpg" alt="Prince of Peace" width="70" height="70" /></a><a href ="Youth.html" target="mainEvent"><img class="thumbnails" src="thumbnail-2.jpg" alt="Prince of Peace" width="70" height="70" /></a><a href ="Hand.html" target="mainEvent"><img class="thumbnails" src="thumbnail-3.jpg" alt="Prince of Peace" width="70" height="70" /></a><a href ="Boy.html" target="mainEvent"><img class="thumbnails" src="thumbnail-4.jpg" alt="Prince of Peace" width="70" height="70" /></a>
							<a href ="Horse.html" target="mainEvent"><img class="thumbnails" src="thumbnail-5.jpg" alt="Prince of Peace" width="70" height="70" /></a>
						</div>

Note that if you copy paste this HTML code exactly, your space problem goes away for all but the last thumbnail ( for which I left the carriage return as you had it so you could see what was happening.
Still, that is annoying… but now you know what causes this. How to solve it, other than typing long, unbroken strings of HTML?
There are a couple of ways of doing it:

  1. You can #thumbnailContainer{overflow:hidden;} and #thumbnailContainer a{float:left;} ( floating an element makes it have display:block; by default… thus solving the gap). This is actually the easiest and most durable solution.

  2. If you cant float it, you could #thumbnailContainer{display:table; word-spacing:-.25em;} (with a condition statement for IE<8 display:inline; ) the word spacing closes the gap (rather easily in this case since your anchor doesn’t contain any text, display:table fixes a bug with FF and since IE8< doesnt understand display:table we need that additional conditional CSS.

vertical gaps between images can be resolved by the method above or with vertical-align:(top/bottom) ( as IMGs have a built in gap to account for accented and descenders in the anticipated surrounding text.
Hope that helps!

4

Noble effort and easy enough for the original question. Thank you.

5

The word spacing hack is an interesting way to solve the problem too. I appreciate the effort to explain. What I am getting from all these answers is essentially to make the image display:block to remove from inline. This is useful helpful. Thanks much.