PDA

View Full Version : Background Image not extending full Div length

SMC
06-14-2008, 01:54 AM
Hello everyone,

This problem has me baffled. I like to think I'm rather experienced with layouts but I must be tired because I just don't see it. Here is my problem:

http://img178.imageshack.us/img178/8456/imagetk4.jpg

As you can see, the background image that is supposed to repeat simply does not!

This is how it should look, just with the div's extending:

http://img292.imageshack.us/img292/6449/supposedtolookln7.jpg

(FYI: These images were taken from the website in Firefox)

Here is the pertinent code:

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" lang="en" content="dive, concierge, scuba, diving, vacations, support, assistance, plan, planning" />
<meta name="description" content="Paradise needs to be discovered. Let us help you plan your trip to the depths of our oceans and see things you've only dreamt of." />

<link rel="stylesheet" href="templates/scubaBlue/css/index.css" type="text/css" media="screen" />
<script src="includes/js/index.js" type="text/javascript"></script>
<script src="includes/js/layout.js" type="text/javascript"></script>

<title>Plan your adventure | My Website</title>
</head>

<body onload="MM_preloadImages( 'SAVESPACE' );">

<div class="page-holder">

<div class="header"></div>
<div class="page-top">

<div class="logo">
<img src="templates/scubaBlue/images/dc_logo.png" alt="Dive Concierge" />
</div>

</div>
<div class="nav">

<a href="index.php?p=home" onmouseover="navSwap( 'nav_home', 'templates/scubaBlue/images/nav/nav_home_over.jpg' );" onmouseout="navSwap( 'nav_home', 'templates/scubaBlue/images/nav/nav_home.jpg' );"><img style="border: 0px;" name="nav_home" src="templates/scubaBlue/images/nav/nav_home.jpg" alt="Home" /></a><a href="index.php?p=about" onmouseover="navSwap( 'nav_about', 'templates/scubaBlue/images/nav/nav_about_over.jpg' );" onmouseout="navSwap( 'nav_about', 'templates/scubaBlue/images/nav/nav_about.jpg' );"><img style="border: 0px;" name="nav_about" src="templates/scubaBlue/images/nav/nav_about.jpg" alt="About Dive Concierge" /></a><a href="index.php?p=plan" onmouseover="navSwap( 'nav_plan', 'templates/scubaBlue/images/nav/nav_plan_over.jpg' );" onmouseout="navSwap( 'nav_plan', 'templates/scubaBlue/images/nav/nav_plan.jpg' );"><img style="border: 0px;" name="nav_plan" src="templates/scubaBlue/images/nav/nav_plan.jpg" alt="Plan your adventure" /></a><a href="index.php?p=scuba" onmouseover="navSwap( 'nav_scuba', 'templates/scubaBlue/images/nav/nav_scuba_over.jpg' );" onmouseout="navSwap( 'nav_scuba', 'templates/scubaBlue/images/nav/nav_scuba.jpg' );"><img style="border: 0px;" name="nav_scuba" src="templates/scubaBlue/images/nav/nav_scuba.jpg" alt="Scuba Certification" /></a><img src="templates/scubaBlue/images/nav/nav_spacer.jpg" alt="" /><a href="index.php?p=contact" onmouseover="navSwap( 'nav_contact', 'templates/scubaBlue/images/nav/nav_contact_over.jpg' );" onmouseout="navSwap( 'nav_contact', 'templates/scubaBlue/images/nav/nav_contact.jpg' );"><img style="border: 0px;" name="nav_contact" src="templates/scubaBlue/images/nav/nav_contact.jpg" alt="Contact Us" /></a>

</div>

<div class="page">

<!-- END HEADER --><div class="body-text">

<div style="height: 400px; width: 598px; float: left; border: 1px solid #00FF00;"></div>
<div style="height: 400px; width: 287px; float: right; border: 1px solid #FF0000;"></div>

</div><!-- BEGIN FOOTER -->

</div>
<div class="footer"></div>
<div class="copyright">&copy; 2008. all rights reserved.</div>

</div>

</body>

</html>
And the CSS:


body {
margin-top: 5px;
padding: 0px;
Font-Family: Tahoma, Arial;
Color: #FFFFFF;
Font-size: 12px;
font-weight: normal;
Background-color: #3764a5 !important;

line-height: 15px;
}
/* Page Structure */
.page-holder {
width: 100%;
text-align: center;
margin: 0px auto;
}
.page-top {
margin: 0px auto;
width: 934px;
height: 73px;

background-image: url("../images/middle.jpg");

}
.page {
margin: 0px auto;
width: 929px;

padding-top: 15px;
padding-bottom: 20px;
padding-left: 5px;

background-image: url("../images/middle.jpg");

}
.body-text {
margin-left: 20px;
margin-right: 30px;
text-align: left;

}
.logo {
margin: 0px auto;
padding-right: 30px;
height: 100%;
text-align: right;

}
.header {
margin: 0px auto;
width: 934px;
height: 28px;
background-image: url("../images/top.jpg");
}
.nav {
margin: 0px auto;
padding-top: 3px;
padding-left: 14px;

text-align: left;

width: 920px;
height: 40px;
background-image: url("../images/nav_bar.jpg");
}
.footer {
clear: both;
margin: 0px auto;
width: 934px;
height: 28px;
background-image: url("../images/bottom.jpg");
}
.copyright {
margin: 0px auto;
width: 934px;
height: 100%;

Color: #749eda;
Font-Family: Arial;

}
/* TEXT SPANS */
.page-header {
Font-Family: Tahoma, Arial;
Color: #FFFFFF;
Font-size: 28px;
font-weight: normal;

}

Thank you for ANY help you can offer! I'm baffled!
effpeetee
06-14-2008, 02:57 PM
We really heed ALL your code or better still a url to the site.

Frank
SMC
06-14-2008, 07:48 PM
I have edited the first post and posted all the code for the page. Unfortunately I cannot post the web address as this is all being developed and tested locally.
Carradee
06-14-2008, 08:12 PM
It looks like you didn't tell the image to repeat. Adding "repeat-y" to the background-image might fix it.

Unless you've done that already and I'm just missing it.
SMC
06-14-2008, 08:30 PM
No dice, unfortunately. Adding a repeat statement has no effect one way or the other.
Carradee
06-15-2008, 12:44 AM
Try writing it in separately, in "background-repeat: repeat-y;", and add in "clear: both;". I've noticed some issues lately with the all-in-one properties not displaying properly.

See what that does.
SMC
06-15-2008, 01:07 AM
Unfortunetly nope on that as well. I tried adding it to 3 seperate classes and all 3 at the same time but to no avail.

I'm pretty open to any and all suggestions at this point :p
Carradee
06-15-2008, 01:32 AM
Hm… Can I have the actual URL so I can refer to the images from my own file to toy with and see if I can personally figure it out?

(That's one good reason to have the full URL in the code, by the way—to make testing easier.)
Candygirl
06-15-2008, 11:39 AM
This is because of the floatings elements. Content of floatings element don't take part in the main flow. This is why the container does not take count of them to set its height. To enforce the container to count with the floats, you can give it a property that will establish a new formatting context (http://www.w3.org/TR/CSS21/visuren.html#block-formatting). For exemple:

#container {overflow:auto;}