6 replies [Last post]
cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 5 years 50 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Hi there CSS wizards!

This is a weird one. Really!

I've added a red outline to my HTML tag to better see what's going on, and what's happening is:

- At a browser-window height where all content is visible, all is well. Red line indicates "HTML" goes right to the bottom. Background tree goes right to the bottom. There is a scrollbar that doesn't "quite" disappear, but that's OK (though perhaps a clue to what's wrong in the next step?)

- If I shorten the browser window enough that i have to scroll down to see the lower half, when i reach the bottom, the background tree is cut off. The shorter I make the window, the more pronounced the effect. The red line seems to indicate the "HTML" element is getting shorter, but the DIV containing the background tree seems the only thing affected.

I ran the page through validation, and the only errors related to items that seem unrelated. And none of the standard DOCTYPES seem to have any effect.

Here's the page HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<!--[if IE 7]>
<html class="ie ie7" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 7) | !(IE <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/cool.png" title="Cool" alt="Cool" class="smiley-content" />  ]><!-->
 
	<html lang="en-US" class="heightfix">
 
<!--<![endif]-->
 
<head>
 
<link rel="icon" type="image/x-icon" href="http://www.treetoponline.com/favicon.ico" />
 
 
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Creative | Treetop Marketing and Promotion</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="http://treetoponline.com/wordpress/xmlrpc.php" />
<!--[if lt IE 9]>
<script src="http://treetoponline.com/wordpress/wp-content/themes/twentytwelve/js/html5.js" type="text/javascript"></script>
<![endif]-->
 
 
 
 
 
<meta name='robots' content='noindex,nofollow' />
<link rel="alternate" type="application/rss+xml" title="Treetop Marketing and Promotion &raquo; Feed" href="http://treetoponline.com/wordpress/feed/" />
<link rel="alternate" type="application/rss+xml" title="Treetop Marketing and Promotion &raquo; Comments Feed" href="http://treetoponline.com/wordpress/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="Treetop Marketing and Promotion &raquo; Creative Comments Feed" href="http://treetoponline.com/wordpress/creative/feed/" />
<link rel='stylesheet' id='twentytwelve-style-css'  href='http://treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/style.css?ver=3.6.1' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='mytheme-ie-css'  href='http://treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/css/ie.css?ver=1.0' type='text/css' media='all' />
<![endif]-->
<link rel='stylesheet' id='twentytwelve-fonts-css'  href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700&#038;subset=latin,latin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='new-royalslider-core-css-css'  href='http://treetoponline.com/wordpress/wp-content/plugins/new-royalslider/lib/royalslider/royalslider.css?ver=3.1.0' type='text/css' media='all' />
<link rel='stylesheet' id='treetop-css-css'  href='http://treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/rs-custom-skin/treetop/treetop.css?ver=3.1.0' type='text/css' media='all' />
<link rel='stylesheet' id='visible_nearby_simple-css-css'  href='http://treetoponline.com/wordpress/wp-content/plugins/new-royalslider/lib/royalslider/templates-css/rs-visible-nearby-simple.css?ver=3.1.0' type='text/css' media='all' />
<script type='text/javascript' src='http://treetoponline.com/wordpress/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://treetoponline.com/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/js/jquery.carouFredSel.js?ver=1.0'></script>
<script type='text/javascript' src='http://treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/js/fresco/fresco.js?ver=3.6.1'></script>
<script type='text/javascript' src='http://treetoponline.com/wordpress/wp-includes/js/comment-reply.min.js?ver=3.6.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://treetoponline.com/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://treetoponline.com/wordpress/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='Home' href='http://treetoponline.com/wordpress/' />
<link rel='next' title='Print' href='http://treetoponline.com/wordpress/creative/print/' />
<meta name="generator" content="WordPress 3.6.1" />
<link rel='canonical' href='http://treetoponline.com/wordpress/creative/' />
	<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
 
<script type="text/javascript" src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/js/dropdwns.js"></script>
 
<script type="text/javascript" src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/js/jquery.carouFredSel.js"></script>
 
<script type="text/javascript" language="javascript">
jQuery(document).ready(function(<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/cash.png" title="Cash" alt="Cash" class="smiley-content" /> {
 
	// Using custom configuration
	$("#slider").carouFredSel({
	width: "100%",
	height: 95,
	align : "center",	
	items: {
		visible: 5,
		width: "variable",
		height: 85
	},
	scroll: {
		duration: 1000,
		pauseOnHover: false
	},
	prev: {
		button: "#prevBtn",
		key: "left"
	},
	next: {
		button: "#nextBtn",
		key: "right"
	}
	});	
});
</script>
 
 
 
</head>
 
<body class="page page-id-11 page-parent page-template page-template-page-communication-php logged-in custom-font-enabled single-author">
<div id="bg-tree-wrapper" class="clear">
 
<div id="page" class="hfeed site">
 
	<header id="masthead" class="site-header" role="banner">
			<div id="site-title">
				<a href="http://treetoponline.com/wordpress/" title="Treetop Marketing and Promotion" rel="home">
				<span>Treetop Marketing and Promotion</span>
				</a>
			</div>
 
			<!-- site description code has been removed -->
			<!-- site navigation code has been removed -->
			<!-- header image code has been removed -->
 
			<div id="contact" onmouseover="show('contact')" onmouseout="Hide('contact')">
 
			<div class="navdrop">
                <ul>
                <li id="navContact"><a href="#"><span class="head">CONTACT</span></a></li>
					<ul id="dropnava_contact" style="display:none;">
						<li id="navContactInfo">
							<p>1272 Vernon Drive<br>
							Vancouver, B.C. V6A 4C9</p>
							<p>P: 604-255-8867<br>F: 604-255-8859</p>
							<p class="lastLine"><a href="mailto:[email protected]">info@treetopmarketing.ca</a></p>
						</li>
					</ul>
            	</ul> 
            </div> <!--end navdrop--> 
            </div>
 
 
 
	</header><!-- #masthead -->
 
	<div id="main" class="wrapper"> ?>
 
	<div class="col_left">
 
        <div id="creative">
        	<div class="navdrop">
                <ul>
                <li id="navCreative"><a href="http://treetoponline.com/wordpress/creative/"><span class="head">CREATIVE</span></a></li>
                <ul id="dropnava_c" style="display:block;">
                	<li id="navPrint"><a href="http://treetoponline.com/wordpress/communication/print/"><span class="subnav">PRINT</span></li></a>
                	<li id="navBranding"><a href="http://treetoponline.com/wordpress/communication/branding/"><span class="subnav">BRANDING</span></a></li>
                	<li id="navOnline"><a href="http://treetoponline.com/wordpress/communication/online/"><span class="subnav">ONLINE</span></a></li>
                	<li id="navVideo"><a href="http://treetoponline.com/wordpress/communication/video/"><span class="subnav">VIDEO</span></a></li>
                </ul>
            </ul> 
            </div> <!--end navdrop-->   
        </div><!--end communication-->
 
        <div id="promotion" onmouseover="show('promotion')" onmouseout="Hide('promotion')">
        <div class="navdrop">
                <ul>
                <li id="navPromotion"><a href="http://treetoponline.com/wordpress/promotion/"><span class="head">PROMOTION</span></a></li>
                <ul id="dropnava_p" style="display:none;">
                	<li id="navApparel"><a href="http://treetoponline.com/wordpress/promotion/apparel/"><span class="subnav">APPAREL</span></a></li>
                	<li id="navProducts"><a href="http://treetoponline.com/wordpress/promotion/products/"><span class="subnav">PRODUCTS</span></a></li>
                	<li id="navIncentives"><a href="http://treetoponline.com/wordpress/promotion/incentives/"><span class="subnav">INCENTIVES</span></a></li>
                	<li id="navUniforms"><a href="http://treetoponline.com/wordpress/promotion/uniforms/"><span class="subnav">UNIFORMS</span></a></li>
                </ul>
            </ul>
            </div> <!--end navdrop-->  
        </div><!--end promotion-->
 
 
 
        </div><!--end col_left-->
 
    	<div class="col_right">
 
 
			<div id="primary" class="site-content">
 
				<div id="content" role="main">
 
 
	<article id="post-11" class="post-11 page type-page status-publish hentry">
				<header class="entry-header">
								</header><!-- .entry-header -->
 
				<div class="entry-content">
			<p>Honing the message for the right media means really understanding our clients╩╝ business, from the boardroom to the warehouse to the hands of the consumer. You can always tell great stories about those you know the best.</p>
					</div><!-- .entry-content -->
 
	</article><!-- #post -->
 
 
 
				</div><!-- #content -->
 
	</div><!-- #primary -->    
 
    </div><!--end col_right-->
 
<!-- sidebar code has been removed, thus no "secondary" div. -->
 
<a name="sliderAnchor"></a>
 
<div style="clear: both;">&nbsp;</div>
 
 
	<div id="slider">
		<img src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/logoslider/pepsi.png" width="81" height="85">
		<img src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/logoslider/tim-hortons.png" width="176" height="85">
		<img src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/logoslider/kahlua.png" width="139" height="85">
		<img src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/logoslider/ben-and-jerrys.png" width="175" height="85">
		<img src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/logoslider/brisk.png" width="109" height="85">
		<img src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/logoslider/dr-pepper.png" width="124" height="85">
		<img src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/logoslider/freybe.png" width="161" height="85">
		<img src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/logoslider/magnum.png" width="200" height="85">
		<img src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/logoslider/gatorade.png" width="76" height="85">
		<img src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/logoslider/quaker-oats.png" width="86" height="85">
		<img src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/logoslider/crush.png" width="119" height="85">
		<img src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/logoslider/frito-lay.png" width="115" height="85">
		<img src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/logoslider/wisers.png" width="187" height="85">
		<img src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/logoslider/popsicle.png" width="120" height="85">
		<img src="http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/logoslider/dairyland.png" width="164" height="85">
	</div>
 
 
</div><!-- #main .wrapper -->
 
 
 
	<footer id="colophon" role="contentinfo"><p>&copy; 2013 Treetop Marketing and Promotion Inc.</p></footer><!-- #colophon -->
 
</div><!-- #page -->
 
</div> <!-- #bg-tree-wrapper -->
<script type='text/javascript' src='http://treetoponline.com/wordpress/wp-content/themes/twentytwelve/js/navigation.js?ver=1.0'></script>
<script type='text/javascript' src='http://treetoponline.com/wordpress/wp-content/plugins/new-royalslider/lib/royalslider/jquery.royalslider.min.js?ver=3.1.0'></script>
 
</body>
</html>

and here's the CSS:

/*
Theme Name:     Treetop
Description:    TwentyTwelve child theme
Author:         Adam Abrams
Author URI:     <a href="http://www.adamabramsdesign.com/
Template:" rel="nofollow">http://www.adamabramsdesign.com/
Template:</a>       twentytwelve
Version:        1.0
*/
 
@import url("../twentytwelve/style.css");
 
html {
	overflow-y: visible;
}
 
html.heightfix {
	height: 100% !important;
	border: 1px solid red;
	background-color: transparent;
}
 
body {
	height: 100% !important;
	font-family: Arial, Helvetica, sans-serif;
	font-stretch: condensed;
	font-size: 13px;
	font-size: .93rem;
	line-height: 18px;
	line-height: 1.2rem;
background:  #197f36
url('http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/background-gradient10.jpg') repeat-x !important;
	margin-top: 0 !important;
	background-attachment: fixed !important;
}
 
#bg-tree-wrapper {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 100% !important;
	background-image: url('http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/tree-bg-image7.jpg');
	background-repeat: no-repeat;
	background-position: top;
	background-attachment: fixed;
}
 
