Centered columns not centering

programming web dev
1

http://kzc.morsedesigns.com/about/
http://kzc.morsedesigns.com/style.css

I’m perplexed. This looks fine in Safari, but in IE the content begins at the center of the screen (instead of far left). In Firefox, the center div is also starting at the top, no idea why.

Ug I hate css.

Here’s the content of the style sheet. Any idea what’s wrong? I’m most worried about the IE problem :frowning:


html,body,h1,h2,h3,h4,h5,h6,div,p,p2 {
	margin:0;
	padding:0;
}

body {
	margin: 0px;
	padding: 0px;
	text-align: center;
	background-color: #060000;
	background-image: url('smear.gif');
	background-repeat: repeat-x;
	background-position: top;
}

#content {
	margin: 0px auto 26px auto;
	padding: 0;
	/*width: 720px;*/
}

#header {
	margin: 0px 0px 10px 0px;
	padding: 0px;
}

#nav {
	margin: 0;
	padding: 0;
}

#front {
	width: 720px;
	margin: 0px auto 25px auto;
	padding: 0;
	text-align: center;
	background-color: yellow;
}

.col-1 {
	width: 50px;
	margin: 0px;
	padding: 35px 0 0 0;
	position: absolute;
	text-align: right;
	background-color: yellow;
}

.col-2 {
	width: 504px;
	margin: 0 0 0 72px;
	padding: 15px 7px 15px 7px;
	position: absolute;
	background-color: #fff;
	text-align: left;
}

.col-3 {
	width: 150px;
	margin: 35px 0 0 608px;
	padding: 0px;
	position: absolute;
}

.about-image {
	margin: 0 0 5px 0;
	padding: 0px;
}

p {
	font-family: Helvetica, Arial, sans-serif;
	color: #000;
	font-size: 12px;
	font-weight: normal;
}

ul {
	margin: 0px;
	padding: 0px;
}

li {
	font-family: Helvetica, Arial, sans-serif;
	color: #000;
	font-size: 12px;
	font-weight: normal;
}

h1 {
	font-family: Helvetica, Arial, sans-serif;
	color: #939598;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
}

h2 {
	font-family: Helvetica, Arial, sans-serif;
	color: #FF5C00;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 4px;
}

h3 {
	font-family: Helvetica, Arial, sans-serif;
	color: #FF5C00;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 12px;
}

.sIFR-flash, .sIFR-flash object, .sIFR-flash embed {
	display: none !important;
	height: 0;
	width: 0;
	position: absolute;
	overflow: hidden;
}

span.sIFR-alternate {
	visibility: visible !important;
	display: block !important;
	position: static !important;
	left: auto !important;
	top: auto !important;
}

/* Do not modify */

.sIFR-flash { visibility: visible !important; margin: 0; }
.sIFR-replaced { visibility: visible !important; }
span.sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; }

/* Modify */
/*
.sIFR-hasFlash h1 {
	visibility: hidden;
}
*/
.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: 0px;
	font-size: 15px;
}

.sIFR-hasFlash h3 {
	visibility: hidden;
	letter-spacing: 0px;
	font-size: 17px;
}
/*
.sIFR-hasFlash h4 {
	visibility: hidden;
	letter-spacing: -5px;
	font-size: 21px;
}

.sIFR-hasFlash h5#pullquote {
	letter-spacing: -4px;
	visibility: hidden;
	font-size: 24px;
}*/