Connecting Tech Pros Worldwide Help | Site Map

CSS background color not working properly

Newbie
 
Join Date: Nov 2009
Posts: 7
#1: 2 Weeks Ago
Good afternoon

i am a newbe.. I have tried to create a small site with the following code:
Quote:
<!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 content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#page {
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
border: 2px solid #008000;
font-family: Gabriola, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
width: 97%;
height:auto;
max-width: 1200px;
}
#banner {
background-color: #3366FF;
width: 100%;
height: 150px;
}
#body {
width: 100%;
height: auto;
margin-top: 10px;
}
#leftnavpanel {
float: left;
width: 20%;
background-color: #008000;
margin-top: 2px;
margin-right: 1px;
margin-bottom: 2px;
padding-left: 10px;
}
#content {
width: 78%;
height: auto;
float: right;
border: thin solid #00FF00;
background-image: none;
}
</style>
</head>

<body style="background-color: #8B8878">
<div id="page">
<div id="banner"></div>
<div id="body">
<div id="leftnavpanel">asdasd<br />
asd<br />
</div>
<div id="content">asdasd<br />
asd<br />
</div>
</div>
</div>
</body>
</html>
However, the problem that I am facing is because the color white [ffffff] that was given in upper element -div page - is not working properly. the lowers divs are not getting the color white as background, in stead they are getting the defaut body tag color. and more over expression web is displaying this perfectly in work area, but when comes to IE and Mozilla preview it is failing.

Could you please help me.
Attached Files
File Type: zip previews.zip (36.0 KB, 1 views)
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,626
#2: 2 Weeks Ago

re: CSS background color not working properly


I guess it’s because it’s floated (and the parent element does not stretch wide enough)…
Newbie
 
Join Date: Nov 2009
Posts: 7
#3: 2 Weeks Ago

re: CSS background color not working properly


Thank you for the reply Dormilich, however, I want the last div to float right else this div would come down the berfore one. We can solve this by using table, however, i prefer not to use table, could you/anyone please advice on a solution.

Thank you very much.
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,626
#4: 2 Weeks Ago

re: CSS background color not working properly


why don’t you define the colour manually?
Newbie
 
Join Date: Nov 2009
Posts: 7
#5: 2 Weeks Ago

re: CSS background color not working properly


You meen the background color of the last div. I can do that, however, the gap between the last div and the its before div is about 2% which would result in displaying the page color instead of the color I want.

Thanks for the reply and looking forward :)
drhowarddrfine's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,559
#6: 2 Weeks Ago

re: CSS background color not working properly


Background color is working properly here. This property cannot be inherited by child divs.
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,626
#7: 2 Weeks Ago

re: CSS background color not working properly


Quote:

Originally Posted by surpavan View Post

I can do that, however, the gap between the last div and the its before div is about 2% which would result in displaying the page color instead of the color I want.

what about closing that gap in the CSS?
Newbie
 
Join Date: Nov 2009
Posts: 7
#8: 2 Weeks Ago

re: CSS background color not working properly


Thank you for the reply guys, however, as Dormilich said, I could use CSS to cover gaps, this would not ba a perfect solution; if I want to create a single marging at the bottom of both these divs, it would not coincide properly because the left nav div would be lot more smaller than the content div.

Thank you Dormilich and drhowarddrfine for the replies and look forward to hear :)
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,626
#9: 2 Weeks Ago

re: CSS background color not working properly


Quote:

Originally Posted by surpavan View Post

I could use CSS to cover gaps

you define a 2% gap between the floats
Newbie
 
Join Date: Nov 2009
Posts: 7
#10: 2 Weeks Ago

re: CSS background color not working properly


Hi Dormilich,

Thank you for all the replies. however, in defining sizes, I did not use px, I used %, this means, the 2 would be correct, however, if I now or later define a border for the div, then the 2% would vary and the last div would be dispositioned to downward.

Thank you once again.
Newbie
 
Join Date: Nov 2009
Posts: 7
#11: 2 Weeks Ago

re: CSS background color not working properly


Hi Dormilich,

Thank you for explaining what Float is in the above replies. I now came to know what float is. So,, no i have a simple solution.

Just define a div at the end of all divs, this way even if other divs float, the parent div would know till where the last div is and the backgriound color would spread out.

Thank you every one for your support..........
Reply

Tags
backgrund color, css, expression web, html