...

View Full Version : Background Image with Height 100% Firefox



dprichard
01-10-2008, 06:26 PM
I have a background image in a div with a height of 100%. I made the body tag height 100%, the container for the body section height 100% and the left and right containers heights 100%. Everything works fine in IE and everything validates, but it doesn't work in Firefox. Any help on this would be greatly appreciated.

HTML CODE:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>mysite - Change Your Look, Not Your Sole</title>
<link rel="stylesheet" type="text/css" href="styles/base.css" media="all" />
<link rel="stylesheet" type="text/css" href="styles/header.css" media="all" />
<link rel="stylesheet" type="text/css" href="styles/body.css" media="all" />
<link rel="stylesheet" type="text/css" href="styles/footer.css" media="all" /></head>
<body>
<div id="header">
<div id="topline">

<ol>
<li class="separator"><a href="#">Shop Online Now</a></li>
<li class="separator"><a href="#">Order Status</a></li>
<li><a href="#">Sign-In</a></li>
</ol>
</div>
<div id="dottedline">
</div>
<div id="toplogo"><form action="" method="post">

<input name="submit" type="image" src="images/button_search.jpg" alt="Search Now" align="top" style="padding-top: 18px; padding-right: 10px;" />&nbsp;
<input name="search" type="text" id="search" class="searchbox" />
</form>
</div>
<div id="topmenu">
<div id="topmenu1">
</div>
<div id="button_shop"><a href="http://www.mysite.com/cart/home.php"></a>
</div>
<div id="button_about"><a href="http://www.mysite.com/about-mysite-designer-footwear.php"></a>
</div>

<div id="button_catalog"><a href="http://www.mysite.com/mysite-designer-shoes.php"></a>
</div>
<div id="button_media"><a href="http://www.mysite.com/mysite-media-press-releases.php"></a>
</div>
<div id="button_contact"><a href="http://www.mysite.com/contact-mysite-designer-footwear.php"></a>
</div>
</div>
</div><div id="body_container"><div id="left_container"><a href="mysite-designer-shoe-demo.php"><img src="images/home_demo.jpg" alt="View Our mysite Video Demonstration" border="0" /></a><br />
<a href="mysite-designer-shoes.php"><img src="images/home_catalog.jpg" alt="View our mysite Product Catalog" border="0" /></a><br />
<a href="http://www.mysite.com/mysite-store-locator/"><img src="images/home_store.jpg" alt="Find a mysite Retail Location Near You" border="0" /></a><br />

<div id="emailbox"><form action="" method="post">
<input name="signup" type="text" id="signup" class="emailbox" />
<input name="submit" type="image" src="images/button_submit.jpg" alt="Search Now" align="top" style="padding-top: 62px; padding-right: 10px; padding-left: 7px;" />
</form></div></div>

<div id="right_container">

<h1>The Innovator</h1>

<p>Testing</p>

</div>
</div>
<div id="footer_container"><div id="footer_logo"><a href="http://www.mysite.com"><img src="images/footer_logo.jpg" alt="" border="0" /></a></div>
<div id="footer_links"><a href="http://www.mysite.com">Home</a> | <a href="http://www.mysite.com/cart/home.php">Shop Online</a> | <a href="http://www.mysite.com/about-mysite-designer-footwear.php">About Us</a> | <a href="http://www.mysite.com/mysite-designer-shoes.php">Our Catalog</a> | <a href="http://www.mysite.com/mysite-media-press-releases.php">Media</a> | <a href="http://www.mysite.com/contact-mysite-designer-footwear.php">Contact Us</a> | <a href="http://www.mysite.com/mysite-store-locator/">Store Locator</a> | <a href="http://www.mysite.com/mysite-wholesale-information.php">Wholesale Information</a><br />

&copy; 2008 mysite - All Rights Reserved</div></div>
</body>
</html>

CSS


body {
background-image: url(../images/background.jpg);
margin: 0 0 0 0;
text-align: center;
height: 100%;
}
h1 {
font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande";
font-size: 16px;
font-weight: bold;
margin-top: 0;
margin-bottom: 1em;
padding-left: 10px;
color: #C74988;
}
#body_container {
background-image: url(../images/body_background.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-color: #fcf8fb;
margin-left: auto;
margin-right: auto;
color: #666;
border-color: #a6a6a6;
border-style: solid;
border-right-width: 1px;
border-left-width: 1px;
border-top-width: 0;
border-bottom-width: 0;
width: 800px;
height: 480px;
font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande";
font-size: 12px;
text-align: justify;
height: 100%;
}
#body_container p {
padding: 10px;
margin: 0;
}
#left_container {
float: left;
width: 272px;
padding-left: 15px;
padding-top: 15px;
height: 100%;
}
#right_container {
float: left;
width: 505px;
padding-top: 15px;
height: 100%;
padding-bottom: 30px;
}
#right_container_movie {
float: left;
width: 505px;
padding-top: 15px;
text-align: center;
padding-bottom: 30px;
}
#emailbox {
width: 272px;
height: 106px;
background-image:url(../images/home_emails.jpg);
text-align: left;
vertical-align: bottom;
}
input.emailbox {
border-color: white;
border-style: none;
background-color: #F9F9F9;
font-size: 9px;
font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande";
margin-top: 65px;
margin-left: 50px;
width: 110px;
}

dprichard
01-10-2008, 06:40 PM
Nevermind... I found the answer. I added overflow: auto; to the #body_container



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum