IE & Safari Problems

[keydin]

n 0 Posts
keydin is an unknown quantity at this point

A CSS Problem In Safari & IE Wordpress 2.3.1
I have redesigned my wordpress theme on my site but I am having some weird problems. steveeller.com

1. Everything displays correctly in a Mozilla browser (FF and Flock), but when I look at it in Safari 3.0.4 the background color doesn't show up.

2. When viewing in IE 7.0 the front page shows up but when you take one of the links in the "recent posts" it just goes to a blank page.

3. In IE 7.0 in my "recent posts" the posts are in a list, but you will see the type gets smaller as it goes down the list.

Can you help? Here is the CSS:

body, html {
	font-family:Arial, Helvetica, sans-serif;
	background-color:#343b48;
	margin: 0;
	padding: 0;
	text-align: center;
	color:#a3a6ac;
	height:100%;
}
img {
	border:none;
}
h1 {
	color:#ebe64f;
	text-transform:uppercase;
        font-size:18px;

}
h2 {
	color:#ebe64f;
	text-transform:uppercase;
	font-size:90%;

}
a, a:visited {
	color:#ebe64F;
	text-decoration:none;
	
}
a:hover {
	text-decoration:underline;

}
li {
	list-style:none;
	

}
ul {
	list-style:none;
	
}
.mainclass #container {
	
	width:800px;
	margin:0 auto;
	text-align:left;
	

}
.mainclass #header {
	height:91px;
	margin-top:20px;
	

}
.mainclass #headericon {
	float:left;
	background-image:url(images/tree.gif);
	background-repeat:no-repeat;
	width:100px;
	height:91px;
	padding-right:10px;

}
.mainclass #headerlogo {
	padding-top:35px;
	text-align:left;

}

.mainclass #rss {
	text-align:right;
	margin-top:-17px;
	font-size:75%;


}
.mainclass #rss a, .mainclass #rss a:visited {
	display:inline-block;        /* for all browsers except IE */
  	color:#a3a6ac;
  	text-decoration:none;
  

}
.mainclass #rss a:hover {
	display:inline-block;        /* for all browsers except IE */
  	color:#fff;
  	text-decoration:underline;
  

}
.headermenu {
margin:0;
text-align:left;
list-style-type:none;
text-transform:uppercase;
white-space:nowrap;    /* keep text on one line */
border-top-color: #a3a6ac;
border-bottom-color: #a3a6ac;
border-top-style: solid;
border-bottom-style: solid;
border-top-width:1px;
border-bottom-width: 1px;
margin-left:110px;
height:20px;
padding:0;
margin-top:5px;
}
.headermenu li {
font-size:90%;
float:left;
padding-right:25px;  	
}
.headermenu a {
text-decoration:none;
font-size:smaller;
color:#a3a6ac;
}
.headermenu a:hover {
color:#fff;
border-bottom-color: #ebe64f;
border-bottom-width: 2px;
border-bottom-style: solid;
}
.mainclass #clearfloat {
clear:both;

}
.mainclass #maincontent {
padding-top:20px;
overflow:auto;

}
.mainclass #columnleft {
	float:left;
	width:50%;

}
.mainclass #columnright {
	float:right;
	width:50%;
	text-align:right;
	background-image:url(images/recentbackground.jpg);
	background-repeat:no-repeat;
	width: 371px;
	height:270px;
	
}
.mainclass #posts {
	float:left;
    padding-left:20px;
   
	width:66%;
	margin:0;
}

.mainclass #sidebar {
	width:31%;
	float:right;
	text-align:left;
	height:100%;
	
}
.postbox {
	height:270px;
	width:80%;
	padding-left:20px;
	padding-right:20px;
	padding-top:30px;
	text-align:left;
}
.mainclass #footer {
text-align:center;
padding-top:20px;
font-size:85%;

}
.mainclass #page {
	float:left;
	width:100%;
	font-size:92%;
}
.mainclass #dsidebar li {
font-size:90%;
margin-left:-20px;
}
.mainclass #readpost a, .mainclass #readpost a:visited {
	display:inline-block;        /* for all browsers except IE */
  	color:#a3a6ac;
  	text-decoration:none;

}
.mainclass #readpost a:hover {
	display:inline-block;        /* for all browsers except IE */
	background-color:#ebe64f;
	color:#000;
  	text-decoration:none;

[keydin]

OK, I figured out the Safari problem. I realized I had a body, html {} which Safari won't read, so I added a regular body {}.