SkillShare Forum - CSS Beauty - Collapsing Menus and growing pages Sun, 19 May 2013 18:54:10 -0400 http://cssbeauty.com/skillshare/ Lussumo Vanilla 1.1.9 Collapsing Menus and growing pages http://cssbeauty.com/skillshare/discussion/2645/?Focus=14300#Comment_14300 http://cssbeauty.com/skillshare/discussion/2645/?Focus=14300#Comment_14300 Thu, 06 Mar 2008 13:54:48 -0500 deniseg
Please help. The page to look at is http://www.brewsterdaycamp.com/new/tmpl.php?pagename=ab_philosophy

Now, here's the issue. If the content goes long, it grows nicely in IE6, but not in IE7 or Firefox.
The menu doesn't grow the page at all. I've made it work before, why not now?

Here's the body of the tmpl page:

<body>
<div id="wrapper">
<div id="main_area" class="main_back">
<!--Menu Area-->
<div id="menu_wrapper">
<div id="menu">
<?php include('inc_menu.php'); ?>
</div>
</div>

<!--Content Area-->
<div id="content_wrapper">
<div id="content_top"> </div>
<div id="content_bottom">
<img src="i/headers/hdr_<?=$pichdr?>.jpg" />
<div id="content">
<?php require($htmlpage); ?>
</div>
</div>
</div>
</div>
</div>

<!--Footer Area-->
<div id="footer_wrapper">
<div id="address_wrapper">
<div id="address">
<?php include('inc_address.php'); ?>
</div>
<div id="copyright">
<?php include('inc_copyright.php'); ?>
</div>
</div>
</div>
<div id="inside_flash">
<object type="application/x-shockwave-flash" data="swf/inside_flash.swf" width="122" height="122">
<param name="movie" value="swf/inside_flash.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object></div>
<div id="slogan"> <img src="i/slogans/<?=$pichdr?>.png" /></div>
</body>

The relevant CSS:


#wrapper {
height:auto;
height:687px;
min-height:687px;
position:relative;
top:0;
margin: 0 auto;
width: 836px;
}

/* Body Styles */

#main_area {
margin: 0 auto;
width: 836px;
height:auto;
height:100%;
min-height:100%;
position: relative;
padding: 0;
z-index: 5;
}

.main_back {
background-image: url(../i/img_inside_background.jpg);
background-repeat: repeat-y;
}

#menu_wrapper {
margin: 0 auto;
width: 291px;
height:auto;
height:100%;
float: left;
background-image: url(../i/img_inside_menu_top.jpg);
background-repeat: no-repeat;
z-index: 0;
}


#content_wrapper {
margin: 0 auto;
width: 545px;
height: auto;
float: right;
height:auto;
height:100%;
background-image: url(../i/img_inside_content_body.jpg);
background-repeat: repeat-y;
}

#content_top {
margin: 0 auto;
width: 545px;
height: 150px;
position: relative;
background-image: url(../i/img_inside_content_top.jpg);
background-repeat: no-repeat;
}

#content_bottom {
margin: 0 auto;
position: relative;
width: 545px;
height: auto;
background-image: url(../i/img_inside_content_body.jpg);
background-repeat: repeat-y;
z-index: 20;
}

#footer_wrapper {
margin: 0 auto;
position: relative;
width: 836px;
}

And yes, I have conditionals in the tmpl so that IE6 and IE7 get their own versions.]]>