Version complète: sur le forum Webmaster Hub : Onglets "écartés" avec IE7. OK avec Firefox & Safari
Webmaster Hub > Informatique & Internet > Les Navigateurs
Circobaz
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,
Circobaz
J'ai trouvé smile.gif smile.gif

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,
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.