Forum Moderators: not2easy
#signup{
position: relative;
float: left;
top: 0px;
padding-left: 0px;
padding-right: 0px;
height: 135px;
width: 180px;
border:thick;
/*background:url(../images/background.png);
background-repeat: no-repeat;
*/
background-color:#000000;
}
xhtml
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gas Savings Netword</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id ="wrapper">
<div id ="header">
<ul>
<li class="contactlink"><a class="contact" href="#">CONTACT US</a></li>
<li class="managementlink"><a class="management" href="#">MANAGEMENT</a></li>
<li class="compensationlink"><a class="compensation" href="#">COMPENSATION</a></li>
<li class="howlink"><a class="how" href="#">HOW IT WORKS</a></li>
<li class="joinlink"><a class="join" href="#">JOIN</a></li>
<li class="homelink"><a class="home" href="#" title="Home">Home</a></li>
</ul>
</div>
<div id="clear"></div>
<div id="content">
<div id="maincontent">
<h1>test</h1>
<p>What is a gas rebate</p>
<p> </p>
</div>
<div id="secondarycontent">
secondary content
</div>
</div>
<div id="signup"><h2>Sign Up Today</h2></div>
<div id="dream">
<h3>test</h3>
</div>
</div>
</body>
</html>Everything validates.
When I use the background image in IE 7 only part of the image shows but it works completely find in Firefox and opera. However when use background-color it works ok in all three browsers.
So I'm wondering what IE-7 might be doing to my background image.
background: #000 url(../images/background.png) top left no-repeat;
Your other choice -
background-image: url(../images/background.png);
Marshall
Problem is that it doesn't seem to trigger the problem with the sample you posted.
Still, it smells like a IE7 bug, try giving the parent "has layout"
<!--[if IE 7]>
</style type="text/css>
#wrapper {
zoom:1
}
<style>
<![endif]-->
Oh, a tip: one can easily id on any element, no need to use extra divs.
<div id="dream">
<h3>...</h3>
</div>
<h3 id="dream">...</h3>
Don't use extra divs unless you need them, it's IMHO an equally bad practice as abusing tables for layout.
