PDA

Click to See Complete Forum and Search --> : Gap in Background

StuPeas
06-05-2006, 06:41 AM
Im doing the example from chapter 8 of sitePoints css utopia and ive come across an effect that i just cant get my head around.

I have a main div that contains all the main content and the sidebar for the page, and it has no padding set.

Inside the main div is the content div that holds only the content and not the sidebar- also with no padding or top margins.

Directly inside this div is a "mainfeature" div that acts as a "blockbox",contianing the initial H2 header and a couple of paragraphs - also with no padding or margins set.

My question is---Why, when i apply a backround colour rule (with css) to the mainfeature div, does that background colour not extend to the top of the main div. After all i have no padding set on either the main or content divs.

Please note that i know how to fix this, but that is not what im asking. Im more interested in finding out what is going on here (this is why ive commented out the css that fixes the problem.

Thanx in advance.

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

<head>
<title>Footbag Freaks</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

body {
margin:0;
padding:0;
background-color:#050845;
color:white;
background-image:url(shared/footbag_freaks_images/bg.jpg);
background-repeat:repeat-x;
font: small Arial, Helvetica, Verdana, sans-serif;
}

#wrapper {
background-color:#fdf8f2;
color:black;
margin:30px 40px 30px 40px;
padding:10px;
}

#header-bottom {
border-top: 1px solid #b9d2ef;
border-bottom: 1px solid #b9d2ef;
}

#header-bottom ul {
margin:0;
padding:0;
padding:0 30px 0 0;
text-align:right;
}

#header-bottom li {
display:inline;
background-color: #fdf8f2;
color: #050845;
}

#header-bottom a:link, #header-bottom a:visited {
text-decoration:none;
background-color: #fdf8f2;
color: #050845;
}

#tagline {
font-weight: bold;
background-color: #fdf8f2;
color:#050845;
font-style: italic;
margin:0;
padding: 0 0 0 20px;
width:300px;
float:left;
}

#ball {
position: absolute;
top:110px;
right:55px;
}

#main {
margin-top:10px;
background-color:red;
}

#content {
margin: 0 240px 0 0;
border:1px solid #b9d2e3;
background-color:lightblue;
color:black;
}

#mainfeature{
/* background-image: url(shared/footbag_freaks_images/mainimg.jpg);
background-repeat:no-repeat;*/
background-color: #112236;
color:white;
/* padding: 2em 2em 1em 200px;*/
}


#mainfeature h2{
/*margin:0;*/
font-weight:normal;
font-size:140%;
color:white;
}





</style>

</head>

<body>

<div id="wrapper">

<div id="header">
<img src="shared/footbag_freaks_images/logo.gif" alt="Footbag Freaks" height="77" width="203" />
<div id="header-bottom">
<p id="tagline">The Home of the Hack</p>
<ul>
<li><a href="">Contact Us</a> | </li>
<li><a href="">About Us</a> | </li>
<li><a href="">Privacy Policy</a> | </li>
<li><a href="">Sitemap</a></li>
</ul>
<img src="shared/footbag_freaks_images/header-ball.gif" height="24" width="20" alt="" id="ball" />
</div> <!--End Header-Bottom-->
</div> <!--End Header-->

<div id="main">

<div id="content">

<div id="mainfeature">
<h2>Simon Says</h2>
<p>Simon Mackie tells us how a change has given him new moves and a new
outlook as the new season approaches.</p>
<p><a href="">Read More</a></p>
</div> <!--End Mainfeature-->

<h2>Recent Features</h2>
<ul>
<li>
<h3>Head for the Hills: Is Altitude Training the Answer?</h3>
<p>Lachlan 'Super Toe' Donald</p>
<p>fjdhh hhrywk cnjde fjfk jue e ssnfjjg ffkkdje ddjdg fj y llssbfgdh heotvals gdksmrbt
ejegssl nfrhfd kek ekkfu ttjse, rkfirkel rhjesmf rme</p>
<p><a href="">Full Story</a></p>
</li>

<li>
<h3>Hack up the Place: Freestylin' Super Tips</h3>
<p>Jules 'Pony King' Szemere</p>
<p>hujgff hjkkunb jdesjbvtoo llfdcvbtsdaweojgfbv lkdsnhctdfaraldksugvbqpic
hyt fredf fr tghyuj kkijgf ftrgd ghyj llokgtsbbg </p>
<p><a href="">Full Story</a></p>
</li>

<li>
<h3>The Complete Black Hat Hackers Survival Guide</h3>
<p>Mark 'Steel Tip' Harbottle</p>
<p>hdys jsurn ffkie kaalld jjrjdn kkd rhht ksbgk dhhryys ksgnhftd kks dggr hhr r rrjd haaie
hhedj</p>
<p><a href="">Full Story</a></p>
</li>

<li>
<h3>Five Tricks You Didnt Even Know You Knew</h3>
<p>Simon 'Mack Daddy' Mackie</p>
<p>dghys flgkks djfurnncd ddmf ddkswkf dskfnnr d sjjff dnsjjt dmmck dkkrnt djjss rrr
ehfjjdnsjj pttie smmf cdjje dkk kslsa ff fm k</p>
<p><a href="">Full Story</a></p>
</li>
</ul>
</div> <!--End Content-->

<div id="sidebar">
<h3>Site Search</h3>
<form method="post" action="" id="searchform">
<div>
<label for="keywords">Keywords</label>:
<input type="text" name="keywords" id="keywords" />
</div>
<div>
<input type="submit" name="btnSearch" id="btnSearch" />
</div>
</form>

<h3>Coming Events</h3>
<ul>
<li>10 April 06 -<br /><a href="">Seattle Zone Qualifier</a></li>
<li>13 April 06 -<br /><a href="">World Cup - Round 8</a></li>
<li>21 April 06 -<br /><a href="">FootbagOOM 05 - NY</a></li>
<li>28 April 06 -<br /><a href="">WFPA AGM - Hong Kong</a></li>
<li>3 May 06 -<br /><a href="">World Cup - Round 9</a></li>
</ul>

<h3>Move of the Month</h3>
<h4>The Outer Stall</h4>
<p>jdh nwnn duilaa js htmssk jsjrrnnw ppeiisn ffkk a ddorke dksuur dksmmak ddlk
hrrmeeussmf kkrla mmreds ddmmrot rkfmdds</p>
<p><a href="">More</a></p>
</div>
<!--End Sidebar-->
</div> <!--End Main-->

</div> <!--Wrapper Div-->
</body>
</html>
KDLA
06-05-2006, 10:43 AM
<div> is short for division. Each div divides the page into a block. The styles/attributes you set for each block will only apply to that block and its contents: whether text or more divs. The formatting will not apply to divs outside that block.

http://www.w3.org/TR/REC-CSS2/box.html
StuPeas
06-05-2006, 12:03 PM
I know what div is short for and i know about css. If you look at the code you will see that the divs in question are nested, and their tops should all be aligned becouse there is no padding or margins applied to any of them. This means that the background image applied to the mainfeature div should touch the top of both the content and main divs (according to the css box model)..

thanx for the reply anyway !
KDLA
06-05-2006, 01:18 PM
You've not set margins for the div in question:#mainfeature{
/* background-image: url(shared/footbag_freaks_images/mainimg.jpg);
background-repeat:no-repeat;*/
background-color: #112236;
color:white;
/* padding: 2em 2em 1em 200px;*/
}
The lack of margins will cause some browsers to inject some space between divs.
StuPeas
06-05-2006, 01:31 PM
I have tried setting all 3 of the divs margins to zero and it still doesnt work. It does work if you apply a rule to all elements though ( *{margin:0} ).
However, i want to know why the boxes dont align even when the 3 divs margins are set to zero individualy.

as i mentioned before--i know how to fix it, but i dont know why the box model is not being implemented properly

Thanx
ray326
06-05-2006, 08:54 PM
Because the margin-top on the h2 is shoving the containing div down.
StuPeas
06-06-2006, 02:45 PM
Cheers ray326, I overlooked the fact that margins collapse (overlap) unless padding or borders are set on the containing div.

Thanx all