Un hover qui marche de partout sauf sous IE6 ...

Bonjour,

Je suis en train de créer un système d'onglet avec un plugin jquery "simple tabs". Après l'avoir mis en place e t stylé, je me suis rendu compte que mon hover dans mes titres de sélection d'onglet ne fonctionnent pas sous IE6, alors que c'est ok sous tous les autres navigateurs...

Pouvez vous m'aider SVP ???

Voici mon code html:

            <div id="onglets">
                <div class="onglets-nav">
                    <ul>
                        <li id="onglets-nav-1"><a><span>voyages altitude</span></a></li>
                        <li id="onglets-nav-2"><a><span>trek et randonn&eacute;es</span></a></li>
                        <li id="onglets-nav-3"><a><span>voyages actifs et th&eacute;matiques</span></a></li>
                        <li id="onglets-nav-4"><a><span>voyages d&eacute;couverte</span></a></li>
                    </ul>
                </div>
                <div id="onglets-content-1" class="onglets-content">
                	<img src="images/clubaventure.png" class="img-gauche" width="174px" height="123px"/>
                    <p>Choisir le trek ou la randonn&eacute;e pour voyager, c'est sans aucun doute vouloir se fondre dans la nature en pr&eacute;servant l'harmonie entre l'homme et son environnement. 
C'est aussi sentir, entendre, percevoir, gouter l'authenticit&eacute; d'un lieu pour mieux le comprendre. C'est encore se donner l'opportunit&eacute; d'acc&eacute;der &agrave; des r&eacute;gions pr&eacute;serv&eacute;es seulement accessible par la marche.</p>
                </div>
                <div id="onglets-content-2" class="onglets-content">
                	<p>Dein Syria per speciosam interpatet diffusa planitiem. hanc nobilitat Antiochia, mundo cognita civitas, cui non certaverit alia advecticiis ita adfluere copiis et internis, et Laodicia et Apamia itidemque Seleucia iam inde a primis auspiciis florentissimae.</p>
                </div>
                <div id="onglets-content-3" class="onglets-content">
                	<p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.</p>
                </div>
                <div id="onglets-content-4" class="onglets-content">
                	<p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.</p>
                </div>
            </div>

Et voici mon css

.onglets-nav {
	height:25px;
	font-variant:small-caps;
	font-size:13px;
	_font-size:12px;
}

.onglets-nav ul{
    padding:0;
	margin:0;
    list-style:none;
	overflow:hidden;
}
.onglets-nav li{
	display:inline;
    padding:0;
	margin:0 0 0 20px;
	font-weight:bold;
	/*IE6 specific style*/
	_margin:0px
}

.onglets-nav a {
	margin:0;
	padding:0;
	text-decoration:none;
	display:inline-block;
}

.onglets-nav a:hover {
	_color:#000;
	_background:url(../images/fleche-bas.png) no-repeat center 35px;
	_height:50px;
}

.onglets-nav a span {
	display:inline-block;
	height:50px;
	width:102px;
	text-align:center;
	padding:0px;
	text-decoration:none;
	cursor:pointer;

	color:#7A7D67;
	/*IE6 specific styles*/
	_width:115px;
}

.onglets-nav a:hover span {
	color:#000;
	background:url(../images/fleche-bas.png) no-repeat center 35px;
	height:50px;
}

.onglets-content{
	height:90px;
	padding:30px;
	color: #000;
	margin:7px 0 0 0;
	_margin:0;
}

Merci pour votre aide !

Romain

Bonjour,

inline-block n'existe pas pour ie6, ton span ne fais donc pas 50 px de haut et ton image en background n'est donc pas visible.

De plus ici le 'block' suffirait

Peux-tu préciser exactement par ça ne fonctionne pas sur ie6 ?

Un conseil, évite les underscores dans ta css cela te complique les choses.
Modifié par masseuro (20 Apr 2009 - 12:04)

Bonjour,

Merci pour ta réponse rapide.

En fait, je dois t'avouer que pour éviter de me prendre la tête, j'ai pris un autre plugin a mon sens beaucoup plus simple à styler, le plugin SimpleTabs v1.2 par Komrade, qui a comme avantage en plus de reconnaitre l'onglet actif...

Pour les underscore devant certains sélecteurs dans mon code, c'est ma manière de préciser un style spécifique à IE6 ...

D'ailleurs, quelle est la meilleure solution ? Le underscore devant le sélecteur ou le commentaire conditionnel appelant une feuille css spécifique ?

Merci

Romain