Div auto height issue

HTML & CSS
1

Quick question, well I’m hoping it is. I’m having an issue with Firefox and IE (go figure) I have a layout that calls for a white background to span the height of another div that is inside it - I need everything to be set to auto height though because its for wordpress and I really don’t want to make an individual template for each page to accommodate height.

My issue with Firefox and IE is that there is some random blue bar going across under the header image and the white is not completely flush the header image… if you view the site in chrome you’ll see how it should look in firefox and ie. Asotin County Community Services | Helping Individuals with Learning Disabilities Succeed in School, Life, and Work

Here’s my CSS code

body {
	background-image:url('http://www.asotincommunityservices.com/wp-content/uploads/2011/07/BackgroundSilver.jpg');
}

h1 {
    font-family: 'Josefin Sans', arial, serif;
    font-weight:bold;
    color:#fff;
}

/*----------------------------Styles ------------------------*/

#wrapper {
	margin:0 auto;
	width:820px;
}

#header {
	background-image:url('http://www.asotincommunityservices.com/wp-content/uploads/2011/07/GroupImage.jpg');
	z-index:1;
	width:820px;
	height:480px;
}

#content {
	display:block;
	background-color:#fff;
	width:820px;
	height:auto;
	position:relative;
	float:left;
	font-family:"Cuprum", arial, serif;
	font-size:16px;
	margin-top:50px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	margin-bottom:25px;
}

.dashedLine {
	background:url(http://www.asotincommunityservices.com/wp-content/uploads/2011/07/DashedLine.png);
	position:relative;
	float:left;
	width:5px;
	height:275px;
	text-align:center;
	margin-left:25px;
	margin-top:60px;
}
.dashedLine2 {
	background:url(http://www.asotincommunityservices.com/wp-content/uploads/2011/07/DashedLine.png);
	position:relative;
	float:right;
	width:5px;
	height:275px;
	text-align:center;
	margin-right:50px;
	margin-top:60px;
}


#col_two {
	margin-top:-50px;
	padding-left:50px;
	position:relative;
	float:left;
	width:170px;
	height:450px;
	margin-left:40;
}
#col_three {
	margin-top:-50px;
	position:relative;
	float:right;
	width:170px;
	height:450px;
	margin-right:90px;
}

#col_four {
	margin-top:-50px;
	position:relative;
	float:left;
	width:185px;
	height:450px;
	margin-left:40px;
	margin-right:30px;
}

#navigation {
    	width:100%;
}

#top_nav {
    	position:relative;
    	float:right;
    	padding-right:25px;
		margin-top:-480px;
}

#top_nav ul {
		width:100%;
		display:inline;
}

#top_nav li {
    	font-family: "Cuprum", arial, serif;
    	font-size:14px;
    	color:#000;
    	display:inline;
    	list-style-type:none;
}

#top_nav li:after {
	content: " |";
}

#top_nav li:last-child:after {
	content: "";
}

#top_nav a {
	text-decoration:none;
	color:#000;
}

#branding {
    display:block;
    margin:0px auto;
    line-height:34px;
    padding-top:45px;
}

#branding img {
	margin-left:30px;
}

.tagline {
    font-family: "Cuprum", arial, serif;
    text-align:right;
    margin-top:-10px;
    font-size:18px;
    color:#fff;
    line-height:16px;
    margin-right:75px;
    font-weight:100px;
}

.push_right {
    margin-left:100px;
    font-family: 'Cuprum', arial, serif;
}

.special_move {
    text-align:center;
    margin-left:75px;
    letter-spacing:2px;
}

.special_bold {
    font-weight:bolder;
    font-family:  'Cuprum', arial, serif;
    font-size:76px;
}

.large {
    font-size:70px;
}

#main_nav {
    margin-top:-250px;
}
#top_level a:link {
    text-decoration:none;
}
#top_level,#top_level ul {
    margin:0;
    padding:0;
    list-style-type:none;
}
#top_level a {
    display:block;
}
#top_level {
    margin:0;
    padding:0;
    list-style:none;
    font-family:  'Cuprum', arial, serif;
}
#top_level li {
    width:160px;
    height:40px;
    text-align:right;
    margin:0px 0 0 -100px;
    position:relative;
}
#about {background:url(http://www.asotincommunityservices.com/wp-content/uploads/2011/07/MainNavSml.png) no-repeat;}
#programs {background:url(http://www.asotincommunityservices.com/wp-content/uploads/2011/07/MainNavSml.png) no-repeat;}
#photo {background:url(http://www.asotincommunityservices.com/wp-content/uploads/2011/07/MainNavSmlOrange.png) no-repeat;}
#contact {background:url(http://www.asotincommunityservices.com/wp-content/uploads/2011/07/MainNavSmlRed.png) no-repeat;}
#about a {color:#60a691;}
#programs a {color:#8ab358;}
#photo a {color:#da732b;}
#contact a {color:#ce4a48;}
#top_level a {
    display:block;
    padding:0 10px;
    font-size:18px;
    text-decoration:none;
    height:40px;
    line-height:40px;
}
#top_level ul {
    text-align:left;
    margin-left:-999em;
    background:url('http://www.asotincommunityservices.com/wp-content/uploads/2011/07/NavigationBox.png') no-repeat;
    width:270px;
    height:150px;
    display:block;
    position:absolute;
    left:155px;
    top:-55px;
}
#top_level li:hover ul {margin:0}
#top_level li:hover ul li{
    width:auto;
    height:auto;
    text-align:left;
    margin:0;
}
#top_level li:hover ul a {
    display:block;
    padding:0;
    text-decoration:none;
    height:auto;
    line-height:35px;
    font-size:18px;
    color:#000;
    margin:3px 0 0 30px;
}
#top_level ul li a:hover {
    color:#da732b;
}


h2 {
	display:block;
	font-family: 'Cuprum', arial, serif;
	font-size:14px;
}

h2.birth {
	background-image:url('http://www.asotincommunityservices.com/wp-content/uploads/2011/07/Birthto3TitleBox.png');
	background-repeat:no-repeat;
	margin:0 auto;
	text-align:center;
	width:140px;
	height:80px;
	font-size:24px;
	color:#fff;
	padding-top:15px;
	font-family: "Josefin Sans", arial, serif;
	font-weight:bolder;
}
.colCaps {
	text-transform:uppercase;
	font-family:"Josefin Sans", arial, serif;
	font-weight:100;
}

h2.support {
	background-image:url('http://www.asotincommunityservices.com/wp-content/uploads/2011/07/SupportedLivingTitleBox.png');
	background-repeat:no-repeat;
	margin:0 auto;
	text-align:center;
	width:140px;
	height:80px;
	font-size:24px;
	color:#fff;
	padding-top:15px;
	font-family: "Josefin Sans", arial, serif;
	font-weight:bolder;
}

h2.employment {
	background-image:url('http://www.asotincommunityservices.com/wp-content/uploads/2011/07/EmploymentServicesTitleBox.png');
	background-repeat:no-repeat;
	margin:0 auto;
	text-align:center;
	width:140px;
	height:84px;
	font-size:22px;
	color:#fff;
	padding-top:18px;
	font-family: "Josefin Sans", arial, serif;
	font-weight:bolder;
}

.linkBox {
	position:absolute;
	top:375px;
	right:0px;
	text-align:right;
}

.linkBox a {
	color:#fff;
	text-decoration: none;
}
/*-------------------------------Footer Styles ----------------------------------*/
#footer {
	clear:both;
	width:820px;
	position:relative;
	top:45px;
	margin-top:40px;
	margin-bottom:45px;
}

#mission {
	width:350px;
	background-color:#fff;
	-moz-border-radius: 15px;
	border-radius: 15px;
	font-family: 'Cuprum' arial, serif;
	font-size:14px;
	color#000;
	margin-right:10px;
	float:left;
	margin-left:40px;
	padding-top:50px;
	padding:25px;
	position:relative;
	height:auto;
}

#contactInfo {
	text-align:right;
	margin-right:50px;
	width:275px;
	background-color:#fff;
	-moz-border-radius: 15px;
	border-radius: 15px;
	font-family: 'Cuprum' arial, serif;
	font-size:14px;
	color#000;
	float:right;
	padding:20px;
	padding-top:25px;
}

#missionTitle {
	position:absolute;
	left:240px;
	top:-25px;
	background:url('http://www.asotincommunityservices.com/wp-content/uploads/2011/07/OurMissionTitleBox1.png') no-repeat;
	width:135px;
	height:40px;
	color:#fff;
	font-family:"Josefin Sans", arial, serif;
	padding-left:18px;
	padding-top:12px;
	font-size:18px;
	font-weight:100;
	
}
#contactTitle {
	position:absolute;
	right:48px;
	top:-25px;
	background:url('http://www.asotincommunityservices.com/wp-content/uploads/2011/07/ContactUsTitleBox1.png') no-repeat;
	width:135px;
	height:40px;
	color:#fff;
	font-family:"Josefin Sans", arial, serif;
	padding-left:24px;
	padding-top:12px;
	font-size:18px;
	font-weight:100;
	text-align: left;
}
#gap {
	clear:both;
	height:300;
}

/*---------------------------------Interior Page Styles ------------------------------*/
#intContent {
	position:relative;
	float:left;
	display:block;
	width:750px;
	height:auto;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow: 1px 3px 4px 4px #EBEBEB;
	box-shadow: 1px 3px 4px 4px #EBEBEB;
	margin:25px;
	padding-left:20px;
	padding-bottom:25px;
	position:relative;

	line-height:18px;
	background-color:#fff;
	margin-bottom:25px;
	
}

#intLeftContent {
	display:block;
	position:relative;
	width:440px;
	float:left;
}

#intTitleOrange {
	display:block;
	background-image:url('http://www.asotincommunityservices.com/wp-content/uploads/2011/07/IntPageTitleBoxOrange.png');
	background-repeat:no-repeat;
	width:300px;
	height:75px;
	position:relative;
	top:-50px;
	left:100px;	
}

#intContent h1 {
	position:relative;
	display:block;
	font-weight:100;
	font-family:'Cuprum', arial, serif;
	font-size:24px;
	text-align:center;
	padding-top:25px;
}


/*------------------------- Interior Sidebar Styles ----------------------------------*/

#intSBContent {
	display:block;
	position:relative;
	float:left;
	width:300px;
	height:auto;

}

.silverBox{
	display:block;
	background-color:#ebebeb;
	height:150px;
	margin:30px 15px 0px 15px;
	-moz-border-radius:5px;
	border-radius:5px;
	padding:10px;
}	

#tealbox {
	background-image:url('http://www.asotincommunityservices.com/wp-content/uploads/2011/07/QuoteTitleBox.png');
	background-repeat:no-repeat;
	width:190px;
	height:40px;
	display:block;
	position:relative;
	float:left;
	text-align:center;
	margin-left:100px;
	
}
h2#tealbox {
	color:#fff;
	font-family:"Cuprum", arial, serif;
	font-weight:100;
	padding-top:13px;
	padding-left:35px;
	font-size:15px;
}

#greenbox {
	background-image:url('http://www.asotincommunityservices.com/wp-content/uploads/2011/08/WhatsNewTitleBox.png');
	background-repeat:no-repeat;
	width:190px;
	height:40px;
	display:block;
	position:relative;
	float:left;
	text-align:center;
	margin-left:100px;
	
}
h2#greenbox {
	color:#fff;
	font-family:"Cuprum", arial, serif;
	font-weight:100;
	padding-top:13px;
	padding-left:35px;
	font-size:15px;
}

/*----- Buttons -----*/

.checkout {
	position:relative;
	float:right;
	padding:10px;
}

And the page.php code

<?php
/*
 * Template Name: Interior Page
 */
?>
<?php get_header(); ?>
<div id="content">
	<div id="intContent">
	<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

					<?php if ( is_front_page() ) { ?>
						<h2><?php the_title(); ?></h2>
					<?php } else { ?>	
						<h1><?php the_title(); ?></h1>
					<?php } ?>				
						<?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?>
						<?php edit_post_link( __( 'Edit', 'twentyten' ), '', '' ); ?>

				

<?php endwhile; ?>
	</div>
		

<?php get_sidebar();?>
</div>
<?php get_footer(); ?>

Any help would be great appreciated!

2

I may be misunderstanding the requirements of your question…

but have you tried setting


#header{
    background: url("http://www.asotincommunityservices.com/wp-content/uploads/2011/07/GroupImage.jpg") no-repeat ;}

Or maybe you wanted to retain the blue b/g in case the image was missing, which makes sense. If such is the case I would point to your attention that your background-image is 450px, but you set it’s container to 480px. I think Chrome might not be honoring the blue bg, and that’s why it appeared to display as you expected.

An element doesn’t auto stretch to fit it’s bg image, only it’s content. So if you want to fit a bg precisely you need to give it the exact dimensions of the bg image.

Overall I would recommend this:


#header{
background: url("http://www.asotincommunityservices.com/wp-content/uploads/2011/07/GroupImage.jpg") no-repeat #[your blue or white hex here]; 
height:450px;
}
3

I guess I’m just trying to close a gap and something is wrong either with my header div’s css or the actual content div itself. What I’d like to see happen is the white background start immediately after the bottom of the picture, and continue down until just before the footer divs… I just can’t seem to close the gap somewhere

4

oop, i see my error! Fixed. Thank you though, I did fix the header with your recommendation

5