background-color in IE7 masks images

optimus203 · 07-25-2011, 01:38 AM

Hey everyone. For some reason, in IE7, the #footer div is cutting off the road2 image and facebook image. Appearance is fine in all browsers except IE7. Any ideas?

Code:

<div id="home-feature"> 
        <div id="home-content">
            <img src="images/road.jpg" />
            <div>
                <img src="images/road2.jpg" />
                <h1>Header1</h1>
                <p>Content</p>
            </div>
        </div> 
        
        <div id="footer">
            <img src="images/facebook.png" width="48" height="48" />
            <p>Contact info</p>
        </div>
    
    </div>

Code:

#home-feature {
	background-color:#fff;
	margin-top:-87px;
	width:1079px;
	-moz-box-shadow: 0 0 3px #9E9E9E;
	-webkit-box-shadow: 0 0 3px #9E9E9E;
	box-shadow: 0 0 3px #9E9E9E;
	border-top:3px solid #999\9; /*IE8- fix */
	border-left:3px solid #999\9; /*IE8- fix */
	border-right:3px solid #999\9; /*IE8- fix */}
#home-content {
	margin:0 auto;
	padding:43px 49px;}
#home-content {
	margin:0 auto;
	padding:43px 49px;}
#home-content div {
	background-color:#f3c730;
	margin:0;
	padding-top:30px;}
#home-content div img {
	display:inline;
	float:left;
	margin-left: 30px;
	margin-right: 30px;
	}
p {
	padding-bottom:15px;
	padding-right:30px;}

#footer {
	background-color:#fff;
	color:#a08c4f;
	font-weight:bold;
	margin-top:-30px;}
#footer img {
	float:right;
	margin-top:-30px;
	padding-right:60px;}

abduraooft · 07-25-2011, 09:31 AM

Quote:

the #footer div is cutting off the road2 image and facebook image.

Can we have a link to your page?