Prob block anec IE

Bonjour,

j'ai intégrer un affichage des onglet dans mon site et le probléme que tous fonctionne bien mais sous IE ne rien ne s'affiche les onglet son vide je pense que le prob vient de display:block;
voici mon code html:
<div id="bar">
<a href="#tab1">Objectifs </a>
<a href="#tab2">Programme</a>

</div>

<div id="container">
<div class="main">
<div id="tab1"><p style="margin-top: 10px;line-height: 15px">test1</p> </div>
<div id="tab2"><p style="margin-top: 10px;line-height: 20px">test2</p> </div>

</div>
</div>


code css:

.tabs{
list-style:none;
}
.tabs li{
display:inline;
}
.tabs li a{
color:black;
float:left;
display:block;
padding:4px 10px;
margin-left:-1px;
position:relative;
left:1px;
background:white;
text-decoration:none;
}
.tabs li a:hover{
background:#ccc;
}
.group:after{
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.box-wrap{
position:relative;
min-height:150px;
}
.tabbed-area div div{
background:white;
padding:20px;
min-height:100px;

/*top:-1px;*/
left:0;
width:550px;
}
.tabbed-area div div, .tabs li a{
border:1px solid #ccc;
}
#box-one:target, #box-two:target, #box-three:target{
z-index:1;
}
#box-four:target a[href="#box-four"]{
color:red;
}
#bar a{
padding:4px 6px;
background:#E0E9FE;
text-decoration:none;
font-weight:bold;
}
#bar a:hover{
color:#003366;
}
/* Content Layers */
#container{
background:#E0E9FE;
padding:10px;
}
div.main div{
display:none;
}
div.main div:target{
display:block;
}

ça fait 3 heurs que je cherche sans resultat merci de m'aider :)