.site {
	margin: 0 auto;
	margin-top: 40px !important;
	width: 90%;
	background: url('http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/page-bg.png');
	-moz-border-radius: 30px;
	border-radius: 30px;
	clear: both;
}
 
@media screen and (max-width: 968px) {
	.site {
		width: 900px;
	}
	#bg-tree-wrapper {
		width: 1000px;
	}
}	
 
.site-header {
	display: block;
	height: 150px;
	width: 98%;
	margin: 0 auto;
	/* these next 2 are unchanged */
	padding: 24px 0 0;
	padding: 1.714285714rem 0 0;
}
 
#site-title a {
	float: left;
	display: block;
	width: 243px;
	height: 105px;
	background: url('http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/treetop-logo.png') no-repeat top left;
	margin-top: 24px;
}
 
#site-title a span {
	display: none;
}
 
#contact {
	display: block;
	float: right;
	width: 31%;
	height: 150px;
	overflow: hidden;
	background: url('http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/contact.jpg') no-repeat top left;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
 
.home #contact {
	background-position: 0 -150px;
}
 
#contact:hover {
	background-position: top left;
}
 
.home #contact:hover {
	background-position: top left;
}
 
#contact-text {
	color: white;
	margin: 1em;
	font-size: 12px;
	font-size: .9375rem;
	line-height: 14px;
	line-height: 1rem;
	display:none;
}
 
