background color not working as expected

A

asaffos

Hi,

In the code below I have a certain color for the body, a different one
for the content_body. For some reason although the DIV for the
content_body has all of the pages content in it the background color
appears in a certain part on the top of the page. Why is that? (the
css is also below)

<!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=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
</title>
<link rel="stylesheet" href="style.css" type="text/css"
media="screen" />
</head>
<body>
<div id="body_wrapper">
<div id="content_body">
<div id="nav_menu">



</div>


<div id="right_col">

</div>
</div>
</div>
</body>
</html>
******************************
CSS
******************************
body {
padding: 10px 0px 10px;
background-color: #484848;
color: #fff;
font-family: verdana, arial, sans-serif;
font-size: 12px;
text-align: center;
}
#body_wrapper {
margin: 0px auto;
padding: 2px 0px;
width: 777px;
background-color: #fcfcfc;
color: inherit;
text-align: left;
}
#content_body {
margin: 0px 2px;
padding: 17px 12px 15px 15px;
background-color: #dddacc;
border-bottom: #fff 2px solid;
color: #000000;
text-align: left;
}
#nav_menu {
margin: 72px 12px 10px 2px;
width: 180px;
background-color: #dddaaa;
color: #fff;
border-bottom: #fff 2px solid;
font-family: arial, sans-serif;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
float:left;
}

#right_col
{

width:540px;
float:right;
}
 
D

dorayme

<[email protected]
m>,
asaffos said:
Hi,

In the code below I have a certain color for the body, a different one
for the content_body. For some reason although the DIV for the
content_body has all of the pages content in it the background color
appears in a certain part on the top of the page. Why is that? (the
css is also below)

<!DOCTYPE html
Click to expand...

....

In what you supply, there is nothing in any of the divs, the
backgrounds are as you supplied them in your css. Perhaps you can
go to:

http://netweaver.com.au/alt/assafos.html

which is essentially your own mark up with some content added and
some more bg colours and colors to show your arrangement better.
What is it that *you* are puzzled by in this (as distinct from
quite a few things many might be puzzled by)
 
A

asaffos

<[email protected]
m>,





...

In what you supply, there is nothing in any of the divs, the
backgrounds are as you supplied them in your css. Perhaps you can
go to:

http://netweaver.com.au/alt/assafos.html

which is essentially your own mark up with some content added and
some more bg colours and colors to show your arrangement better.
What is it that *you* are puzzled by in this (as distinct from
quite a few things many might be puzzled by)
Click to expand...

Hi,

Thanks for the help.

I'm surprised from the face that the background color of the content
body isn't inherited automaticlly in the other divs that are inside
content body (for example right_col).

Thanks
 
R

rf

I'm surprised from the face that the background color of the content
body isn't inherited automaticlly in the other divs that are inside
content body (for example right_col).

URL? Or do you just want us all to guess?
 
G

GTalbot

<[email protected]
m>,

http://netweaver.com.au/alt/assafos.html

which is essentially your own mark up with some content added and
some more bg colours and colors to show your arrangement better.
Click to expand...


Dorayme,

I examined your testpage (thank you for providing it) and figured out
that this was bug #46 and bug #66 at this page:

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

The background-color issue is just a consequence of the way IE7
(*incorrectly, wrongly*) renders floated elements when the container
has a specified width. It is definitely due to incorrect
implementations of float feature by Internet Explorer 7 (and most
likely IE6 too).

Regards and season's greetings, Gérard
 
D

dorayme

<[email protected]
m>,
asaffos said:
Hi,

Thanks for the help.

I'm surprised from the face that the background color of the content
body isn't inherited automaticlly in the other divs that are inside
content body (for example right_col).

Thanks
Click to expand...

OK, fair enough. But it can make a bit of sense to you if you
form a picture of how floats are not "in" their containers in any
intuitive way.

If you go to:

http://netweaver.com.au/alt/assafos.html

and get rid of the wrapper (it seems irrelevant to *this*
surprise of yours) and get rid of all margins and paddings, get
rid of the backgrounds on the floats and stick distinctive
borders on all things and make the body color and background
distinctive, (and you may as well be rid of the right float too
for this exercise), and while we are at it, lets put in a clear
gif that takes up a lot of the width so that the float can't jut
in, you will see how the floats should not have *any* part of
themselves "housed" by the parent.

http://netweaver.com.au/alt/assafos1.html

The parent does not cover them with its height. They overflow.
They have a certain queer independence and and while they inherit
the color, their backgrounds are transparent. If you look at the
above url in IE6 it is easy to imagine why you might be
surprised. <g>

Messing about with your surprise has given me thoughts to expand
a few things in my hobby at http://netweaver.com.au/floatHouse/

(Please don't groan everyone... and Boji, stop yawning!

Time for a swim, this time it will be Bronte and back to get
ready for a NYE bash (at friends who cooks divine Greek) and the
fireworks at Glebe. This year, I understand, Glebe will be a
barge point for the Sydney harbour fireworks. Great! Happy New
Year everyone!)
 
D

dorayme

<[email protected]
,
Click to expand...
GTalbot said:
Dorayme,

I examined your testpage (thank you for providing it) and figured out
that this was bug #46 and bug #66 at this page:

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

The background-color issue is just a consequence of the way IE7
(*incorrectly, wrongly*) renders floated elements when the container
has a specified width. It is definitely due to incorrect
implementations of float feature by Internet Explorer 7 (and most
likely IE6 too).

Regards and season's greetings, Gérard
Click to expand...

I have been meaning to get back to you on this. But I wanted to
fire up my Win box to see the bugs you mention. Today I had a
chance. I was thinking the OP's concerns were something else,
more to do with the relation of floats to their containers and
what things they inherit. I was taking a look at your reference
to bug #46, for example, on my Winbox and IE6 and the case is
rather different to the OP's.

But it was nevertheless informative to look at the cases you
mention.

Best wishes to you too.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Justify-content not working 1
Slideshow not working properly 2
Why is the e.target not working here? 1
Help with my responsive home page 2
Help needed with code 5
Working on mobile css menu with plenty of frustration! 2
Closing an overlay outside the overlay as well 1
How to position the *tooltip* comment on these buttons? 9

Members online

Total: 38 (members: 4, guests: 34)
Robots: 384

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,019
Latest member
RoxannaSta

Latest Threads

Top