Espace et positionnement sous IE

Bonjour à tous!

Depuis 2 jours, j'essaie de régler 2 problèmes qui n'apparaissent que sous IE et je n'y arrive pas. Peut-être qu'un de vous connaît la réponse à mes questions.

Premièrement, l'adresse temporaire où j'ai mis le site est à : www.linart.qc.ca/domaines/studio1683.com/adma_site/

Si vous êtes sous IE7, vous verrez deux trucs :

1- un espace en haut et en bas de chaque image de triangle sous chacun des rectangles, sauf le dernier (?!). Je n'arrive pas à comprendre d'où vient cet espace.

2- lors du roll-over et après celui-ci (sur un des rectangles-menu), le border du cadre vient se placer par-dessus (?!).

Ceci n'arrive que sous IE7 (et p-e IE8).

Est-ce que quelqu'un sait d'où ça peut venir?


Merci beaucoup!!!
Isabelle



les lignes importantes du CSS :

#global {/* le problème 2 n'est pas solutionné lorsqu'on enlève le absolute..*/
	width: 860px;
	height: 620px;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	margin-top: -320px;
	left: 50%;
	margin-left: -430px;
}
#container {
	width: 860px;
	height: 620px;
	border: 4px solid #595959;
	background-color: #FFF;
}
#sidebar {
	width: 210px; 
	float: left;
	margin-top: 7px;
}
/*ceci est vrai pour TOUS les autres items du menu */
#menu_accueil {
	width: 198px;
	height: 40px;
	border: 3px solid #f57d2f;
	margin-left: -26px;
	background-color: white;
}

HTML

<div id="global">
    <div id="container">
        <div id="sidebar">
            <img src="images/logo.gif" alt="Logo de l'ADM.A" title="Logo de l'ADM.A" width="200px" height="100px" id="logo" />
            <div id="menu_accueil">
                <a href="#" title="" onmouseover="menu(this);" onmouseout="menuOut(this);" class="menu_liens">
                    <p class="menu_txt" id="menu_txt">ACCUEIL</p>
            	</a>            
            </div>            
            <img src="images/menu_accueil.png" alt="" title="" width="22px" height="12px" class="menu_img" border="none" />
            <div id="menu_adma">
                 <a href="#" title="" onmouseover="menu(this);" onmouseout="menuOut(this);" class="menu_liens">
                    <p class="menu_txt">DEVENIR ADM.A</p>
                 </a>            
            </div>
           	<img src="images/menu_adma.png" alt="" title="" width="21px" height="12px" class="menu_img" />
            <div id="menu_activites">
                <a href="#" title="" onmouseover="menu(this);" onmouseout="menuOut(this);" class="menu_liens">
                    <p class="menu_txt">ACTIVITÉS</p>
                </a>            
            </div>
            <img src="images/menu_activites.png" alt="" title="" width="21px" height="12px" class="menu_img" />
            <div id="menu_boutique">
                <a href="#" title=""onmouseover="menu(this);" onmouseout="menuOut(this);" class="menu_liens">
                    <p class="menu_txt">BOUTIQUE</p>
                </a>            
            </div>     
            <img src="images/menu_boutique.png" alt="" class="menu_img" />            
            <div id="menu_faq" >
                <a href="#" title="" onmouseover="menu(this);" onmouseout="menuOut(this);" class="menu_liens">
                    <p class="menu_txt">FAQ</p>
                </a>            
            </div>            
            <img src="images/menu_faq.png" alt="" title="" width="21px" height="12px" class="menu_img" />
            <div id="menu_nousjoindre" >
            	<a href="#" title="" onmouseover="menu(this);" onmouseout="menuOut(this);" class="menu_liens">
                	<p class="menu_txt">NOUS JOINDRE</p>
                </a>			
            </div>
            <img src="images/menu_nousjoindre.png" alt="" title="" width="21px" height="21px" class="menu_img" />   
            <div id="lstdiff">
            	<div id="lstdiff_img"><img src="images/lstdiff_logo.jpg" /></div>
            	<div id="lstdiff_txt"><a href="#">Abonnez-vous aux manchettes de l’ADM.A !</a></div>
            </div>    
        </div>       
        <div id="content"></div>
    </div>
    <div id="footer">&copy; 2009 <span class="bold">Ordre des administrateurs agréés du Québec</span>. Tous droits réservés</div>
</div>

Salut,

Tu devrais commencer par régler les petits problèmes de validation.

Parce qu'un "p" dans un "a" .. Bof.

C'est certain que c'est assez ordinaire. J'ai changé mon code et enlevé le JavaScript temporairement. Le site est valide W3C mais les problèmes persistent..

On a déjà un problème sur deux de résolu.

Pour le deuxième, un simple display:block sur les images devrait faire l'affaire.

wow coooooool!!!

merci beaucoup!!!