Thin line of background showing between divs

[ms1780]

I am getting a thin line of the "content" background color showing between the "banner" and "subbanner" and I can't figure out how to get rid of it. Please help.

<div id="topnav">
	 		<ul>
	 			<li><a href="index.html">Welcome</a></li>
	 			<li><a href="products.html">Products</a></li>
	 			<li><a href="contact.html">Contact Us</a></li>
	 		</ul>
		</div> 
	
		<div id="banner">
			<img src="Images/Advantage-Max-4 (1).jpg" />
	
		</div>
	
		<div id="subbanner">
			<h3>FREE SHIPPING ON ALL ORDERS!</h3>
		</div>

		<div id="content">
			<h1>KILL BOX DECOY WEIGHTS. THE BEST WEIGHT EVER      MADE</h1>
			<p>

			</p>		
		</div>

CSS........

/* Global */

html	{	}
body	{ background-color:#666633;	font-family:"Courier New", Courier, monospace;}






/* Containers */

#wrapper { width:900px; margin:0px auto; background-color:white; }

#top { background-color:#663300; width:100%; padding: 10px 0; overflow:hidden; position:relative;}

#logo { margin:0 0 0 10px; float:left; }

#motto { margin-top:80px; 	}
#motto p { font-size:40px; font-family:"Courier New", Courier, monospace;  margin-left:225px; }

#social_media	{ float:right; position:absolute; top:0; right:50px;	}
#social_media img { width:34px; height:34px; 	}
#social_media li { padding-top:40px; list-style:none; }

#topnav	{ background-color:#B3B366; clear:both; }
#topnav ul	{ width:100%; float:left; margin: 0px; background-color:#B3B366;
				border-bottom:2px #000000 solid; border-top:2px #000000 solid; }
#topnav ul li	{ font-size:18px; font-family:"Courier New", Courier, monospace;  
					color:#000000; display:inline;}
#topnav ul li a	{ float:left; padding:10px 20px;  }
#topnav a:link	{ color:#000000; }
#topnav a:visited	{ color:#000000; }
#topnav a:active	{ color:#000000; }
#topnav a:hover		{ color:#000000; background-color:#BEBE7E }
#topnav a:focus		{ color:#000000; }

#subbanner { font-size:22px; font-family:"Courier New", Courier, monospace;
			  width:100%; background-color:#B3B366; border-top:2px #000000 solid;
			  border-bottom:2px #000000 solid;  }
			  
#subbanner h3 { margin:12px auto; text-align:center; }

#content		{float:left; width:650px; padding:20px; }

#content h1		{text-align:center; font-size:20px;	}

#content p		{font-size:14px; margin-top:10px; }

thanks for any help!!

Mike

[ms1780]

Sorry, the background color that is showing in the thin line between the banner image and the subbanner is actually set in the css body tag and the image size is 900px X 300px if that matters.

[LearningCoder]

Judging from what you've said and the code I've seen, try taking off the float: left declaration on your #logo tag. I have highlighted the changes in red. Copy and paste this and see if it is what you desire.

/* Global */

html	{	}
body	{ background-color:#666633;	font-family:"Courier New", Courier, monospace;}






/* Containers */

#wrapper { width:900px; margin:0px auto; background-color:white; }

#top { background-color:#663300; width:100%; padding: 10px 0; overflow:hidden; position:relative;}

#logo { margin:0 0 0 10px;}//deleted float: left;

#motto { margin-top:80px; 	}
#motto p { font-size:40px; font-family:"Courier New", Courier, monospace;  margin-left:225px; }

#social_media	{ float:right; position:absolute; top:0; right:50px;	}
#social_media img { width:34px; height:34px; 	}
#social_media li { padding-top:40px; list-style:none; }

#topnav	{ background-color:#B3B366; clear:both; }
#topnav ul	{ width:100%; float:left; margin: 0px; background-color:#B3B366;
				border-bottom:2px #000000 solid; border-top:2px #000000 solid; }
#topnav ul li	{ font-size:18px; font-family:"Courier New", Courier, monospace;  
					color:#000000; display:inline;}
#topnav ul li a	{ float:left; padding:10px 20px;  }
#topnav a:link	{ color:#000000; }
#topnav a:visited	{ color:#000000; }
#topnav a:active	{ color:#000000; }
#topnav a:hover		{ color:#000000; background-color:#BEBE7E }
#topnav a:focus		{ color:#000000; }

#subbanner { font-size:22px; font-family:"Courier New", Courier, monospace;
			  width:100%; background-color:#B3B366; border-top:2px #000000 solid;
			  border-bottom:2px #000000 solid;  }
			  
#subbanner h3 { margin:12px auto; text-align:center; }

#content		{float:left; width:650px; padding:20px; }

#content h1		{text-align:center; font-size:20px;	}

#content p		{font-size:14px; margin-top:10px; }

CSS:

<div id="topnav">
	 <ul>
	 	<li><a href="index.html">Welcome</a></li>
	 	<li><a href="products.html">Products</a></li>
	 	<li><a href="contact.html">Contact Us</a></li>
	 </ul>
</div> 
	
<div id="banner">
	<img src="Images/Advantage-Max-4 (1).jpg" id="logo" />
</div>
	
<div id="subbanner">
	<h3>FREE SHIPPING ON ALL ORDERS!</h3>
</div>

<div id="content">
	<h1>KILL BOX DECOY WEIGHTS. THE BEST WEIGHT EVER      MADE</h1>
	<p>

	</p>		
</div>

Kind regards,

LC.

[ms1780]

The id=logo image is not the one I am having any issues with. I didn't paste that part of the html, sorry. The image with the issue is the one in the id=banner. The css never references it.

I did try your suggestion though.


I have included an attachment of a screen shot. You can see the thin line between the large image and the subbanner that says free shipping.

[SB65]

Very difficult without seeing the page.

It might be because you haven't declared the image in #banner as a block element. In the absence of such a declaration, browsers will leave a small gap under the inline image element - which would accommodate the tails of g,p,y etc. This manifests as a gap under the image.

Try adding:

#banner img{display:block}

If this doesn't do the trick, can you post a link to your page?

[ms1780]

Worked like a charm. Thank you very much.

Mike