473,320 Members | 1,848 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

CSS background color not working properly

Good afternoon

i am a newbe.. I have tried to create a small site with the following code:
<!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, 161 views)
Nov 6 '09 #1
10 11595
Dormilich
8,658 Expert Mod 8TB
I guess it’s because it’s floated (and the parent element does not stretch wide enough)…
Nov 6 '09 #2
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.
Nov 6 '09 #3
Dormilich
8,658 Expert Mod 8TB
why don’t you define the colour manually?
Nov 6 '09 #4
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 :)
Nov 6 '09 #5
drhowarddrfine
7,435 Expert 4TB
Background color is working properly here. This property cannot be inherited by child divs.
Nov 6 '09 #6
Dormilich
8,658 Expert Mod 8TB
@surpavan
what about closing that gap in the CSS?
Nov 6 '09 #7
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 :)
Nov 6 '09 #8
Dormilich
8,658 Expert Mod 8TB
@surpavan
you define a 2% gap between the floats
Nov 6 '09 #9
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.
Nov 6 '09 #10
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..........
Nov 6 '09 #11

Sign in to post your reply or Sign up for a free account.

Similar topics

3
by: Felix Natter | last post by:
hi, is there a way (html/css/javascript) to force IE to print background-colors exactly as specified in html/stylesheets? I tried to use @media print { ... } to override IE's "print background...
4
by: Mimo Zus | last post by:
I'm hoping that someone can explain what's going on; better yet provide a workaround. I'm designing a centered CSS site based on a 550 pixel wide vertical background image. Onto this background...
1
by: Robert W. | last post by:
In my Winforms app I'm trying to get an image's background to appear transparent on a form that has a gradient background. So I added a PictureBox and then attempted to add a custom paint command...
7
by: Nilesh | last post by:
I am using background-image attribute in a CSS file and linking the CSS file to aspx page. But strangly, background-image attribute is not working for relative URL. e.g. If I apply following css...
14
by: Schraalhans Keukenmeester | last post by:
I am building a default sheet for my linux-related pages. Since many linux users still rely on/prefer viewing textmode and unstyled content I try to stick to the correct html tags to pertain good...
1
by: marklbishop | last post by:
I am trying to make a new menu with a simple CSS hover behind a transparent gif. I want a simple rollover effect on the transparent images that are linked. It is working fine in IE 7.0, doesn't work...
3
by: =?Utf-8?B?aXdkdTE1?= | last post by:
Hi, im having a very weird problem. I can create a new project and set the form's background to an image i made in photoshop and run the program, no code written. the image is displayed as...
18
by: LayneMitch | last post by:
Hello. After getting great advice on positioning, I've edited my code and it's looking more stable. Now I need a little assistance with background image placement. Please click on this...
0
by: PenCraft | last post by:
Never mind. There was a stray comment tag inbetween the CSS code and the body code. I am working on a web page with a background image. I tried using the CSS background tag to avoid the slice...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.