Welcome to WebmasterWorld Guest from 54.145.144.101

Forum Moderators: not2easy

Message Too Old, No Replies

Mozilla problem with nested DIV & colors problems

colapses parent DIV, and does not inherit colors or is it my code?

   
4:32 pm on Mar 28, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



In IE the following code displays a screen-wide blue box with a left large text, center medium text, and a right small text, in one blue bar, with white font. In Mozilla the children DIVs do not inherit the parent 'background' and 'color' atributes, and the parent DIV, is completely collapsed. Why is that? Am I making a mistake, and the inheritance should not work, or is it Mozilla?

<STYLE TYPE="text/css">
.wholebody { font-size: medium; font-family: "Verdana", "Arial", sans-serif; margin-top:0; margin-left: 0.2em; margin-right:0.2em; }
.topbox { width: 100%;color: #fff;background: #00f;}
.toptitle { float:left; font-size: 1.6em; text-align: left;}
.subtitle { float:left; margin-left: 3em; margin-top: .8em; font-size: .8em;}
.crumbs { float:right; font-size: 0.5em; text-align: right;}
</STYLE>
</HEAD>
<BODY class="wholebody">
<DIV class="topbox">
<DIV class="toptitle">Big Cheese Org</DIV>
<DIV class="subtitle">The A B C Community</DIV>
<DIV class="crumbs">Home</DIV>
</DIV>
</BODY>
12:40 pm on Mar 29, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You need to change 'background' to background-color' in your CSS.
3:13 am on Mar 30, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



You might also take a look at this thread [webmasterworld.com]

as I think it's the floated divs, which measn the parent div does not have any content so it will "collapse" or rather it's empty..

Suzy

3:29 am on Mar 30, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks, that helps with the color, although that's not what I understood the CSS standard was.

Problem is, if that's the case then why do they stack on top of each other when they are not taken out of the flow and there is sufficient space for them to flow next to each other?


.topbox { width: 100%;}
.toptitle { clear:left; width: 30%; }
.subtitle { clear:none; width: 30%;}
.crumbs { clear:right; width: 30%; }

<DIV class="topbox">
<DIV class="toptitle">Big Cheese Org</DIV>
<DIV class="subtitle">The A B C Community</DIV>
<DIV class="crumbs">Home</DIV>
</DIV>


Shouldn't they just float right next to each other, leaving 10% of the screen on the right open? Or, does clear also messes up the default float?
5:37 pm on Mar 30, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ok, now that I read more in detail, I understand they just stack vertically if they are in the normal flow.

I think I got it. The difference between IE and Mozilla, is that in IE the parent will try to contain the child element, so it will adjust the content area. This is not the case with Mozilla - and Mozilla is correct.

How can I force the parent in normal flow, to adjust height to make sure it fits the floated child element?

 

Featured Threads

Hot Threads This Week

Hot Threads This Month