PDA

Click to See Complete Forum and Search --> : What is wrong with this code?

jmilin5931
05-24-2007, 08:29 AM
I don't know where the margin is coming from between the very top black div, and the blue gradient div underneeth it. Does anyone know how I can get rid of this space? I attached a screenshot of what it looks like, and here is the code with CSS:

--------------------------------------------------------------

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Fixed Layout #2.2- (Fixed-Fixed)</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

/*---Font styles----*/

b{font-size: 110%;}

em{color: red;}

h8{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
}

/*---Div styles----*/

#extendcontainer{
width: 100%; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#maincontainer{
width: 720px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#top1{
background-image:url(imgs/top1.png);
float:inherit;
height: 52px;
margin:0px;
}

#heading{
background-image:url(imgs/header_bg.png);
float:inherit;
height: 187px;
margin:0px;
}

#headingText{
width: 720px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection h1{
margin: 0;
}

#contentwrapper{
float: left;
width: 100%;
margin-top:20px;
}

#contentcolumn{
margin-right: 300px; /*Set right margin to RightColumnWidth*/
}

#rightcolumn{
float: left;
width: 300px; /*Width of right column*/
margin-left: -300px; /*Set left margin to -(RightColumnWidth) */
margin-top:20px;
background: #f9efa6;
}

#footer{
clear: left;
width: 100%;
height:70px;
background-image:url(imgs/footer_bg.png);
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #000000;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

.style1 {color: #000000}
</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>
<body>
<div id="extendcontainer">

<div id="top1"><h8>safasfsafsa</h8></div>

<div id="heading">
<div id="headingText">
<h1>CSS Fixed Layout</h1>
</div>
</div>

<div id="maincontainer">

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text heretext here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here<br />
<br />
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here</div>
</div>
</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>300px</em></b> text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here</div>

</div>
</div>

<div class="style1" id="footer">© 2007 Cutting Edge Media. All Rights Reserved.</div>

</div>
</body>
</html>

------------------------------------------------------

Thanks for your help! -Jeff
WebJoel
05-24-2007, 08:33 AM
...there is no such "<div id="top1"><h8>safasfsafsa</h8></div>

body{
margin:0;
padding:0;
line-height: 1.5em;
} is good, but:

* {margin:0;padding:0;}
body {line-height: 1.5em;}
is more versatile and will probably solve the problem. But you will now need to explicitely state margins & padding for every element to make this work. :)