CSS 100% Width Problem

Associate
Joined
7 Sep 2003
Posts
1,897
Location
Bo'ness
Hey

I am pritty much a noob when it comes to HTML and CSS and I can ran into a very annoying problem.

CSS:
Code:
#Head {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:132px;
	z-index:1;
	background-image: url(test.jpg);
}
#Box1 {
	position:absolute;
	left:40px;
	top:150px;
	width:340px;
	height:140px;
	z-index:2;
	background-color: #085f97;
}
#Box2 {
	position:absolute;
	left:40px;
	top:310px;
	width:340px;
	height:140px;
	z-index:2;
	background-color: #88b0ca;
}
#Box3{
	position:absolute;
	left:40px;
	top:470px;
	width:340px;
	height:140px;
	z-index:2;
	background-color: #0b74b7;
}

HTML:
Code:
<body>
<div id="Head"> </div>
<div id="Box1"></div>
<div id="Box2"></div>
<div id="Box3"></div>
</body>

Site in IE:
iemt6.jpg


Site in FF:
ffes3.jpg



As you can see in IE the header does not reach the end of the page and in firefox it does. I have no idea how it fix this I have tried googling but I dont know whats causing this problem so googling as proved difficult. Any help would be great!
 
Apply the following at the top of your style sheet:
Code:
*, html, body{margin: 0; padding: 0;}
It will reset all the default margin and padding properties set by each browser, thus making it much easier to manage.
 
Back
Top Bottom