Mozilla problem with nested DIV & colors problems

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?

Tapolyai

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

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>

Birdman

12:40 pm on Mar 29, 2003 (gmt 0)

You need to change 'background' to background-color' in your CSS.

SuzyUK

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

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

Tapolyai

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

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?

Tapolyai

5:37 pm on Mar 30, 2003 (gmt 0)

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?