#contact-text img {
	margin: 0; padding: 0;
}
 
#contact-text p {
	margin-top: .5em;
}
 
#contact-text a:link,
#contact-text a:visited,
#contact-text a:hover,
#contact-text a:active {
	color: white;
}
 
#contact:hover #contact-text {
	display: block;
}
 
 
#main {
	clear: both;
	width: 98%;
	height: auto;
	padding: 0; 
	margin: 0 auto;
}
 
 
 
.col_left {
	float:left;
	margin: 0;
	width: 67%; 
	height: 330px;
	background: transparent;
}
 
#creative {
	margin: 20px 0 0 0;
	color: #fff;
	display: block;
	height: 148px;
	background: url('http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/creative-bg.jpg') left top no-repeat;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
body.page-template-page-communication-php #promotion,
body.page-template-page-communication-print-php #promotion,
body.page-template-page-communication-branding-php #promotion,
body.page-template-page-communication-online-php #promotion,
body.page-template-page-communication-video-php #promotion
{
	background: url('http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/promotion-bg.jpg') left -189px no-repeat;
}
 
 
#promotion {
	margin: 20px 0 0 0;
	height: 148px;
	color: #fff;
	background: url('http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/promotion-bg.jpg') left top no-repeat;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
 
body.page-template-page-promotion-php #creative,
body.page-template-page-promotion-apparel-php #creative,
body.page-template-page-promotion-products-php #creative,
body.page-template-page-promotion-incentives-php #creative,
body.page-template-page-promotion-uniforms-php #creative
{
	background: url('http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/creative-bg.jpg') left -152px no-repeat;
}
 
 
.col_right {
	float: right;
	margin: 0;
	width: 31%;
	height: 330px;
	background: transparent;
}
 
 
.site-content {
	margin: 20px 0;
	height: 316px;
	width: 100%;
	padding: 0;
	background: url('http://www.treetoponline.com/wordpress/wp-content/themes/twentytwelve-child/images/textbox-bg.png');
	-moz-border-radius: 10px;
	border-radius: 10px;
}
 
