473,322 Members | 1,473 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,322 software developers and data experts.

Background color not working

11
I'm fairly new to CSS and I cannot for the life of me figure out why my background colors aren't showing up. I've tested it in both firefox and IE. Specifically I'm talking about the background color in #login and #header-bottom. You can also view my test area at http://www.siteiq.net/TEST/index.html (It's a work in progress...).

Here's my CSS...

@charset "iso-8859-1";
/* CSS Document */
Expand|Select|Wrap|Line Numbers
  1. body {
  2.   margin: 0;
  3.   padding: 0;
  4.   background-color: #ece0d2;
  5.   color: #000000;
  6.   font: small Arial, Helvetica, sans-serif;
  7. }
  8.  
  9. #wrapper {
  10.   background-color: #FFFFFF;
  11.   color: #000000;
  12.   margin: 30px 40px 30px 40px;
  13.   padding: 10px;
  14. }
  15.  
  16. #header-top {
  17.   border: 1px solid #999991; 
  18. }
  19.  
  20. #login {
  21.   height: auto;
  22.   width: auto;
  23.   background-color: #b2b2aa;
  24.   background-image: none;
  25. }
  26.  
  27. #header-bottom {
  28.     background-color:#999991;
  29.     width: 100%;
  30.     height: 100%;
  31.     color: #FFFFFF;
  32.  
  33. }
  34.  
Here's my HTML...
[html]
<!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=iso-8859-1" />


<title>siteIQ.net</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<img src="img/logo_siq.gif" alt="siteIQ.net" width="152" height="28" />
<div id="header-top">
<img src="img/l1_who.gif" alt="who we are" />
<img src="img/l1_what.gif" alt="what is siteIQ" />
<img src="img/l1_why.gif" alt="why siteIQ" />
<img src="img/l1_intrack.gif" alt="inside track" />
<img src="img/l1_report.gif" alt="siteIQ reports" />
<img src="img/l1_shop.gif" alt="shop" />
<img src="img/l1_cu.gif" alt="how to contact us" />
</div><!-- header-top -->
<div id="login">
<div align="right">
<img src="img/l3_clogin.gif" alt="client login" />
</div><!-- right -->
</div><!-- login -->
<div id="header-bottom">
<img src="img/photo_index.jpg" alt="conference call image" />
<p>In today’s highly competitive technology industry, providing a world-class online experience is essential to creating, retaining, and supporting customers</p>
<p>Our clients rely on the siteiq programs to help them achieve these objectives...</p>
</div><!-- header-bottom -->
</div><!-- header -->
</div><!-- wrapper -->
</body>
</html>[/html]
Nov 14 '07 #1
6 1979
drhowarddrfine
7,435 Expert 4TB
Your online version doesn't have anything for header-bottom in it.
Nov 14 '07 #2
I think your problem is the way your div's are nested- wrapper would be the one that the background color would show with- you set that to white.
Your header div should end right after your header not at the bottom of the page.

Think of the div's as Christmas presents- the background color is the wrapping paper. the way you want them is wrapped in different colors on a stack right?

What you did was wrap the first one- then put it in the second box- wrapped that one- then set it in the next bigger box -and then wrapped that box in white. So all you see is the white box!

Does that make sense? Am I thinking of this right?
Nov 20 '07 #3
Timeri
11
Your online version doesn't have anything for header-bottom in it.

Sorry, I must have forgot to upload again before I posted the question. Also, being a newbie I didn't realize I wouldn't get a direct reply otherwise I would have responded earlier. Anyway, there is a different version now if your still interested in helping. I've only added html & text and removed the background color from #wrapper. I'm still having the same issue. You can view the test version at http://www.siteiq.net/TEST/index.html

Thanks!
Nov 20 '07 #4
Timeri
11
I think your problem is the way your div's are nested- wrapper would be the one that the background color would show with- you set that to white.
Your header div should end right after your header not at the bottom of the page.

Think of the div's as Christmas presents- the background color is the wrapping paper. the way you want them is wrapped in different colors on a stack right?

What you did was wrap the first one- then put it in the second box- wrapped that one- then set it in the next bigger box -and then wrapped that box in white. So all you see is the white box!

Does that make sense? Am I thinking of this right?

Yes, that makes perfect sense. Thank you for the help. So, in theory if I deleted the background color from #wrapper then my other background colors should appear. Unfortunately, I did just that (you can view my test site http://www.siteiq.net/TEST/index.html) and the other background colors didn't appear. Am I missing something else?

Also, in regards to the header ending at the end of the header rather than the bottom of the page...it does now. I've added more text to the page.

If you have any other suggestions or any other help, please! I need it! Thanks! :)
Nov 20 '07 #5
drhowarddrfine
7,435 Expert 4TB
Same issue as before. #logo and #header-bottom do not exist in your css.
Nov 20 '07 #6
Timeri
11
Same issue as before. #logo and #header-bottom do not exist in your css.
I'm such an idiot! Thank you! My ftp program usually updates all related files but, since I'm on my test site it was only pulling the actual file. It's been a while since I've used the test server feature and I didn't think to check the remote CSS file. Duh! Thank you again!
Nov 21 '07 #7

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

Similar topics

2
by: Bob | last post by:
Hi, I'm trying to build a PHP page which launches another php script to be run in the background. The web page should return immediately, while the background script may run for 10 minutes or...
1
by: Justin | last post by:
Ok here is working code in IE, <td ID="TD1" width="478" height="553" background="images/GUYONDOC.JPG" valign="top">. . . </td> <a href="texana.htm"...
2
by: lorelei | last post by:
Hey all, I have found two seperate HTML codes which claim to stop background images from being tiled. Neither of them seem to be working. I'm writing my codes in Textpad, and use Internet...
27
by: Kevin Yu | last post by:
When I declare on HTML page <LINK href="mycss.css" type="text/css" rel=stylesheet /> .... <BODY class=myclass> in mycss.css BODY { FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-FAMILY:...
4
by: Gequina | last post by:
Something goes wrong in my script. I'm all new to it so i don't know much yet. I have a set of buttons. And when you click on either of them, the background image will change. Only it's not...
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...
4
by: tchatchke | last post by:
Hello, New here and having some difficulty getting a back ground image to appear in my html when called from an external CSS. I am working on OS 10.2.something with Dreamweaver 8. I have gone...
2
by: rigiditymodulus | last post by:
Hi - So, I had this working perfectly, then had a small crash (the transmitter for my wireless mouse occassionally freaks out my MacBook Pro) and when I rebooted and opened up my file the two...
10
by: surpavan | last post by:
Good afternoon i am a newbe.. I have tried to create a small site with the following code: However, the problem that I am facing is because the color white that was given in upper element...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
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...
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: 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...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
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: 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
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.