homepage Welcome to WebmasterWorld Guest from 54.227.5.234
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Mozilla problem with nested DIV & colors problems
colapses parent DIV, and does not inherit colors or is it my code?
Tapolyai




msg:1196905
 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




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

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

SuzyUK




msg:1196907
 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




msg:1196908
 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




msg:1196909
 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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved