...

View Full Version : Resolved Tiny gap between two divs, can't find the cause



garymce
10-22-2009, 02:46 AM
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.



<!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>




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

tomws
10-22-2009, 03:45 AM
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 (http://getfirebug.com/).

Excavator
10-22-2009, 03:47 AM
Hello garymce,
Do you really need a height there at all? Try it like this -
div#navbar {
/*height: 1.75em;*/
text-align: center;
}

tomws
10-22-2009, 04:03 AM
@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.

Excavator
10-22-2009, 04:16 AM
@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.
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.

garymce
10-22-2009, 01:09 PM
So there is.
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum