Aller au contenu

Onglets "écartés" avec IE7. OK avec Firefox & Safari


Sujets conseillés

Posté

Bonjour,

Les onglets de ma page "s'écartent" sur IE7, alors qu'ils ne posent pas de problêmes sur Firefox ou Safari.

Si qqn pouvait m'indiquer mon erreur, j'en serais très reconnaissante.

Voilà une des pages en question :

http://www.kalessan.com/KohSamui.html

Les codes de la page CSS correspondant sont :

#tabs {float:left; line-height:normal; border-bottom:#333333 2px ridge; margin-bottom:10px; font-size:13px;}

#tabs ul { margin:0; padding:10px 0 0 0; list-style:none;}

#tabs li { width: auto; float:left; margin:0; padding:0 0 0 7px; position:relative; white-space:pre;

background:url(../../SAMUI/0-Images/Images-Annexe/Left.jpg) no-repeat left 0px;}

#tabs a, #tabs strong { float:left; display:block; padding:4px 50px 4px 10px; text-decoration:none; color:#FFF; font-weight:bold;

/* width:.1em; */

background:url(../../SAMUI/0-Images/Images-Annexe/Onglets.png) no-repeat right 0px;}

#tabs > ul a, #tabs > ul strong {width:auto;}

#tabs a:hover {color:#FFF; text-decoration:underline;}

#tabs #current {background-position: left -100px; border-width:0; color:#fff; z-index: 100;}

#tabs #current strong {background-position: right -100px; padding-bottom:3px; color:#fff; font-size:14px;}

#tabs #currentlast {background-position: left -200px; border-width:0; color:#fff; z-index: 100;}

#tabs #currentlast strong {background-position: right -200px; padding-bottom:3px; color:#fff; font-size:14px;}

#tabs ul li { position: relative;}

#tabs ul li.tab0 {z-index: 20; left: 0;}

#tabs ul li.tab1 {z-index: 19; left: -8px;}

#tabs ul li.tab2 {z-index: 18; left: -16px;}

Les codes de la page web :

<div id="Contour-ONGLETS">

<div id="tabs">

<ul>

<li class="tab0"><a href="SAMUI/Property/Camellia-Pictures.html">Pictures</a></li>

<li id="current" class="tab1"><strong>Plans</strong></li>

<li class="tab2"><a href="SAMUI/Property/Camellia-Location.html">Location</a></li>

</ul>

</div>

</div>

Merci d'avance pour votre aide,

Circobaz,

Posté

J'ai trouvé :) :)

C'était le "white-space:pre;" qui faisait clocher IE7...

Il me semblait que "white-space:pre;" était pour qu'un lien en deux mots ne soit pas coupé en deux. Y'a t'il donc autre chose dans ce code?

Circobaz,

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...