Probleme affichage IE (position absolute, transparence, png)

Bonjour tout le monde,
Je n'arrive pas à comprendre un pb sous IE où le menu du haut + champs recherche ne s'affiche correctement qu'une fois sur 10 sous IE7 (meme pb avec IE6 bien que png remplacées par gif) alors que tout fonctionne normalement sous Firefox. Je suis entrain de modifier un theme de Wordpress pour progresser en css. Adresse du site (en construction) sur mon www.

Je cherche à utiliser des png et la transparence (position absolute), est-ce trop en demander à IE ou tout simplement une erreur de ma part ?? Mais mon pb principal est que le menu principal + champs recherche en haut du site s'affiche de manière erratique sur IE !!

Partie du code css utilisé :

/* top Blog-menu */
#blog-menu {
	position: absolute;
	top: 0px;
	left: 0px;	
	opacity:0.8; -moz-opacity : 0.8; filter : alpha(opacity=80);
}
#top-col {
	width: 770px;
	float: left;
	margin-top: 0px;
}
#navtop {
	background: url(images/contentlarge-top-bg.png) no-repeat left top;
	height: 26px;
}
#navtop ul{
	list-style: none;
	margin: 0px 0px 0px 25px;
	padding: 0px;
	font: bold 12px/100% Arial, Helvetica, sans-serif;
}
#navtop ul li{
	margin: 0px 1px 0px 0px;
	padding: 0px;
	float: left;
}
#navtop ul li a{
	padding: 5px 7px 6px 7px;
	text-decoration: none;
	color: #000000;
	display: block;
}
#navtop li a:visited{
	text-decoration: none;
	color: #000000;
}
#navtop li a:hover, #nav .current_page_item a{
	text-decoration: none;
	background: #000080 url(images/nav-item-hover.gif) repeat-x;
	color: #ffffff;
}
#lowtop {
	background: #ecebeb;
	padding: 10px 0px 0px 10px;
	font-size: 87%;
	color: #333333;
	text-align: center;
}
/*  Blog-menu  end*/

Feuille css complete à : -sur monwww/ wp-content/themes/entheme/style.css

Partie du code html :

<div id="blog-menu">
	<div id="top-col"> 
		<div id="navtop">
        <ul>
          <li class="page_item current_page_item"><a href="/entreprendre/" title="Home">Accueil</a></li>
		  <li class="page_item page-item-21"><a href="/entreprendre/?page_id=21" title="Contact">Contact</a></li>
<li class="page_item page-item-2"><a href="/entreprendre/?page_id=2" title="A propos">A propos</a></li>
<li class="page_item page-item-15"><a href="/entreprendre/?page_id=15" title="Sommaire">Sommaire</a></li>

<li class="page_item page-item-19"><a href="/entreprendre/?page_id=19" title="Galerie">Galerie</a></li>
<li class="page_item page-item-23"><a href="/entreprendre/?page_id=23" title="Lecture">Lecture</a></li>
<li class="page_item page-item-22"><a href="/entreprendre/?page_id=22" title="Annuaire">Annuaire</a></li>
        </ul>
		</div><!-- /navtop -->

				
		<div id="lowtop"><!-- /menu under -->
		</div>
		
	</div><!--/top-col -->

	
</div><!--/blog-menu-->

<form method="get" id="searchform" action="/entreprendre/">
<div><input type="text" value="Recherche" name="s" id="s" onfocus="if (this.value == 'Recherche') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Recherche';}" />
<input type="submit" id="searchsubmit" value="Go" />
</div>
</form>

Merci beaucoup pour tous vos conseils où idées qui pourraient me permettre de comprendre ce phénomène pour le moins bizarre ... enfin pour moi (niveau grande débutante) !
Modifié par Zazou (04 Mar 2008 - 22:10)

Bonjour

"PNG et transparence" et "position absolute" n'ont strictement aucun rapport entre eux. Les problèmes de position dans IE sont à corriger via des instructions CSS, et ceux de transparence PNG, spécifiques à IE6 et infra, par un script adapté, le tout inséré dans ta page dans des commentaires conditionnels. Tu trouveras tout ça dans les ressources : tuto + recherche.

Merci Arsene. En fait je me rends compte que ma question n'est pas assez claire !

Mon problème étant que le menu du haut plus le champs pour les recherches ne s'affiche pas la pluspart du temps sous IE7 alors que c'est OK sous Firefox.

J'ai de fait mélangé plusieures pbs (pour IE6 et versions anciennes IE j'utilise déjà un commentaire conditionnel et une feuille de style remplaçant les png par les gif correspondant), pour ce menu et champs de recherche j'utilise la position absolute + transparence (à ma connaissance la transparence n'est prise en compte par IE que si absolute ou alors hacks spéciaux )

Je n'arrive toujours pas à comprendre pourquoi le menu ne s'affiche qu'une fois sur 10 avec IE alors que c'est Ok sous FF ???

Pour expliquer ce que j'ai cherché à faire : j'ai utilisé les recommendations de ce tuto :

http://openweb.eu.org/articles/initiation_absolue/

et notamment en matière d'accessibilité (menu en bas dans le code, mais en haut sur la page grace à sa position absolue)

C'est tout OK sur Firefox mais pas sur IE, pourquoi ??
Modifié par Zazou (04 Mar 2008 - 21:54)