CSS: IE margin problems are making me want to slap bill gates!

1

hello…
i’ve got a two column CSS layout using a container/wrapper div that has a box model hack applied to it. the container is 770 pixels wide (750 + 10px paddings for compliant browsers)…

so, the header is automatically “indented” 10 pixels on each side by the padding in the container. **great.

**however, i want the two colums and the footer to be “indented” 20pixels on each side. so i tried to set the left margin of the content column to 10px… (10 + 10 = 20 )

but IE indents it 20px!! not 10… (10 + 20 = 30 )

FF treats it just fine… but IE…?? :{

i’m hoping somebody could tell me what sort of IE problem i’m dealing with, and suggest a workaround… i’ve spent the day trying to figure it out… :hurt::{:hurt::hurt::hurt::hurt::{

HELP!!
Why does IE indent it 20px when its only supposed to go 10px!!

the code should be really easy to read through… i’ll post it in here, as well as attach a copy of it…

thanks!!

the CSS



	<style media="all" type="text/css">

html, body { 
	margin: 0; 
	 padding: 0;
	font-family: helvetica, Tahoma, Verdana,Serif;
	}




#container {
	background-color:#FFCC00;
	 margin: 0 auto;
	 width: 750px;
	 padding: 0px 10px 0px 10px;
	background-repeat:no-repeat; 


	}


* html container { /* This is the "Tan hack" for IE */
				width: 770px;
				w\idth: 750px;
				}







#header {
	 background-color:#000000;
	 color:#FFFFFF;
	 padding: 20px;
/*	 margin:0px 0 0 0; */
	 margin: 0px;
	}


#artwork {
	 border: 1px solid black;
	 padding-top: 20px;
	 padding-bottom: 20px;
	 margin: 0px
	}





/* here's the left colum */
#content {
	background-color:#FF9900;
	margin: 0px 10px 0px 10px;
	
	
	float:left;
	width:487px;
	}








/*   the "some info" box  in the right column  */
#sidebar {
	background-color:#FF9900;
	
	width: 230px;
	
	float: left;
	padding:0px;
	}



/* the "more info" box */
#sidebar2 {
	background-color:#FF9900;
	
	width: 230px;
	margin-top: 20px;
	float: left;
	padding:0px;
	}




#footer {
 margin: 20px 10px 0px 10px;
 padding: 0px;
 border: 1px solid black;
 clear: both;
}
	
	</style>

*FYI, the “artwork” div is basicly a second header … after adding the “skin” to the site, the artwork and header divs will combine to form one visual element… and also note the back slash in the hack isnt showing in this post for some reason…
*

here’s the html:




<div id="container">
	<div id="header"><h1> logo/nav</h1></div>

	<div id="artwork"><h1>artwork</h1></div>



	<div id="content">
		<h2>Main Content Area</h2>
		<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content


  </div>


	<div id="sidebar">
		<h2>Some Info</h2>
		<ul>
			<li><a href="#">link 1</a></li>
			<li><a href="#">link 2</a></li>
			<li><a href="#">link 3</a></li>
		 <li><a href="#">link 4</a></li>	 		
		</ul>
	</div>


	<div id="sidebar2">
		<h2>More Info</h2>
		<ul>
			<li><a href="#">link 1</a></li>
			<li><a href="#">link 2</a></li>
			<li><a href="#">link 3</a></li>
		 <li><a href="#">link 4</a></li>	 		
		</ul>
	</div>



	<div id="footer">
		<p>Notice that the rule for the footer has a margin of 0 pixels set 
		on the bottom and the body rule has 20 pixels of padding on the bottom. 
		This is because IE/Win does not show the bottom margin of this element. 
		I am not sure what bug this is specifically, but my work around is simple enough.</p>
	</div>

</div>