PDA

View Full Version : Cascading order trouble



Spiegal
Jan 21st, 2007, 06:24 PM
I am trying to create a background color (#024B82) that repeats across the entire visible screen while dropping two smaller layers of color (#FEC689) to fill with content. Thus far, I've applied the main background color to the body tag and the other to separate div tags. Both of these instructions are referenced from an external style sheet (don't know if that's relevant).

The body background color shows just fine, but dominates (hides) the div background colors. I think that my cascading order is to blame (body trumps div), but how do I work around that so that both colors display as desired?

Excavator
Jan 21st, 2007, 06:57 PM
Hello Spiegal,
Let us have a look at your code so we can see what your doing. It shouldn't be any problem at all.

Arbitrator
Jan 21st, 2007, 06:58 PM
Do you have some code? Are you using z‐indexing? I donít see how the cascading order would matter since background properties arenít inherited.

Spiegal
Jan 21st, 2007, 07:04 PM
Here's the CSS at present:


body {
background-color:#024B82;
background-repeat:repeat;
}
#intro {
position:absolute;
left:44px;
top:51px;
width:450px;
height:128px;
z-index:1;
background-color:FEC689;
}
#info {
position:absolute;
left:43px;
top:225px;
width:448px;
height:412px;
z-index:2;
background-color: FEC689;
}

Any help is greatly appreciated! Thank you in advance!

Excavator
Jan 21st, 2007, 07:08 PM
No need to repeat a color. background-color:#024B82; just makes the body that color.
Would be nice to see your html too. If you don't have anything in #intro and #info then FF won't even show them.

Is all that absolute positioning really necessary?

Arbitrator
Jan 21st, 2007, 07:09 PM
You forgot the number sign (#) in front of your hexadecimal color references.

Alex!
Jan 21st, 2007, 07:10 PM
Hi Spiegal,
your background-colors in the divs are wrong:


background-color:FEC689;

should be


background-color: #FEC689;


Alex

Spiegal
Jan 21st, 2007, 07:12 PM
Here's the body. It's pretty simple at the moment.

<body>
<div id="intro">Include some text here.</div>
<div id="info">And here.</div>
</body>

I'm using the positioning to set the layers a particular way. Is there a better method? I feel stupid about the color thing - you were absolutely right. I just needed the number symbol.

Arbitrator
Jan 21st, 2007, 07:12 PM
If you don't have anything in #intro and #info then FF won't even show them.He specified the dimensions on the boxes, so the boxes should be rendered even if they donít include content. Firefox will render them.

Excavator
Jan 21st, 2007, 07:20 PM
Duh! Needs a # on the color.

Have a look at this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color:#024B82;
background-repeat:repeat;
}
#intro {
margin: 51px 0 0 44px;
width:450px;
height:128px;
background-color:#FEC689;
}
#info {
margin: 46px 0 0 43px;
width:448px;
height:412px;
background-color: #FEC689;
}
</style>
</head>
<body>
<div id="intro">Include some text here.</div>
<div id="info">And here.</div>
</body>
</html>

Alex!
Jan 22nd, 2007, 11:16 AM
duh read my post :P