Page 1 sur 1

CSS Onglet

Posté : 04 juin 2014, 08:28
par kemepe
Bonjour à tous , j'ai un cas d'incompatibilité avec IE et chrome

Je vous montre en image le soucis :
Sans titre.png


Voici mon CSS spécial pour les onglets :
/*** onglets ***/
ul#onglet {
  margin:0px; padding:0px;
  font:normal normal 12px bookman old style;
}
#onglet li {
  margin:0px; padding:0px;
  width:113px;
  line-height:2em;
  display: inline; /* affichage en ligne */
  list-style:none; /* suppression des puces */ 
  text-align:center;
  border-top:0px solid #AAA; border-bottom:1px solid #AAA;
   border-left:0px solid #AAA; border-right:1px solid #AAA;
}
#onglet li a {
  height:2em;
  display:block; /* pour occuper toute la largeur */
  text-decoration:none; /* suppression du soulignement */ 
  background-color:khaki;
  color:black; 
}
#onglet li a:hover {
  background-color:black; 
  color:white;
}
li#ongleton a {
  background-color:white;
  color:red; 
}
Merci de votre aide

PS: Internet explorer à gauche et Chrome à droite pour la photo

Re: CSS Onglet

Posté : 04 juin 2014, 10:06
par Elie
Chelou ...
Essaye display: inline-block;

Re: CSS Onglet

Posté : 04 juin 2014, 10:38
par kemepe
C'est ce qu'on m'a dis de faire, j'ai essayer et sans résultat

Sa donne cela :
Sans titre.png

Re: CSS Onglet

Posté : 04 juin 2014, 10:50
par kemepe
J'ai du modifier la taille pour que sa revient comme sur IE
Cependant voici la difference :
Sans titre.png

Pourquoi y-a-t-il des espaces?

Merci

Re: CSS Onglet

Posté : 04 juin 2014, 10:53
par Elie
Tes </li><li> doivent être collés. Est-ce le cas ?

Re: CSS Onglet

Posté : 04 juin 2014, 11:04
par kemepe
<li><a href="documentation.php>">Documentation</a></li>
<li id="ongleton"><a href="#">Datasheet</a></li>
<li><a href="Schematique.php">Schématique</a></li>
<li><a href="Tests.php">Tests</a></li>
<li><a href="Reparation.php">Réparation</a></li>
Ils sont bel est bien collé

Re: CSS Onglet

Posté : 04 juin 2014, 11:06
par Elie
Non ils sont a la ligne ...

Re: CSS Onglet

Posté : 04 juin 2014, 11:11
par kemepe
J'avais mal compris désolé

Et sa marche nickel mais par contre sa fais pas très lisible mdr

Il y aurai pas un autre moyen ? sinon cette solution me suffit amplement

Merci encore de m'avoir aidé. :)