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
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tiny gap between two divs, can't find the cause

    Hi there

    I'm currently in the process of building a website and I've run into a tiny silly little error that I just can't seem to get around.

    http://www.gm-pcsupport.com/

    If you look under the navigation bar, there's a tiny gap of one or two pixels between the bar and the background image for the div I'm using as a wrapper for the main content.

    Code:
    <!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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>GM PC Support</title>
    <link rel="stylesheet" type="text/css" href="default.css"/>
    <!-- Designed by Gary McEnroe -->
    </head>
    
    <body>
    
    <!-- HEADER BEGINS -->
    
    <div id="wrapper">
    
    	<div id="header">
    
    		<h1><a href="/" title="Home Page">GM PC Support</a></h1>
    		<div id="header-right-mask">&nbsp;</div>
    		<div id="header-right">&nbsp;</div>
    	</div>
    
    <!-- HEADER ENDS -->
    
    <!-- NAVBAR BEGINS -->
    
    	<div id="navbar">
    		<ul>
    
    			<li><a href="/" title="Home">Home</a></li>
    			<li><a href="/about.php" title="About">About</a></li>
    			<li><a href="/services.php" title="Services">Services</a></li>
    			<li><a href="/contact.php" title="Contact">Contact</a></li>
    		</ul>
    	</div>
    
    <!-- NAVBAR ENDS -->
    
    	<div id=content>
    
    		<div id="maintext">
    			<h2>Welcome</h2>
    			<p>This site is under construction.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat ullamcorper libero, id sagittis velit tristique eu. Proin aliquam neque eu ipsum luctus cursus. In et vestibulum dui. Vestibulum luctus, tellus facilisis laoreet venenatis, ligula dolor tempus ante, at congue risus urna et diam. Quisque nec risus enim. Aenean mollis metus cursus risus elementum scelerisque. Donec iaculis varius enim, a fermentum nisi mollis quis. Sed dui lorem, interdum rutrum tempus fringilla, mollis tincidunt risus. Donec lacus diam, ullamcorper ac vulputate eu, porttitor sit amet augue. Sed tempor lacus nec mi ullamcorper sit amet vestibulum turpis viverra. Integer in quam vitae nunc sagittis sagittis in a metus.</p>
    			<p>Curabitur dui massa, venenatis in pharetra eget, aliquet id augue. Etiam ut mi ante. Sed molestie erat nec est ornare nec bibendum urna dictum. Vivamus consectetur vestibulum orci, at vehicula magna ullamcorper ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus id nunc a felis auctor rhoncus. Aliquam vitae nisi orci. Morbi et tortor metus, vel pellentesque ante. Curabitur metus tellus, fermentum non faucibus vitae, laoreet sed purus. Ut vehicula faucibus urna, vel auctor risus luctus eget. Sed leo massa, aliquam nec tempor a, volutpat et nibh.</p>
    
    			<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sit amet dolor tellus, fermentum dictum magna. Morbi lacinia, nulla in euismod ultricies, nibh arcu vehicula ligula, id convallis diam nisi quis velit. Aenean ut tellus a ligula elementum consequat. Nam accumsan, erat et blandit fermentum, ipsum erat cursus sem, non suscipit ligula metus sed lectus. Quisque urna magna, aliquam vel consequat vitae, condimentum non ante. Maecenas vel justo sit amet dui sollicitudin rutrum. Maecenas vitae fermentum mi. Phasellus dapibus purus sed diam pulvinar porttitor. Praesent iaculis urna in lorem luctus in imperdiet arcu luctus.</p>
    			<p>Praesent tempor iaculis purus dignissim pellentesque. Cras cursus eleifend elit, et semper metus accumsan sit amet. Sed lacinia sem ac erat dignissim tristique. Nunc sed urna eu justo rhoncus elementum. Fusce in lorem lorem, quis tincidunt nulla. Etiam vel ipsum non felis dapibus dignissim. Aliquam elit lorem, viverra congue pharetra semper, fermentum non erat. Cras metus elit, convallis in cursus sed, fermentum eu massa. Cras urna diam, rutrum et laoreet a, adipiscing in dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius porta congue. Ut nec tempus sem. Aenean vulputate libero vitae orci consectetur sed cursus dolor varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel enim sed eros molestie semper vitae nec leo. Donec vel vestibulum nisi. Vivamus malesuada, risus quis tempus tempor, mi quam egestas libero, eget convallis enim odio non justo.</p>
    			<p>Sed id semper metus. Praesent ac nibh tellus. Morbi rutrum dignissim semper. Sed id erat in tellus lacinia pretium. Integer sed mauris dolor. Fusce interdum elit sed nisl tempor aliquam. Curabitur a mauris ut ipsum accumsan interdum viverra eu ante. Cras nisi nunc, ullamcorper eget malesuada sed, sollicitudin et odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec adipiscing condimentum tempus. Duis vulputate velit eget velit convallis facilisis ornare est sagittis. Vestibulum at quam quam, sed hendrerit ligula. Sed quis diam non est bibendum accumsan. Cras metus urna, condimentum nec sagittis nec, tempor vel augue. In scelerisque, odio eget dictum volutpat, justo eros mollis massa, a molestie dui augue eu leo. Proin congue, dolor id dictum adipiscing, sem urna auctor elit, nec varius felis odio eget lorem. Nunc vitae arcu eget leo commodo semper id eget sem. Proin libero nulla, laoreet at venenatis eu, ultrices laoreet est.</p>
    			<p>Curabitur dui massa, venenatis in pharetra eget, aliquet id augue. Etiam ut mi ante. Sed molestie erat nec est ornare nec bibendum urna dictum. Vivamus consectetur vestibulum orci, at vehicula magna ullamcorper ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus id nunc a felis auctor rhoncus. Aliquam vitae nisi orci. Morbi et tortor metus, vel pellentesque ante. Curabitur metus tellus, fermentum non faucibus vitae, laoreet sed purus. Ut vehicula faucibus urna, vel auctor risus luctus eget. Sed leo massa, aliquam nec tempor a, volutpat et nibh.</p>
    			<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sit amet dolor tellus, fermentum dictum magna. Morbi lacinia, nulla in euismod ultricies, nibh arcu vehicula ligula, id convallis diam nisi quis velit. Aenean ut tellus a ligula elementum consequat. Nam accumsan, erat et blandit fermentum, ipsum erat cursus sem, non suscipit ligula metus sed lectus. Quisque urna magna, aliquam vel consequat vitae, condimentum non ante. Maecenas vel justo sit amet dui sollicitudin rutrum. Maecenas vitae fermentum mi. Phasellus dapibus purus sed diam pulvinar porttitor. Praesent iaculis urna in lorem luctus in imperdiet arcu luctus.</p>
    			<p>Praesent tempor iaculis purus dignissim pellentesque. Cras cursus eleifend elit, et semper metus accumsan sit amet. Sed lacinia sem ac erat dignissim tristique. Nunc sed urna eu justo rhoncus elementum. Fusce in lorem lorem, quis tincidunt nulla. Etiam vel ipsum non felis dapibus dignissim. Aliquam elit lorem, viverra congue pharetra semper, fermentum non erat. Cras metus elit, convallis in cursus sed, fermentum eu massa. Cras urna diam, rutrum et laoreet a, adipiscing in dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius porta congue. Ut nec tempus sem. Aenean vulputate libero vitae orci consectetur sed cursus dolor varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel enim sed eros molestie semper vitae nec leo. Donec vel vestibulum nisi. Vivamus malesuada, risus quis tempus tempor, mi quam egestas libero, eget convallis enim odio non justo.</p>
    
    			<p>Sed id semper metus. Praesent ac nibh tellus. Morbi rutrum dignissim semper. Sed id erat in tellus lacinia pretium. Integer sed mauris dolor. Fusce interdum elit sed nisl tempor aliquam. Curabitur a mauris ut ipsum accumsan interdum viverra eu ante. Cras nisi nunc, ullamcorper eget malesuada sed, sollicitudin et odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec adipiscing condimentum tempus. Duis vulputate velit eget velit convallis facilisis ornare est sagittis. Vestibulum at quam quam, sed hendrerit ligula. Sed quis diam non est bibendum accumsan. Cras metus urna, condimentum nec sagittis nec, tempor vel augue. In scelerisque, odio eget dictum volutpat, justo eros mollis massa, a molestie dui augue eu leo. Proin congue, dolor id dictum adipiscing, sem urna auctor elit, nec varius felis odio eget lorem. Nunc vitae arcu eget leo commodo semper id eget sem. Proin libero nulla, laoreet at venenatis eu, ultrices laoreet est.</p>
    			</div>
    		
    		<div id="sidebar2">
    			<p>&nbsp;</p>
    		</div>
    
    	</div>
    	
    <!-- FOOTER BEGINS -->
    	<div id="clearfooter"></div>
    
    </div>
    
    <div id="footer">
    	<p>&copy; 2009 GM PC Support<br/>
    	Website designed by <a href="gary@gm-pcsupport.com">Gary McEnroe</a></p>
    </div>
    	
    
    
    <!-- FOOTER ENDS -->
    	
    </body>
    </html>
    Code:
    /* ----- BEGIN PAGE FORMATTING ----- */
    * {
    	padding: 0;
    	margin: 0;
    }
    
    html,body {
    	height: 100%;
    }
    
    body {
    	font-size: 1em;
    	font-family: Calibri, Verdana, Arial, Sans-serif;
    	text-align: center;
    }
    
    h1 {
    	font-size: 1.6em;
    	padding: 10px 10px 0;
    }
    
    h2 {
    	font-size: 1.4em;
    	padding: 10px 10px 0;
    }
    
    p {
    	padding: 0 10px 1em;
    }
    
    a {
    	color: 00a2ff;
    	text-decoration: none;
    }
    /* ----- END PAGE FORMATTING ----- */
    
    /* ----- BEGIN WRAPPER ----- */
    
    div#wrapper {
    	min-height: 100%;
    	background-color: #fff;
    	margin: 0 auto;
    	text-align: center;
    }
    /* ----- END WRAPPER ----- */
    
    /* ----- BEGIN HEADER ----- */
    
    div#header {
    	text-indent: -9000px;
    	height: 105px;
    	width: 100%;
    	background-color: #333333;
    }
    
    div#header a {
    	position: absolute;
    	left: 2px;
    	top: 2px;
    	display: block;
    	width: 375px;
    	height: 100px;
    	background-image: url('/theme/img/header.png');
    	background-repeat: no-repeat;
    	z-index: 5;
    }
    
    div#header-right-mask{
    	display: block;
    	width: 350px;
    	height: 105px;
    	position: absolute;
    	top: 0;
    	right: 0;
    	background-image: url('/theme/img/head-right-over.png');
    	background-position: right;
    	background-repeat: no-repeat;
    	z-index: 3;
    }
    
    div#header-right{
    	display: block;
    	width: 350px;
    	height: 105px;
    	position: absolute;
    	top: 0;
    	right: 0;
    	background-image: url('/theme/img/head-right-kb.png');
    	background-position: right;
    	background-repeat: no-repeat;
    	z-index:2;
    }
    /* ----- END HEADER ----- */
    
    /* ----- BEGIN NAVBAR ----- */
    
    div#navbar {
    	height: 1.75em;
    	text-align: center;
    }
    
    div#navbar ul {
    	list-style-type: none;
    	padding: 0;
    	margin: 0;
    	width: 100%;
    	background-image: url('/theme/img/navbar-bg.png');
    	background-repeat: repeat-x;
    	background-color: #999;
    	border-top: 1px solid #666;
    	border-bottom: 1px solid #666;
    	float: left;
    	clear: right;
    }
    
    div#navbar li {
    	display: inline;
    }
    
    div#navbar a {
    	float: left;
    	width: 6em;
    	text-decoration: none;
    	color: white;
    	background-image: url('/theme/img/navbar-a-bg.png');
    	background-repeat: repeat-x;
    	background-color: #999;
    	padding: 0.2em 0.6em;
    	border-right: 1px solid #666;
    }
    div#navbar a:hover {
    	background-image: url('/theme/img/navbar-hover.png');
    	background-repeat: repeat-x;
    	background-color: #00a2ff;
    }
    
    /* ----- END NAVBAR ----- */
    
    /* ----- BEGIN MAIN CONTENT ----- */
    div#content {
    	text-align: left;
    	background-image: url('/theme/img/content-bg.png');
    	background-repeat: repeat-x;
    	background-color: #fff;
    }
    
    div#maintext {
    	padding-left: 100px;
    }
    
    /* ----- END MAIN CONTENT ----- */
    
    /* ----- BEGIN FOOTER  ----- */
    div#clearfooter {
    	height: 50px;
    	clear: both;
    }
    div#footer {
    	text-align: right;
    	height: 40px;
    	padding-top: 10px;
    	margin: -51px auto 0 auto;
    	background-color: #333;
    	border-top: 1px solid #999;
    }
    div#footer p{
    	font-size: 0.7em;
    	color: #ccc;
    }
    div#footer a{
    	color: #00a2ff;
    }
    /* ----- END FOOTER ----- */
    
    /* ----- BEGIN COMPATABILITY HACKS ----- */
    /* IE fix for page height rendering */
    * html #container {
    height: 100%;
    }
    /* ----- END COMPATABILITY HACKS ----- */
    I've been looking through the stylesheet and HTML for over an hour now and no matter what I tweak I can't seem to get rid of it. It's bound to be some tiny silly mistake somewhere that I just can't seem to find, given that it's almost 3am now, but it's driving me up the wall :-p

    If anyone could help me find it, I'd be eternally grateful.

    Thanks
    -Gary
    Last edited by garymce; 10-22-2009 at 02:09 PM.

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    It's your div#navbar height. Changing to the appropriate pixel height fixed it here. I used 24px.

    Firebug makes HTML debugging easy. Find it here.
    Are you a Help Vampire?

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello garymce,
    Do you really need a height there at all? Try it like this -
    Code:
    div#navbar {
    	/*height: 1.75em;*/
    	text-align: center;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    @Excavator: There's a background gradient there that shifts (at least in FF3) when removing that. I didn't take the time to determine the better way to fix it, though.
    Are you a Help Vampire?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Quote Originally Posted by tomws View Post
    @Excavator: There's a background gradient there that shifts (at least in FF3) when removing that. I didn't take the time to determine the better way to fix it, though.
    So there is.
    Code:
    div#navbar {
    overflow: auto;
    	text-align: center;
    }
    Clearing the float stops the contents background image from shifting.

    see http://www.quirksmode.org/css/clearing.html to see how that clears floats.
    Last edited by Excavator; 10-22-2009 at 05:22 AM. Reason: Even better.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    So there is.
    Code:
    div#navbar {
    overflow: auto;
    	text-align: center;
    }
    Clearing the float stops the contents background image from shifting.

    see http://www.quirksmode.org/css/clearing.html to see how that clears floats.
    That worked, thanks a bunch :3


  •  

    Posting Permissions

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