.site-content article {
	border: none;
	margin: 0;
	padding: .75em 1.5em 1.5em 1.5em;
	word-wrap: break-word;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	hyphens: none;
}
 
.entry-header {
	height: auto;
	margin: 0; padding:  0;
}
 
.post {
	margin: 0; padding: 0;
}
 
.subnav {
	margin-left: -20px;
}
 
#colophon {
	background-color: transparent;
	border-top: none;
	margin: 0; padding: 0;
}
 
#colophon p {
	color: white;
	font-size: .75em;
	padding: 24px 0;
}
 
/* NAVAGATION LISTS Starts*/
 
.navdrop ul {
	width: 110px;
	height: 200px;
	margin: 0px 0px 0px 20px;
	padding: 1em 0 0;
	color: #fff;
	font-weight: bold;
	list-style-type: none;
	text-decoration: none;
	background-color: transparent;
}
 
.navdrop ul li {
	/*display: block;*/ /*This makes the navigations horizontal*/
	font-size: 20px;
	font-stretch:extra-expanded;
	line-height: 22px;
	list-style-type: none;
	text-decoration:none;
	padding: 0;
	margin: 0;
	color: #fff;
	opacity: 0.5;
	filter:alpha (opacity=50);/*for IE8 and earlier*/
	background-color: transparent;
}
 
