Gliding elements not working correctly in IE 8,9

Hello friends!

Modified Jovan WP theme (changed colors etc.) for my friends blog and the gliding parts (Kuka minä olen/Kalusto/Yhteystiedot) arent showing correctly in IE at all. Here´s the css for the thingy. Help me Digital Point, your my only hope! And the site is

http://www.sonjahagstromphotography.com/

/* The Header */

#top {
	height:95px;
	margin:auto;
	width:900px;
	position:relative;
	background:url(images/topheader.png);
	
	}
	
@font-face {
	font-family: punk;
	src: url(punksnd.ttf);
}


.blogname {
	width:600px;
	margin:15px 0 0 20px;
	text-align:left;
	float:left;
	font-family: punk; /* no .ttf */
	}
	
.blogname h1  {
	font-size:4.6em;
	padding:0px 0px;
	font-weight:normal;
	color:#fff;
	}
	
.blogname h1  a:link, .blogname h1  a:visited{ 
	color: #fff; 
	display:block;
	margin:5px 0 0 0px;
	}
	
.blogname h1  a:hover { 
	color: #eee; 
	}
	
#subtop{
	height:225px;
	background:url(images/bottomheader.jpg);
	padding-top:5px;
	overflow:hidden;
}

.subwid{
	height:225px;
	background:url(images/transbg.png);
	width:300px;
	float:left;
	margin:0px 0px ;
	position:relative;
	top:180px;
}

.subwid h4{
	text-align:center;
	color:#fff;
	font-size:16px;
	width:300px;
	border-bottom:1px solid #000;
	line-height:49px;
	cursor:pointer;
	text-transform:uppercase;
}
.ysub{
	background:url(images/ysubh.png) repeat-x;
}
.vsub{
	background:url(images/vsubh.png) repeat-x;
}
.gsub{
	background:url(images/gsubh.png) repeat-x;
}

.subwid p{
	padding:10px;
	color:#fff;
}
/* The Search */


#search {

	width:204px;
	padding:0px 0px ;
	height:30px;
	background:url(images/search.png);
	position:absolute;
	top:36px;
	right:15px;


}
#search form {
	margin: 0px 0px 0px 0px;
	padding: 0;
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search p {
	margin: 0;
	font-size: 85%;
}

#s {
	width:140px;
	margin:5px 0px 0px 10px;
	padding: 3px 5px;
	height:14px;
	font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;
	color:#fff;
	background:transparent;
	float:left;
	border:none;
	display:inline;
}
input#searchsubmit{
	float:right;
	display:inline;
	margin:7px 10px 0px 0px;
	height:20px;
	width:20px;
	background:url(images/searchsub.png);
	color:#fff;
	border:none;
}

#searchpage{
	background:#fff;
	border:1px solid #ccc;
	margin:10px 10px 0px 10px;
}

#sform{
	width:450px;
	border:none;
	padding:4px 5px;
}

#formsubmit{
	float:right;
	background:url(images/sfrm.png) repeat-x;
	border-left:1px solid #ccc!important;
	border:none;
	padding:3px 5px;
}

.scover{


}
.sbox{
	padding:10px 0px;
}
.sbox p{
	padding:5px 10px;
	color:#6f6f6f!important;
}
.shead{
	margin:25px 0px;

}
.shead p{
	margin-left:10px;
	margin-bottom:10px;
	color:#3E91CE;
}

h2.stitle{

	font-weight:normal;
	padding:0px 10px;
}
h2.stitle a{
	color:#3E91CE;

}

.searchmeta{
	margin-top:5px; 
	margin-left:10px;
	color:#DD0657;
}

.searchmeta a{
	color:#3E91CE;

}

Code (markup):

 

hi
ie-9 --> http://i51.tinypic.com/kb2j3q.png
The problem is in H1 title. U use cufon.js for make punk text style, but it seams that ie doesn't understand it. u can use png pic instead of text or finde problem in ur js, why cufon.js doesn't work.
Best solution is png pic of ur h1.

 

Yes, of course..that it..why didn´t I figure that out myself Thanks alot!