28172 sujets

CSS et mise en forme, CSS3

Pb onglet avec IE 8

Salut à tous Smiley smile

Je ne suis pas nouveau sur ce forum, mais impossible de me connecter avec mon ancien compte du coup j'en ai crée un nouveau.

Site: Melting-k.fr
Objet: 3 onglets du menu qui bug sous MSIE 8

J'ai fait un site pour un amis et il vient de me rapporter dernièrement que sous IE8 3 de ses onglets bug. Sous les autres navigateurs pas de soucis. Donc je me suis penché sur le pb mais pour le moment je sèche je dois vous avouer. Ceci dit je n'arrête pas mes recherches...

Si toutes fois un œil affuté serait me mettre sur la piste ou me guider dans la bonne voix, je lui serait reconnaissant.

Code XHTML :


<body>
<div id="page">
	<div id="header">
    	<h1>Melting-K</h1>
    </div> <!--fin du bloc header -->
    
    <div id="menu">
        	<ul>
            	<li><a class="index" href="index.php"><span>Accueil</span></a></li>
                <li><a class="agence" href="agence-communication-toulouse-cahors-castres.php"><span>Agence</span></a></li>
                <li><a class="studiographique" href="creation-logo-graphisme.php"><span>Studio graphique</span></a></li>
                <li><a class="imprimerie" href="imprimerie-toulouse-cahors-castres.php"><span>Imprimerie</span></a></li>
                <li><a class="web" href="creation-sites-internet-cahors-toulouse-castres.php"><span>Web</span></a></li>
                <li><a class="contact" href="contact.php"><span>Contact</span></a></li> 
      </ul>
    </div> <!--fin du bloc menu-->
[...]


Code CSS :


/* menu */

#menu {
margin: 55px 0 0 95px;
padding: 0;
position: relative;
z-index: 20;
height: 30px;
}

#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
height: 30px;
}

#menu ul li {
margin: 0 60px 1px 0;
padding: 0;
display: inline;
}

a.index {
margin: 0;
float: left;
background: url(images/bt_accueil.jpg) no-repeat;
width: 108px;
height: 30px;
}

a.index:hover {
background-position: left bottom;
margin-top: -6px;
position: relative;
}

a.index span {
position: absolute;
text-indent: -5000px;
top: -5000px;
left: -5000px;
}

a.agence {
margin: 0;
float: left;
background: url(images/bt_agence.jpg) no-repeat;
width: 108px;
height: 30px;
}

a.agence:hover {
background-position: left bottom;
margin-top: -6px;
position: relative;
}

a.agence span {
position: absolute;
text-indent: -5000px;
top: -5000px;
left: -5000px;
}


a.studiographique {
margin: 0;
float: left;
background: url(images/bt_studiographique.jpg) no-repeat;
width: 162px;
height: 30px;
}

a.studiographique:hover {
background-position: left bottom;
margin-top: -6px;
position: relative;
}

a.studiographique span {
position: absolute;
text-indent: -5000px;
top: -5000px;
left: -5000px;
}

a.imprimerie {
margin: 0;
float: left;
background: url(images/bt_imprimerie.jpg) no-repeat;
width: 108px;
height: 30px;
}

a.imprimerie:hover {
background-position: left bottom;
margin-top: -6px;
position: relative;
}

a.imprimerie span {
position: absolute;
text-indent: -5000px;
top: -5000px;
left: -5000px;
}

a.web {
margin: 0;
float: left;
background: url(images/bt_web.jpg) no-repeat;
width: 108px;
height: 30px;
}

a.web:hover {
background-position: left bottom;
margin-top: -6px;
position: relative;
}

a.web span {
position: absolute;
text-indent: -5000px;
top: -5000px;
left: -5000px;
}

a.contact {
margin: 0;
float: left;
background: url(images/bt_contact.jpg) no-repeat;
width: 108px;
height: 30px;
}

a.contact:hover {
background-position: left bottom;
margin-top: -6px;
position: relative;
}

a.contact span {
position: absolute;
text-indent: -5000px;
top: -5000px;
left: -5000px;
}


Merci de votre attention Smiley cligne
Salut,

eh bien puisque ce n'est pas ton premier message je ne te souhaite donc pas la bienvenue ! Smiley langue

Je ne pense pas que ça vienne de là mais ce serait mieux de commencer par les ereurs de validation.

J'aime beaucoup <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CHACHE"> Smiley lol
Modifié par Heyoan (08 Feb 2010 - 22:20)
Salut Heyoan,

Je pensais aussi que cela ne venait pas d'ici mais sait-on jamais, j'aurais pû passer à côté de quelque chose.

Concernant les meta tag c'est lui qui a voulu les faire. Donc les erreurs il les corrigera Smiley cligne

Merci pour ta réponse Smiley cligne
Sujet clos
Aller à