473,706 Members | 2,622 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS background color not working properly

7 New Member
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.dt d">
<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="backgrou nd-color: #8B8878">
<div id="page">
<div id="banner"></div>
<div id="body">
<div id="leftnavpane l">asdasd<br />
asd<br />
</div>
<div id="content">as dasd<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, 162 views)
Nov 6 '09 #1
10 11671
Dormilich
8,658 Recognized Expert Moderator Expert
I guess it’s because it’s floated (and the parent element does not stretch wide enough)…
Nov 6 '09 #2
surpavan
7 New Member
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 Recognized Expert Moderator Expert
why don’t you define the colour manually?
Nov 6 '09 #4
surpavan
7 New Member
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 Recognized Expert Expert
Background color is working properly here. This property cannot be inherited by child divs.
Nov 6 '09 #6
Dormilich
8,658 Recognized Expert Moderator Expert
@surpavan
what about closing that gap in the CSS?
Nov 6 '09 #7
surpavan
7 New Member
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 Recognized Expert Moderator Expert
@surpavan
you define a 2% gap between the floats
Nov 6 '09 #9
surpavan
7 New Member
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

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

Similar topics

3
37212
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 colors + images" option, but it doesn't work. Any other idea? I'd like to avoid relying on the user for setting this option.
4
9731
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 I built a two column layout with nested navigation and content divs. The background image is centered via "background: ... center;", the divs are centered over it via "margin: 0 auto 0 auto;". The problem I'm having in IE6 is inconsistent...
1
4116
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 for the PictureBox. But it's not working. Here's the code I've written: public void InitializeLinearGradients() { this.Paint += new PaintEventHandler(PaintClient); this.SizeChanged += new EventHandler(SizeClient); pictureLogo.Paint += new...
7
5126
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 ..navbar-background { background-image: url(images/menubar.gif); } the image is not appearing on the page. It seems that IE is picking
14
3629
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 readibility on browsers w/o css-support. For important notes, warnings etc I use the <pre> tag, which shows in a neat bordered box when viewed with css, and depending on its class a clarifying background-image is shown. I would like the...
1
2759
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 at all in IE 6.0, and it works poorly in Firefox 1.5. Could someone point me in the right direction on how to get this working properly? The example is on this webpage... Thanks! http://workforcelanguageservices.com/v2/ This is the CSS that...
3
1173
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 grayscale. i have tried many different images, formats, and projects yet it wont work. anyone else have this happen? it was working before (couple months ago) yet now it wont....thanks -iwdu15
18
2608
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 link: www.ibtestsite.info I've colored the background black and added a background image which is the
0
1422
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 and dice table approach. This is the page: http://www.pencraftco.com/slvrec/index.htm It works just fine in Flock 1.2.4 In IE6, the only thing that shows up on the page is the background image. Everything else is gone. If I delete the CSS...
0
8692
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9145
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9042
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8983
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7897
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5935
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4705
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3141
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2084
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.