.navdrop ul li:hover {
	color: #fff;
	text-decoration: none;
	opacity: 1.0;
	filter:alpha (opacity=100); /*for IE8 and earlier*/
	background-color: transparent;
}
 
.navdrop ul li a {
	color: #fff;
	text-decoration: none;
	background-color: transparent;
}
 
.navdrop ul ul {
	padding-top: .4em;
}
 
/*.navdrop a:hover {
	/*color: #fff;
	text-decoration: none;
	background: transparent;
	background-color: transparent;
}*/
 
/* JUST FOR THE CONTACT BOX... */
 
ul#dropnava_contact {
	margin-left: 0;
}
 
#contact .navdrop ul ul {
	padding: 0;
	margin-top: 10px;
	font-weight: normal;
}
 
#contact #navContactInfo p {
	padding-bottom: 5px;
}
 
#contact #navContactInfo p.lastLine {
	padding-bottom: 0;
}
 
#contact .navdrop .subnav {
	margin: 0; padding: 0;
}
 
#contact .navdrop ul ul li {
	font-size: 12px;
	width: 250px;
	line-height: 14px;
	list-style-type: none;
	text-decoration:none;
	color: #fff;
	padding: 0;
	margin: 0;
}
 
#contact:hover .navdrop ul ul li {
	opacity: 1;
	filter:alpha (opacity=100);/*for IE8 and earlier*/
	background-color: transparent;
}
 
/* -------------- */
 
#contact:hover li#navContact,
 
body.page-id-11 .navdrop ul li#navCreative,
body.page-id-13 .navdrop ul li#navCreative,
body.page-id-15 .navdrop ul li#navCreative,
body.page-id-17 .navdrop ul li#navCreative,
body.page-id-19 .navdrop ul li#navCreative,
 
body.page-id-13 .navdrop ul li#navPrint,
body.page-id-15 .navdrop ul li#navBranding,
body.page-id-17 .navdrop ul li#navOnline,
body.page-id-19 .navdrop ul li#navVideo,
 
body.home #promotion:hover li#navPromotion,
body.page-id-11 #promotion:hover li#navPromotion,
body.page-id-13 #promotion:hover li#navPromotion,
body.page-id-15 #promotion:hover li#navPromotion,
body.page-id-17 #promotion:hover li#navPromotion,
body.page-id-19 #promotion:hover li#navPromotion,
 
body.page-id-21 .navdrop ul li#navPromotion,
body.page-id-23 .navdrop ul li#navApparel,
body.page-id-25 .navdrop ul li#navProducts,
body.page-id-27 .navdrop ul li#navIncentives,
body.page-id-29 .navdrop ul li#navUniforms,
 
body.home #creative:hover li#navCreative,
body.page-id-21 #creative:hover li#navCreative,
body.page-id-23 #creative:hover li#navCreative,
body.page-id-25 #creative:hover li#navCreative,
body.page-id-27 #creative:hover li#navCreative,
body.page-id-29 #creative:hover li#navCreative
 
{
	opacity: 1.0;
	filter:alpha (opacity=100); /*for IE8 and earlier*/
	text-decoration: none;
	background-color: transparent;
}
 
p.sub {
	font-size: 20px;
	line-height: 26px;
}
 
.head {
	font-size: 28px;
	font-weight: bolder;
	color: inherit;
	background: none;
}
 
 
/* NAVIGATION ends*/
 
 
/* Hide the slideshow, it's accessed by the slider */
 
 
body div.hideGallery {
	display: none !important;
}
 
 
/* PORTFOLIO CAROUSEL (RoyalSlider) */
 
