CSS template overlapping

[stesteste]

Hi,
I'm kind of a newbie in css. I recently tried to learn by starting to modify a Blogger CSS template.
I've been having problems with the layout in IE,the upper menu doesn't show right,it sits either behind the main body or it creates a huge gap between the header,logo and the main body.
This is the code that i think is giving me the trouble:

#navbar, #navbar-iframe {
   height: 0px;
   visibility: hidden;
   display: none;
}

.navigation{
text-align:center;
padding:15px 0px;
}


.navigation a{
background:#EEE;
padding: 3px 7px;
line-height:10px;
text-align:center;
border:1px solid #FFF;
color:#333333!important;
}

.hilipage{
background:#CCCCCC!important;
}

.navigation a:hover{
border:1px solid #CCC;
}


.topnavi{
	width:500px;
	height:30px;
	float:left;
	margin:0px;
padding-top:100px;
overflow:visible;
position: relative;
}

.topnavi ul{
	list-style:none;
	margin-top:98px;
margin-right:75px;
	float:left;
}

.topnavi li{
	float:left;
	padding-left:5px;
	width:80px;
	height:30px;
}

.topnavi a{
	width:80px;
	height:22px;
overflow:visible;
	text-align:center;
	display:block;
	padding-top:8px;
	outline:none;
	font-size:10px;
	text-transform:uppercase;
	color:#FFF;
	background:url([url]http://img179.imageshack.us/img179/3484/burrrrronom8.png[/url]) no-repeat 0 0;
/*[url]http://img255.imageshack.us/img255/559/topmenubtnuv5.gif*/[/url]
}

.topnavi a:hover{
	color:#FFF;
	background:url([url]http://img179.imageshack.us/img179/3484/burrrrronom8.png[/url]) no-repeat 0 100%;
	text-decoration:none;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

body {

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

color:#5e5e5e;

overflow:visible;

background:#7C6F5C url([url]http://img68.imageshack.us/img68/4392/backkkkqs7.png);;[/url]

text-align:center;

margin:0;

}



a {
color:#67A400;
text-decoration:none;
}



a img {
border:none;
}


.wrap {position: relative;
width:950px;
text-align:left;
margin:0 auto;
padding:0;
}



#header {
overflow:visible;
height:226px;
background: transparent url([url]http://img126.imageshack.us/img126/2088/backdalatarenc0.png[/url]) no-repeat;
margin:0px 0px;

}



#header .mainlogo{

width:420px;

height:241px;

text-indent:-99999px;

float:left;

cursor:pointer;

background: transparent url([url]http://img178.imageshack.us/img178/1097/logosm6.png[/url]) no-repeat 0 0;

margin:-10px 0 0;
overflow:visible;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */



.blogdescription {

width:261px;

height:22px;

background:url([url]http://dftheme.googlepages.com/dedicated_text.jpg[/url]) no-repeat right bottom;

padding-left:31px;

padding-top:55px;

text-indent:-9999px;

display:block;

float:left;

}



.right {

width:230px;

float:right;

}



.left {
width:955px;
float:left;
display:block;
/*background:#1A1A1A url([url]http://dftheme.googlepages.com/main_tl.gif);*/[/url]
background:#1a1a1a;
background-repeat:no-repeat;
overflow:auto;
margin-top:-5px;
padding-left:10px;


}

I've been playing with the margin values for the .left section or the header,but it doesn't solve the problem entirely. The theme also modifies when i change my monitor's resolution. I would really appreciate someone helping me out. I attached the code in xml. Here is the address of the blog : http://freshgeneration.blogspot.com/ .
Thanks