Forum Moderators: not2easy
Following issue, I have a div with a background color and inside it I have several other div's. One of them is not displaying any background color whatsoever and is showing only the background of the body tag.
I can't seem to find an error, any help would be greatly appreciated.
#lowerarea is the one that I am having problems with (its not showing the bg color of #colorfiller)
Here is the HTML code:
<body>
<div id="bodywrap">
<div id="innerwrap">
<div id="innerwrapheader">
</div>
<div id="colorfiller">
<div id="menu">
</div>
<div id="configarea">
</div>
<div id="lowerarea">
<div class="lowerleft">left
</div>
<div class="lowerright">right
</div>
</div>
</div>
<div id="innerwrapfooter"></div>
</div>
</div>
</body>
and here is the css:
* {
margin:0;
padding:0;
}
body {
background-image:url(../images/bg.png);
}
#bodywrap {
width:100%;
margin: 0 auto;
}
#innerwrap {
width:900px;
margin:0 auto;
margin-top:109px;
}
#innerwrapheader {
width:900px;
height:91px;
margin:0 auto;
background-image:url(../images/header.png);
background-repeat:no-repeat;
}
#colorfiller {
width:900px;
background-color:#ffb200;
}
#menu {
margin:0 auto;
width:894px;
height:24px;
background-image:url(../images/menu_bg.png);
background-repeat:no-repeat;
clear:both;
}
#configarea {
margin:0 auto;
width:894px;
height:338px;
background-color:#ffffff;
clear:both;
}
#lowerarea {
margin:0 auto;
width:894px;
}
.lowerright {
float:right;
width:280px;
background-color:#FFFFFF;
}
.lowerleft {
float:left;
width:614px;
background-color:#FFFFFF;
}
#innerwrapfooter {
margin:0 auto;
clear:both;
width:900px;
height:57px;
background-image:url(../images/footer.png);
background-repeat:no-repeat;
}
Thank you very much to anyone who takes the time to look into this!
Thanks
After walking through the below, if it persists, set your background images like so:
#innerwrapheader { background: transparent url(../images/header.png) top left no-repeat; }
Also if there are any transparencies in your images, you should use .gif instead of .png, IE 6 doesn't take .png transparency very well.
1. Don't have your images, substituted colors (see comments in the CSS.)
2. A PS, I'm referring to #lowerleft/right as ID's, but left them as classes in the code sample. These likely occur once per page, if so, make them ID's.
3. When I load it in FF (code validates, by the way) I don't see the page bg color, I see the white BG's of #lowerleft and #lowerright. Removing those BG's allows the BG color of the page to come through (see #3.) In IE 7, The div properly wraps #lowerleft and #lowerright (see #3) but it's still white. Removing the BG's on #lowerleft and #lowerright allows the orange (#colorfiller) to show through.
So to start, it's the white BG's of #lowerleft and #lowerright covering up #colorfiller, but since the browsers are rendering differently, we need a fix.
4. Note the BORDER I put (temporarily) on #lowerarea. Try this. Note that the backgrounds of the #lowerleft/#lowerright containers are making it white; remove those BG colors and in IE, #colorfiller orange shows through. However, in FF, you can tell by the border #lowerarea is not "surrounding" #lowerleft and #lowerright, the border is a single black line above them. Removing the BG's from #lowerleft and #lowerright allows the page BG to show through, but since #colorfiller doesn't wrap/contain #lowerleft and #lowerright, the orange does not show.
SO. Add a clearing element (bolded) as shown and remove the #fff from #lowerleft and #lowerright . . . bg of #colorfiller shows. You can also play with floats or overflow to get the same effect, but doubt it will be to much advantage.
Other than the bolded items, this is your code verbatim, just remove my colors below where I have the images commented out, uncomment the image selectors. HTML doctype used because I see no indication of XHTML being used in the page content.
5. This is building for a serious case of div-itis, try to use semantic elements where they apply, too little info at this point to advise . . . but should be fairly easy since you've zeroed out all margins and padding with *.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Doctype on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
/*background-image:url(../images/bg.png);*/
background:#f9f9f9; /* gray */
}
#bodywrap {
width:100%;
margin: 0 auto;
}
#innerwrap {
width:900px;
margin:0 auto;
margin-top:109px;
}
#innerwrapheader {
width:900px;
height:91px;
margin:0 auto;
/*background-image:url(../images/header.png);
background-repeat:no-repeat;*/
background:#ffcccc; /* pink-ish */
}
#colorfiller {
width:900px;
background-color:#ffb200; /* orange */
}
#menu {
margin:0 auto;
width:894px;
height:24px;
/*background-image:url(../images/menu_bg.png);
background-repeat:no-repeat;*/
background:#ececff; /* blue-ish */
clear:both;
}
#configarea {
margin:0 auto;
width:894px;
height:338px;
background-color:#ffffff;
clear:both;
}
#lowerarea {
margin:0 auto;
width:894px;
border:1px solid #000; /* added to identify */
}
.lowerright {
float:right;
width:280px;
/*background-color:#FFFFFF; removed */
}
.lowerleft {
float:left;
width:614px;
/*background-color:#FFFFFF; removed */
}
#innerwrapfooter {
margin:0 auto;
clear:both;
width:900px;
height:57px;
/*background-image:url(../images/footer.png);
background-repeat:no-repeat;*/
background:#e1ffe1; /* greenish */
}
.clear-div { clear:both; }
</style>
</head>
<body>
<div id="bodywrap">
<div id="innerwrap">
<div id="innerwrapheader"></div>
<div id="colorfiller">
<div id="menu"></div>
<div id="configarea"></div>
<div id="lowerarea">
<div class="lowerleft">left</div>
<div class="lowerright">right</div>
<div class="clear-div"></div>
</div> <!-- end lowerarea -->
</div> <!-- end colorfiller -->
<div id="innerwrapfooter"></div>
</div> <!-- end innerwrap -->
</div> <!-- end bodywrap -->
</body>
</html>
Sorry I was not that clear with the issue I am having:
What I mean is that #colorfiller is not loading behind lowerarea, here is a screenshot:
[img3.imageshack.us...]
Behind the white area of #lowerarea it should load #colorfiller
And yeah, looking at those rounded corners tells me, you should probably convert those to transparent.gifs.
I want #colorfiller to load behind them so I can have the orange border along the edges.
I am on the way home now, I will try your code as soon as I get home.
#lowerarea {
margin:0 auto;
width:894px;
border:1px solid #000; /* added to identify */
padding-bottom:6px;
}
.lowerright,.lowerleft {
background-color:#fff;
}
.lowerright {
float:right;
width:280px;
}
.lowerleft {
float:left;
width:614px;
}
Looking more and more like those should be id's, not classes.
[edited by: rocknbil at 10:24 pm (utc) on Jan. 5, 2010]
Can you tell me what I did wrong? What does the clearing element do exactly?
EDIT: if it still gives you trouble, add padding to colorfiller:
#colorfiller {
width:900px;
background-color:#ffb200; /* orange */
padding-bottom:6px;
}
This kicked left and right back up.
I can't get my head around the issue here.