.royalSlider {
	width: 100% !important;
	margin-top: 5px !important;
	padding: 60px 0 80px;
}
 
.royalSlider .rsContainer .rsSlide .rsContent a {
    cursor: pointer !important;
}
 
/* LOGO CAROUSEL */
 
 
#slider {
	margin: 0;
	float: left;
    overflow: hidden;
}
 
#slider img {
	display: block;
	float: left;
	height: 85px;
	margin: 5px 15px;
}
 
.caroufredsel_wrapper {
	margin: 20px auto !important;
	background-color: #25a84a;
	-moz-border-radius: 10px;
	border-radius: 10px;
 
	text-align: -webkit-auto; 
	margin-top: 0px; 
	overflow-x: hidden; 
	overflow-y: hidden; 
	position: relative; 
	display: block;	
}
 
#prevBtn, #nextBtn {
	position: absolute;
	width: 25px; height: 25px;
	border: none;
	font-style: bold;
	font-size: 2em;
}
 
#prevBtn {
	top: 35px; left: 0px;
}
 
#nextBtn {
	top: 35px; right: 0px;
}
 
 
#footer {
	clear:both;
	margin: 20px 0 0 10px;
	font-size: 10px;
	text-align: left;
	color: #d1dece;
}

I've tried many different approaches to solving this with no success. Is there something obvious I'm missing?

Hope so....!

Thanks,
Adam

cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 5 years 50 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Oh yeah, the link!

http://bit.ly/1fvbnHY

(using Bit.ly to protect client's test site from Google....)

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 15 hours 19 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi cosmocanuck, Try to avoid

Hi cosmocanuck,
Try to avoid !important it's not needed in this instance.

When you set html to 100% it's basically setting the height to the browser window, viewport height.
Why not try min-height instead on html and body.

cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 5 years 50 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

That's fixed, but now background tree is cut off

Thanks Tony! Min-height on HTML and BODY certainly eliminated that problem. But, now I see that the bg-tree-wrapper div refuses to go all the way to the bottom (in a full window, not a shortened one) even if I apply min-height: 100% to it.

If I change the height of bg-tree-wrapper to a pixel amount to ensure the bg image is visible (1200px in this case), I get a vast area below the page content and a too-long scrollbar.

How can I force bg-tree-wrapper to go to the bottom of the browser window always, even with short content?

I'm thinking of trying the multiple-background solution, combining the tree and the repeating, matching background "sliver" in one DIV, but don't really want to open that CSS3-only can of worms...

Hope there's a way to achieve the efficient layout I've created without a major rebuild!

cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 5 years 50 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

SOLVED... I think!

Thank heavens. I used the solution in this discussion - absolutely positioning the tree and giving it 100% width. Coupled with the addition of min-height 100%, it seems to work!!!! Hallelujah!

Thanks for your suggestion Tony, and thanks again to this board for proving such a great resource.

cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 5 years 50 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Except in IE / Windows

Running IE 8 (not the latest I know, but if it works there... "should" be OK in 9 and 10?) on VMware Fusion, Windows emulator for Mac.

Background cutoffs all over the place, on ALL pages... no doubt due to "min-height" meaning nothing to IE.

Here's what i mean: http://bit.ly/1bknncD

I am feeding an IE-specific CSS file to my site if the browser is IE, but the seeming solution I'm finding - applying "height: 100%" instead of "min-height: 100%" in that IE stylesheet - isn't doing any good...

Should have known not to crow "it's fixed" so soon!

cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 5 years 50 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Really, really solved, by...

...feeding IE the "old" way of displaying the background-tree DIV:

#bg-tree-wrapper {
	margin: 0 auto;
	padding: 0;
	position: relative;
}	

And only doing it as per the method in the above-referenced forum article on the non-IE pages:

#bg-tree-wrapper {
       position: absolute;
       top: 0; left: 0;
	margin: 0;
}

It's working all around now.