PDA

View Full Version : My "content" area background stops halfway down the page?



lindsayscapes
Feb 4th, 2010, 01:49 AM
My "content" area is stopping halfway down the page.
The only way I have been able to fix this is to have a fixed height, but obviously that is not something I want.
I'm sure there are a lot of other mistakes throughout, but I am going to include the HTML & CSS in hopes of some help!

HTML


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />

<title>Night Chef | Home Page</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="javascripts/prototype.js" type="text/javascript">
</script>
<script src="javascripts/scriptaculous.js" type="text/javascript">
</script>
<script defer="defer" type="text/javascript" src="pngfix.js">
</script>
</head>

<body>
<div id="outerwrapper">
<div id="innerwrapper">
<div id="header">
<div id="navigation">
<ul>
<li><a href="index.html">home</a></li>

<li><a href="night_chef_manifesto.html">manifesto</a></li>

<li><a href="night_chef_videos.html">prime cuts</a></li>

<li><a href="night_chef_the_cave">cookbook</a></li>

<li><a href="night_chef_restaurants.html">capers</a></li>

<li><a href="night_chef_biographies">the crew</a></li>

<li><a href="night_chef_news">disclosures</a></li>
</ul>
</div>
</div>

<div id="content">
<div id="top">
<div id="videobox">
<h2 id="video_header">Prime Cut</h2><object width="425" height="344">
<param name="movie" value=
"http://www.youtube.com/v/z-I_rxYc-Kg&amp;hl=en_US&amp;fs=1&amp;color1=0x3a3a3a&amp;color2=0x999999" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src=
"http://www.youtube.com/v/z-I_rxYc-Kg&amp;hl=en_US&amp;fs=1&amp;color1=0x3a3a3a&amp;color2=0x999999"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="425" height="344" />
</object>
</div>

<div id="rightside">
<img src="images/headers/night-chef.png" alt="NightChefHeader" /><br />

<p>Come along for a wild late-night ride with Night Chef and his crew as they
break in to some of the most dynamic restaurants in the country. His mission
is to recreate the most extraordinary entrées offered by these
establishments, and to do so on his own time and terms so the home viewer can
do the same. No lock or law will stop him from gaining access to the
privileged kitchen bastions where teams of dedicated food professionals work
their magic.</p>

<p>This late-night faux-reality show is one part spectacle, one part
informational, and two parts mouth-watering deliciousness with a heavy-handed
dollop of hilarity.Think Spinal Tap meets Iron Chef.</p>
</div>
</div>

<div id="blog">
<img src="images/headers/dossiers.png" alt="Dossiers" /><br />

<ul>
<li>BLOG UPDATE 3 • 03/01/10<br />
Blog update goes here. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aenean ac nisl vitae sem vulputate consequat. Duis gravida facilisis
lectus, vehicula fermentum ante consequat non. Maecenas vitae mollis diam.
Etiam in tortor justo, et hendrerit risus. Nulla mattis interdum felis, vel
adipiscing lacus dignissim at.</li>

<li>BLOG UPDATE 3 • 03/01/10<br />
Blog update goes here. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aenean ac nisl vitae sem vulputate consequat. Duis gravida facilisis
lectus, vehicula fermentum ante consequat non. Maecenas vitae mollis diam.
Etiam in tortor justo, et hendrerit risus. Nulla mattis interdum felis, vel
adipiscing lacus dignissim at.</li>
</ul>

<div id="archivebox">
<ul>
<li><a href="#">january</a></li>

<li><a href="#">february</a></li>

<li><a href="#">march</a></li>

<li><a href="#">april</a></li>

<li><a href="#">may</a></li>

<li><a href="#">june</a></li>

<li><a href="#">...more</a></li>
</ul>
</div>
</div>

<div id="accomplice">
<img src="images/headers/accomplice.png" alt="Be an Accomplice" /><br />
<span class="followus">FOLLOW US INTO THE NIGHT</span>

<ul>
<li><a href="http://twitter.com/thenightchef" target="_blank"><img src=
"images/icons/twitteregg.png" alt="Twitter" width="90" height="90" border=
"0" /></a></li>

<li><a href="http://www.facebook.com/pages/NIGHT-CHEF/199299119400?ref=nf"
target="_blank"><img src="images/icons/facebookicon.png" alt="Facebook"
width="90" height="90" border="0" /></a></li>

<li><a href="http://www.youtube.com/user/TheRealNightChef" target=
"_blank"><img src="images/icons/youtubemicrowave.png" alt="Youtube" width=
"90" height="90" border="0" /></a></li>
</ul><br />

<div id="twitter">
Twitter updates will be automatically placed here! updated on Saturday
</div><br />
<span class="enteremail">Join the mailing list</span><br />

<form action="FormToEmail.php" method="post" name="JoinMailingList">
<input name="email" type="text" value="send us your email" />
<label><input name="submit" type="submit" class="sendbtn" id="submit" value=
"send" /></label>
</form>
</div>
</div>

<div id="footer">
<p>Contact us:<br />
<a href="mailto:[email protected]">[email protected]</a><br /></p>

