Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thin line of background showing between divs

    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.

    Code:
    <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........

    Code:
    /* 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

  • #2
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    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.

    Code:
    /* 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:
    Code:
    <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.
    Last edited by LearningCoder; 12-11-2012 at 03:16 PM.

  • #4
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Attached Thumbnails Attached Thumbnails Thin line of background showing between divs-website-image.jpg  

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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:

    Code:
    #banner img{display:block}
    If this doesn't do the trick, can you post a link to your page?

  • Users who have thanked SB65 for this post:

    ms1780 (12-11-2012)

  • #6
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Worked like a charm. Thank you very much.

    Mike


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •