Can someone please help with this coding headache!

Toppers · May 16, 2011

Any suggested will be greatly appreciated.
Been scratching my head with this all afternoon.

Basically between Nav Bar <div> and Main image <div> there is an unexplainable breaker appearing in the web browser containing a colour that I can't find anywhere in the browser. These two divs should snap together without a gap.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Description" content="Ballroom and Latin Dance Lessons">
<meta name="Keywords" content="ballroom, latin, dance, lessons, waltz, foxtrot, dancing, quickstep. jive, sequence, tango">
<title>Come Dance Website</title>
<link href="Layout.css" rel="stylesheet" type="text/css">
<style type="text/css">
#Container {
width: 1024px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
background-color: #977769;
}
#Container #HeaderContainer {
height: 151px;
width: 1024px;
background-color: #000;
}
#Container #HeaderContainer #logo {
background-color: #666;
height: 150px;
width: 400px;
float: left;
}
#Container #HeaderContainer #address {
background-color: #666;
height: 150px;
width: 624px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFF;
line-height: 22px;
text-align: left;
word-spacing: 0em;
letter-spacing: 0em;
margin: 0px;
text-indent: 415px;
vertical-align: text-bottom;
background-image: url(images/address_banner.png);
}
#Container #Navbar {
background-color: #FEA42C;
height: 40px;
width: 1024px;
}
#Container #mainimage {
background-color: #FEA42C;
height: 500px;
width: 1024px;
padding: 0px;
background-image: url(images/main_bg_image.jpg);
}
#Container #mainimage #maintext {
height: 380px;
width: 470px;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
line-height: 20px;
padding-top: 0px;
padding-right: 60px;
padding-bottom: 60px;
padding-left: 25px;
}
#Container #footerContainer {
background-color: #666;
height: 160px;
width: 1024px;
color: #999;
}
#Container #seotext {
background-color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999;
}
#Container #footerContainer #footerleft {
background-color: #000;
float: left;
width: 1024px;
height: 150px;
color: #999;
text-align: left;
text-indent: 25px;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
}
.class1 A:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFF;
}
.class1 A:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFF;
}
.class1 A:active {text-decoration: none}
.class1 A:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCC;
}

.class2 A:link {
text-decoration: underline;
font-size: 14px;
}
.class2 A:visited {
text-decoration: none;
font-size: 14px;
}
.class2 A:active {
text-decoration: none;
font-size: 14px;
}
.class2 A:hover {
text-decoration: underline;
color: #FFF;
font: 14;
}
</style>
<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript">
</script>

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21112779-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById; return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

</head><body bgcolor="#666666" onload="MM_preloadImages('images/home_nav_ro.jpg','images/about_nav_ro.jpg','images/equipment_nav_ro.jpg','images/gallery_nav_ro.jpg','images/contact_nav_ro.jpg')">
<div id="Container">
<div id="HeaderContainer">
<div id="logo"><img src="images/logo.png" width="400" height="150" alt="Aardvark soft play Parties Logo"></div>
<div id="address"> <br>
<br>
<address>Call us today on:</address>
<address>Tel: 01438 759172</address>
<address>Mob: 07927 674660</address>
</div>
</div>

<div id="Navbar"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home nav','','images/home_nav_ro.jpg',1)"><img src="file:///ToppersData/Toppers%20FilingNEW/A/Aardvark%20Soft%20Play/Website/Website/images/home_nav.jpg" alt="home nav" name="home nav" width="205" height="40" border="0" id="home nav"></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about nav','','images/about_nav_ro.jpg',1)"><img src="file:///ToppersData/Toppers%20FilingNEW/A/Aardvark%20Soft%20Play/Website/Website/images/about_nav.jpg" alt="about nav" name="about nav" width="205" height="40" border="0" id="about nav"></a><a href="equipment.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('equipment nav','','images/equipment_nav_ro.jpg',1)"><img src="file:///ToppersData/Toppers%20FilingNEW/A/Aardvark%20Soft%20Play/Website/Website/images/equipment_nav.jpg" alt="equipment nav" name="equipment nav" width="205" height="40" border="0" id="equipment nav"></a><a href="gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gallery nav','','images/gallery_nav_ro.jpg',1)"><img src="file:///ToppersData/Toppers%20FilingNEW/A/Aardvark%20Soft%20Play/Website/Website/images/gallery_nav.jpg" alt="gallery nav" name="gallery nav" width="205" height="40" border="0" id="gallery nav"></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact nav','','images/contact_nav_ro.jpg',1)"><img src="file:///ToppersData/Toppers%20FilingNEW/A/Aardvark%20Soft%20Play/Website/Website/images/contact_nav.jpg" alt="contact nav" name="contact nav" width="204" height="40" border="0" id="contact nav"></a></div>

<div id="mainimage">
<div id="maintext">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br>
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <br>
<br>
Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br>
<br>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br>
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure.<br>
</p>
<p> </p>
<h3> </h3>
</div>
</div>

<div id="footerContainer">
<div id="footerleft">
<h5>follow us on... <a href="http://www.facebook.com/profile.php?id=100002371725661" target="_new"><img src="images/Facebook.jpg" width="60" height="60" alt="facebook"></a> </h5>
<table width="140" border="0">
<tbody><tr>
<td width="70" align="center"> </td>
<td width="7align=" center"=""> </td>
</tr>
</tbody></table>
</div>

</div>
<div id="seotext">Soft Play Parties in stevenage | hitchin | letchworth | welwyn | knebworth | hatfield | hertfordshire | bedfordshire | Bouncy castles | Ball ponds | Special needs equipment | Birthdays | Weddings | Christening | Corporate days| Garden parties
<br>
<br>
<span class="class1">
<a href="http://www.toppersprint.com" target="_new">websites by toppers print and design limited</a><p></p>

</span></div>
</div>

</body></html>

djb · May 16, 2011

Don’t suppose you can get it online and give us a link to it? I’m not clever enough to work it out from that lot!

Also, if you haven’t already, get the Firebug addon for Firefox - it’s perfect for working out these things.

squeezee · May 16, 2011

Your container colour is #977769, I changed that to your Navbar colour #FEA42C and the bar 'disappeared'.
Not sure why it is showing the container background, probably a margin value somewhere.

Corrosive · May 16, 2011

Agree with djb. Would be better to see this online somewhere to debug. My initial thoughts are that your opening and closing div tags seem out of balance but that is an educated guess. It would help a lot if you commented your code.

djb · May 16, 2011

I put the following in with the styles and it seems to work for me:

p {
margin: 0;
}

Actually, not sure whether it’s the right or wrong way of doing things but I generally set the padding to 0 for P as well just to reset everything before I muck around with any other styles.

Corrosive · May 16, 2011

Meyer's reset is a good place to start. That way you set your own styles rather then using the defaults; CSS Tools: Reset CSS

Can someone please help with this coding headache!

Toppers

Member

djb

Member

squeezee

Member

Corrosive

Well-Known Member

djb

Member

Corrosive

Well-Known Member