Forum Moderators: not2easy
so I've got this page.. and I have a wrapper div that centers the content.. no problem so far..
then I have a banner div which contains the top banner, followed by a menu div that contains the nav - still no problems.. then I have the main section..
now the main section I want to be a solid coloured background with a bg image in the lower left, and inside that div, I want a white box floating to the right with a bunch of content in it..
however, I can't get the main section to show itself in more than one browser at a time! - right now it's showing in IE and not moz. Can anybody shed some light on this for me? I must be missing something.. here's the code.. - oh.. if I take out the height 100% it dosn't show in either - but if I leave it in IE will show it <sigh>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>blah</title>
</head>
<body>
<style>
#wrapper-main {padding:0; margin:0 auto; width:770px;}
#headermain {width:100%; background:#000; height:90px; border-bottom: 2px #F79705 solid; margin:0;}
#anotherwrapper{height:100%; background:#930 url(../img/bgimage.jpg) no-repeat bottom left;}
#maincontent{padding:20px; width:600px; background:#ccc; float:right;}
#menu {background:#000; width:100%}
#menu ul{font-weight:bold; font-size:13px; line-height:20px; padding:0; margin:0; list-style-type:none;}
#menu ul li {padding:0; margin:0; display:inline;}
#menu ul li a {color:#ddd; background:#000; padding:2px 15px; margin:0; display:block; text-decoration:none; display:inline;}
#menu ul li a:hover {background:#666; color:#fff; text-decoration:none; border:none;}#footer {width:100%; color:#999; padding:0; margin:0; background-color:#000; height:22px; clear:both;}
#footer p{font-size:11px; margin:3px;}
</style><div id="wrapper-main">
<div id="headermain">
<p>this works great</p>
</div><div id="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">this works great</a></li>
</ul>
</div><div id="anotherwrapper">
<div id="maincontent">
<p>this is a lot of content and works fine</p>
<p>this is a lot of content and works fine</p>
<p>this is a lot of content and works fine</p>
<p>this is a lot of content and works fine</p>
</div><!--end of maincontent-->
this dosn't show in moz - unless I type something like this - then it shows - but only as big as the typing
</div><!--end of anotherwrapper--><div id="footer">
<p>this works fine too</p>
</div><!--end of footer-->
</div><!--end of wrappermain-->
</body>
</html>
I believe this forum is related:
[webmasterworld.com...]
I may just dive into that to get this problem off of my desk.. but I still don't understand where the short circuit in my brain-cells is .. ie.. why this model dosn't work.. it *seems* to make so much logical sense - however.. perhaps I should stick to putting pretty pictures on the internet-y thingie and leave the thinkin' to them with tha book learnin'.
:-)
cheers!
S42.
</div><!--end of maincontent-->
this dosn't show in moz - unless I type something like this - then it shows - but only as big as the typing
</div><!--end of anotherwrapper-->
Notice how the text you refer to here is untagged? And even if it were tagged, it's not inside of a container with any sort of specifications. So why SHOULD Moz display anything more? In other words, it's closing up the space because you haven't told it to put anything in the space.
But the real problem, I think, is that you've got #maincontent floating in a container that is not, itself, floating, which means the container will not expand to hold the float. If you added a float:left (or right) to #anothercontent and specified a width for it, you would probably see something close to your desired results. This would force #anothercontainer to a height equal to the height of the float, thus displaying your BG color and image.
As for 100% height...
IE is incorrectly implementing that rule. Moz doesn't do anything with it because there is nothing for #anotherwrapper to be 100% OF. In the W3 specs, a percentage height value will act the same as an 'auto' height value (auto = height of the content) unless (a)the element's container has an explicit height or (b) the element is positioned absolutely. So giving a height 100% to an element in a non-heighted container has the same effect as height:auto; in compliant browsers.
(And since #anothercontainer isn't floated, it's not correctly calculating the auto height as the height of the floated contents, either.)
These little rules are always getting me.. I think it comes from not actually LEARNING something.. but just deciding that I can do it and picking it up as I go.
The last time it happened to me was when I named a class beginning with a number.. a no no that I didn't know :-)
thanks also for the height info - appreciated!
*
Lana
I think it comes from not actually LEARNING something.. but just deciding that I can do it and picking it up as I go.
And we just swapped knowledge, b/c I had no idea you couldn't start a class name with a number. :)
