OutFront Forums
     Home    Register     Search      Help      Login    

Follow Us
On Facebook
On Twitter
RSS
Via Email

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
 

nested divs and background colors

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> nested divs and background colors 		Page: [1]
 
joy

 

Posts: 178
From: Gilbert AZ USA
Status: offline

  		nested divs and background colors - 12/11/2008 16:47:07   
Hi,

I think I am missing something completely simple, but I just can't figure out what the problem is with this site. I have several nested <div>s with different background colors and images, and for some reason I can't get the page to display properly in firefox - it looks fine in IE7. I have never had this problem before. Many of my background colors are being ignored, and I think the problem is related to the browser ignoring my floated divs in relation to the parent divs, but no matter what I try, it just won't fix the problem. I would like the background on the "main" div (well, everything inside the "wrap" or "container" for that matter) to be white.

css: 

/* ----------------------------------------------------------general */

body {
	background-color: #000;
	scrollbar-base-color: #333333; 
	scrollbar-arrow-color:#6666ff;
	color: #fff;
}

img {
	border: none;
}

ul {
	list-style-type: square;
	margin-right: 20px;
}

input {
	font-size:10px; 
	font-family:verdana, arial, sans-serif;
}

textarea {
	font-size:10px; 
	font-family:verdana, arial, sans-serif;
}

select {
	font-size:10px; 
	font-family:verdana, arial, sans-serif;
}

p {
	padding: 10px;
}

/* -----------------------------------------------------header container and nav ids */

#wrap {
	background-color: #fff;
	color: #000;
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	height: 100%;
}

#container {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	font-family: arial, sans-serif;
	font-size: 12px;
	background-color: #fff;
	color: #000;
	background-image: url('images/cornerbig-bottom.gif');
	background-repeat: no-repeat;
	background-position: left bottom;
	border-bottom: 0;
	border-top: 0;
	border-right: 0;
	border-left: 0;
	padding: 0px;
}

#logo {
	background-color: #fff;
	color: #000;
	float: left;
	width: 230px;
	height: 200px;
	padding: 0;
	margin: 0;
}

#topnav {
	float: right;
	text-align: right;
	font-size: 10px;
	color: #999;
	background-color: #fff;
	background-image: url('images/cornerbig-right.gif');
	background-repeat: no-repeat;
	background-position: right top;
	width: 690px;
	height: 145px;
	font-family: verdana, "century gothic", "avant garde", "avant garde gothic", arial, helvetica, sans-serif;
	margin: 0px;
	padding: 0px 30px 0px 0px;
}

#topnav img {
	padding-top: 65px;
}

#nav {
	width: 230px;
	height: 99%;
	float: left;
	font-size: 16px;
	text-transform: uppercase;
	text-align: right;
	font-family: "century gothic", "avant garde", "avant garde gothic", trebuchet ms, trebuchet, arial, helvetica, sans-serif;
	color: #990000;
	background-color: #fff;
}

#nav p{
	padding: 0px 15px 0px 10px;
}

#nav span {
	padding: 0px 10px 0px 10px;	
}

#nav hr {
	width: 200px;
}

/* ------------------------------------------------------------content */

#main {
	width: 650px;
	height: auto;
	margin: 0px 30px 0px 10px;
	float: right;
	border-right: 1px #fff solid;
	color: #666666;
	background-color: #fff;
}

#content {
	width: 600px;
	float: left;
}

#banner {
	width: 650px;
	height: 50px;
	float: right;
	padding-right: 30px;
	padding-bottom: 10px;
	background-color: #fff;
	color: #ccc;
}

#banner.sell {
	background-image: url('images/banner-sellyourhome.gif');
	background-position: left top;
	background-repeat: no-repeat;
}

/* ------------------------------------------------------------home */

#topnavhome {
	float: right;
	text-align: right;
	font-size: 10px;
	color: #999;
	background-color: #fff;
	background-image: url('images/cornerbig-right.gif');
	background-repeat: no-repeat;
	background-position: right top;
	width: 690px;
	height: 205px;
	font-family: verdana, "century gothic", "avant garde", "avant garde gothic", arial, helvetica, sans-serif;
	margin: 0px;
	padding: 0px 30px 0px 0px;
}

#topnavhome img {
	padding-top: 65px;
}

#preapproved {
	width: 300px;
	height: 200px;
	float: left;
	color: #fff;
	background-image: url('images/getpreapproved.gif');
	background-repeat: no-repeat;
	background-position: left top;
}

#preapproved p {
	padding: 50px 20px 5px 30px;
}

#featured {
	width: 300px;
	height: 200px;
	float: right;
	color: #fff;
	background-image: url('images/featured.gif');
	background-repeat: no-repeat;
	background-position: left top;
}

#featured p {
	padding: 50px 20px 5px 30px;
}

#find {
	width: 300px;
	height: 200px;
	float: left;
	color: #fff;
	background-image: url('images/findahome.gif');
	background-repeat: no-repeat;
	background-position: left top;
	margin-top: 30px;
}

#find p {
	padding: 50px 20px 5px 30px;
}

#sell {
	width: 300px;
	height: 200px;
	float: right;
	color: #fff;
	background-image: url('images/sellyourhome.gif');
	background-repeat: no-repeat;
	background-position: left top;
	margin-top: 30px;
}

#sell p {
	padding: 50px 20px 5px 30px;
}

/* ----------------------------------------------------------------footer */

#footer {
	width: 950px; 
	float: right;
	font-size: 9px;
	color: #666;
	text-align: right;
	padding-bottom: 20px;	
}

#footer img {
	padding-right: 30px;
}

/* ----------------------------------------------------------------classes */

p.justify {
	text-align: justify;
	text-justify: distribute-all-lines;
	text-align-last: justify;
}

.border {
	border: 1px;
	border-color: #fff;
	border-style: solid;
}

.blackborder {
	border: 1px;
	border-color: #000;
	border-style: solid;
}

/* ------------------------------------------------------------------------links */
/* -----------------------------------red-normal page link */

a:link {
	text-decoration: none;
	color: #990000;
}

a:visited {
	text-decoration: none;
	color: #ff9933;
}

a:hover {
	text-decoration: none;
	color: #ff0000;
}

a:active {
	text-decoration: none;
	color: #99cc00;
}


/* -------------------------------white------------------ */

a.w:link {
	text-decoration: none; 
	color: #fff;
	}

a.w:visited {
	text-decoration: none;
	color: #fff;
}

a.w:hover {
	text-decoration: none;
	color: #ff0000;
}

a.aw:link {
	text-decoration: none; 
	color: #fff;
	}

a.aw:visited {
	text-decoration: none;
	color: #fff;
}

a.aw:hover {
	text-decoration: none;
	color: #fff;
}

/* ----------------------------------------------------------headings */

h1 {
	font-family: "century gothic", "avant garde", "avant garde gothic", trebuchet ms, trebuchet, arial, helvetica, sans-serif;
	margin: 10px 5px 5px 10px;
	color: #666;
	text-align: left;
	font-size: 24px;
	font-weight: normal;
}

h2 {
	font-family: "century gothic", "avant garde", "avant garde gothic", arial, helvetica, sans-serif;
	margin: 10px 5px 5px 10px;
	color: #666;
	text-align: right;
	font-size: 24px;
	font-weight: normal;
}


page (validates): 

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="style.css" /> 
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index, follow" />
</head>

<body>
<div id="container">

<div id="logo">
<img alt="" src="images/logo.gif" width="228" height="200" />
</div>

<div id="topnavhome">
<a href=""><img border="0" src="images/home.gif" align="middle" alt="Home" width="36" height="36" /></a>  
<a href=""><img border="0" src="images/contact.gif" align="middle" alt="Contact Us" width="39" height="36" /></a>  
<a href=""><img border="0" src="images/search.gif" align="middle" alt="Home Search" width="29" height="36" /></a>  
<a href=""><img alt="Featured Properties" src="images/forsale.gif" align="middle" width="35" height="43" style="border-width: 0px" /></a>  
<a href=""><img alt="Development" src="images/hammer.gif" width="44" height="35" align="middle" style="border-width: 0px" /></a> 
<a href=""><img border="0" src="images/loans.gif" align="middle" alt="Financing & Loan Information" width="34" height="36" /></a>
</div>

<div id="nav">
<p>
<br />
home</p>
<p>
contact us</p>
<p>
Featured Properties</p>
<p>
Find a home</p>
<p>
sell your home</p>
<p>
land / lots</p>
<p>
loans: Pre- Qualify</p>
<p>
custom home design</p>
<p>
house plans</p>
<p>
MLS Search</p>
<p>
custom home builders</p>
<p>
AZ Home & Loan Blog</p>
<p>
green building blog</p>
</div>

<div id="main">

<div id="preapproved">
<p><a class="w" href="">FHA Loans and Mortgage 
Financing ►</a><br />
<br />
<a class="w" href="">Construction Financing & Land / Lot Loans ►</a><br />
<br />
<a class="w" href="">Fix-up Financing for Purchasing a Home in Need of Remodeling or Repairs ►</a></p>
</div>

<div id="featured">
<p>Featured Homes for Sale ►<br />
<br />
Featured Land/Lots ►<br />
<br />
Browse MLS Listings ►</p>
</div>

<div id="find">
<p>Looking for a home? Check Out Our Featured Properties ►<br />
<br />
Search Local 
Listings ►<br />
<br />
Contact Us for More Information or to See One of Our Properties ►</p>
</div>

<div id="sell">
<p>Ready to Sell Your Home? Contact Us Today for a Market Analysis on Your Home 
►<br />
<br />
Moving Up? Browse Our Featured Homes ►</p>
</div>

</div>

<div id="footer">
<p>©2008 . All rights reserved.     <img alt="equal housing opportunity" src="images/equalhousing.gif" width="24" height="18" /> <img alt="realtor" src="images/mls_realtor.gif" width="100" height="44" /> 
</p>
</div>

<!-- <?php include($DOCUMENT_ROOT . "/inc-navigation.html"); ?> -->

</div>
</body>

</html>


I've tried the following things suggested in other topics/forums but none of them have solved it:
added an addtional wrap with a white background and height 100%, no float
added display: inline-block; to the wrap and other divs
added overflow: visible;

Any help would be appreciated.

< Message edited by joy -- 12/11/2008 17:04:53 >
Tailslide

 

Posts: 6692
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		RE: nested divs and background colors - 12/11/2008 17:09:44   
usually this sort of problem is caused by not clearing floats and so the parent div will not show the full height of background as, far as it is concerned, there is no height.

The way to solve it is to add overflow:hidden to the parent element which is failing to show it's background.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to joy)
joy

 

Posts: 178
From: Gilbert AZ USA
Status: offline

  		RE: nested divs and background colors - 12/12/2008 14:30:33   
Thank you so much. I had tried overflow: visible but not overflow: hidden. That did the trick.

(in reply to Tailslide)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> nested divs and background colors 		Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Copyright © 2009 Thomas Brunt's OutFront Inc. All Rights Reserved.