<div id="contact">
<span class="contactRight"><a href=
"http://www.facebook.com/pages/NIGHT-CHEF/199299119400?ref=nf" target=
"_blank">Facebook</a><br />
<a href="http://www.youtube.com/user/TheRealNightChef" target=
"_blank">YouTube</a></span> <span class="contactLeft"><a href=
"http://www.foursquare.com" target="_blank">Foursquare</a><br />
<a href="http://twitter.com/thenightchef" target="_blank">Twitter</a></span>
</div>
</div>
</div>
</div>
</body>
</html>

and CSS


@charset "utf-8";
/* CSS Document */

body {
font-family: Verdana, Arial, "Helvetica", sans-serif;
color: #CCCCCC;
font-size: 12px;
font-weight: lighter;
text-decoration: none;
height: 100%;
background-image: url(images/bg/background.jpg);
background-repeat: repeat;
}


html {
overflow-y: scroll;
height: 100%;
}

h1, h2, h3, h4, h5, h6, ul, li, a, body, dv, blockquote, strong, b, img {
margin:0px;
padding:0px;
border-width:0px;
}

.followus {
font-weight: bold;
color: #CCCCCC;
font-size: 13px;
text-decoration: none;
text-transform: capitalize;
}

.clearboth {
clear: both;
padding: 2px;
}
#outerwrapper {
text-align: center;
width: 100%;
background-image: url(images/bg/lamp_logo.png);
background-repeat: no-repeat;
background-position: left top;
position: absolute;
min-height: 100%;
}

#innerwrapper {
text-align: left;
float: none;
min-height: 100%;
overflow: hidden;
width: 965px;
margin-top: 125px;
margin-left: 170px;
background-image: url(images/bg/footerbg.png);
background-repeat: no-repeat;
background-position: right bottom;
}

#header {
text-align: left;
height: 265px;
width: 100%;
}

#logo h1{
margin:0px;
text-indent:-9999px;
}
#logo {
background-image:url(images/logo.png);
background-repeat:no-repeat;
width:240px;
height:262px;
padding-left: 5px;
float:left;
}
#navigation {
float: right;
width: 682px;
height: 144px;
text-align: center;
margin-top: 120px;
background-image: url(images/bg/navigationBG.png);
background-repeat: no-repeat;
background-position: left top;
padding-left: 10px;
}

#navigation ul {
list-style-type: none;
}
.header {
margin-top: -3px;
margin-left: -10px;
}

#navigation li {
display: inline;
}
#navigation a {
color: #990000;
text-decoration: none;
font-size: 12px;
width: 90px;
display: block;
height: 26px;
float: left;
text-align: center;
font-weight: bold;
padding-top: 10px;
margin-top: 57px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 2px;
}
#navigation a:visited {
color: #990000;
text-decoration: none;
font-size: 12px;
width: 90px;
display: block;
height: 26px;
float: left;
text-align: center;
font-weight: bold;
padding-top: 10px;
margin-top: 57px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 2px;
}
#navigation a:hover {
color: #999999;
text-decoration: none;
font-size: 12px;
width: 90px;
display: block;
height: 26px;
float: left;
text-align: center;
font-weight: bold;
padding-top: 10px;
margin-top: 57px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 2px;
}
#content {
width: 964px;
min-height: 100%;
background-color: #000000;
}
.enteremail {
font-size: 10px;
float: right;
margin-right: 5px;
}
#manifesto {
background-image: url(images/manifestoLeftLine.png);
background-repeat: no-repeat;
background-position: left top;
float: left;
width: 710px;
height: 100%;
padding-right: 30px;
padding-left: 15px;
}
#manifesto p {
font-size: 13px;
line-height: 15px;
letter-spacing: 1px;
font-weight: bold;
font-family: Arial, "Helvetica", sans-serif;
text-indent: 20px;
}
#manifesto p1 {
font-size: 13px;
line-height: 15px;
letter-spacing: 1px;
font-weight: bold;
font-family: Arial, "Helvetica", sans-serif;
text-indent: 20px;
}
#manifesto h1 {
background-image: url(images/headers/covertcuisine.png);
background-repeat: no-repeat;
background-position: left top;
text-indent: -9999px;
height: 69px;
width: 509px;
margin-top: -2px;
margin-left: -10px;
}



#manifestoRightCol {
background-image: url(images/manifestoRightLine.png);
background-repeat: no-repeat;
background-position: right top;
float: right;
height: 100%;
width: 180px;
padding-top: 10px;
padding-right: 10px;
padding-left: 2px;
}
.manifestoRightCol a {
display: block;
height: 130px;
width: 166px;
margin-top: 10px;
}

#top {
text-align: left;
height: 370px;
width: 100%;
background-image: url(images/toplinesbg.png);
background-repeat: no-repeat;
background-position: right top;
padding-top: 10px;
padding-bottom: 10px;

}
#videobox {
text-align: left;
height: 375px;
width: 610px;
float: left;
}
#videobox object {
left: 92.5px;
position: relative;
float: left;
}



#rightside {
text-align: left;
float: right;
width: 330px;
height: 364px;
margin-right: 12px;
}
#rightside img {
margin-top: -10px;
}
#rightside p {
letter-spacing: 1px;
line-height: 18px;
}

#archivebox {
float: right;
height: 200px;
width: 125px;
background-image: url(images/archivebox.png);
background-repeat: no-repeat;
margin-right: 20px;
padding-top: 20px;
text-align: right;
clear: none;
}
#archivebox a {
color: #CCCCCC;
text-decoration: none;
font-style: italic;
letter-spacing: 1px;
}
#archivebox a:hover {
color: #666666;
text-decoration: none;
font-style: italic;
letter-spacing: 1px;
}
#archivebox a:visited {
color: #CCCCCC;
text-decoration: none;
font-style: italic;
letter-spacing: 1px;
}





#blog {
text-align: left;
float: left;
width: 610px;
background-image: url(images/bloglinesbg.png);
background-repeat: no-repeat;
background-position: right top;
margin-top: 30px;
height: 300px;
}


#blog ul {
list-style-type: none;
float: left;
width: 400px;
}
#blog li {
display: block;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}


#accomplice {
float: right;
width: 320px;
background-image: url(images/accomplicebarlinesbg.png);
background-repeat: no-repeat;
background-position: right top;
clear: right;
margin-top: 30px;
height: 300px;
padding-left: 10px;
}
#accomplice img {
margin-left: -10px;
}



#footer {
text-align: right;
height: 270px;
width: 100%;
background-image: url(images/bg/footer.png);
background-repeat: no-repeat;
background-position: left top;
padding-top: 20px;
}

h2#video_header {
text-indent:-9999px;
background-image:url(images/headers/primecut.png);
background-repeat:no-repeat;
width:164px;
height:31px;
margin-top: -10px;
}



#archivebox ul {
float: right;
list-style-type: none;
width: 125px;
}
#archivebox li {
font-size: 10px;
height: 10px;
padding-top: 2px;
padding-bottom: 5px;
width: 100px;
margin-right: 10px;
}
#accomplice form {
margin-top: 0px;
float: right;
margin-bottom: 0px;
}
#thankyoupage {
margin-top: 200px;
width: 300px;
margin-right: auto;
margin-left: auto;
background-image: url(images/transparentbg.png);
background-repeat: repeat;
background-position: left top;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}


#accomplice ul {
list-style-type: none;
margin-top: 15px;
}

#accomplice li {
display: inline;

}
#accomplice a {
height: 90px;
width: 90px;
margin-left: 15px;
}


#twitter {
height: 75px;
width: 285px;
}


#footer p {
text-align: right;
padding-right: 110px;
}
#footer a {
color: #990000;
text-decoration: none;
font-style: normal;
}
#footer a:visited {
color: #990000;
text-decoration: none;
font-style: normal;
}
#footer a:hover {
color: #666666;
text-decoration: none;
font-style: normal;
}

#contactinfo {
float: right;
height: 150px;
width: 250px;
}
#contact {
width: 155px;
float: right;
margin-right: 109px;
text-align: left;
}
.contactRight {
float: left;
width: 76px;
}
#thankyoupage a {
font-size: 12px;
color: #990000;
text-decoration: none;
}
#thankyoupage a:visited {
font-size: 12px;
color: #666666;
text-decoration: none;
}
#thankyoupage a:hover {
font-size: 12px;
color: #990000;
text-decoration: none;
}


I appreciate ANY help!

Excavator
Feb 4th, 2010, 01:57 AM
Hello lindsayscapes,

When posting code in the forum, please use the code tags,
- available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

I didn't look at your code but the problem you're describing is usually from not clearing your floats.
Add overflow:auto; to the div that is not expanding the way you think it should.

Here is a page that describes how clearing floats that way works (http://www.quirksmode.org/css/clearing.html).

lindsayscapes
Feb 4th, 2010, 02:33 AM
Thank you for the reply.
The overflow:auto helped, to an extent. It did what it is supposed to, but exposed other issues with the HTML/CSS. I figured that might happen.
The navigation is now hidden underneath the inner wrapper when in dreamweaver, tough it still looks fine in IE and Safari.
Back to the drawing board.

Excavator
Feb 4th, 2010, 02:49 AM
Give us a link to the test site. Should be fairly easy to fix??? Usually.

lindsayscapes
Feb 4th, 2010, 02:57 AM
www.lindsaypaul.com/nchef
is where it is currently being tested, it looks fine on the web...
but in Dreamweaver the navigation is being hidden in behind the content area?

Excavator
Feb 4th, 2010, 03:52 AM
www.lindsaypaul.com/nchef
is where it is currently being tested, it looks fine on the web...
but in Dreamweaver the navigation is being hidden in behind the content area?

You just can't trust DreamWeavers design view. I hope you didn't buy it for that reason because you were lied to.

DW design view nothing like any other browser so it's just not dependable for seeing how your code is really rendered.
It especially drops the ball on anything you've applied overflow:auto; to! That's why I asked for a link to the test site - if you upload it and view it in a browser, you'll find it's a lot different. It looks good here in FF3.6.

Look at my sig for a suggestion (colored in green) on how to test your code.