18100 sujets

Questions générales et questions de débutants

Onglets capricieux sur pc portable avec ie8

bjr
je suis en train de changer mon site commercial et j'ai un souci d'affichage avec les menus :
- écarts dans la jonction des onglets, créé avec 3 images
- défaut de positionnement des liens du menu

le souci vient avec IE, mais après vérification, que sur pc portable. Pc portable avec win7 et ie8, affichage en 1600x900, testé avec une autre résolution même défaut

aucun soucis avec
firefox, safari, opera et chrome sur pc portable et ainsi qu'avec ie8 sur un pc de bureau en xp et vérifié sur d'autre pc

je ne trouve pas ou est le souci, si vous avez une idée...n'hésitez pas
merci
Modifié par krant1 (11 Dec 2010 - 11:41)
modo merci de supprimer

les images ont été remise plus bas, en téléchargeant une image appelé sans-titre-1 et une autre sans-titre-2 la transformations du du nom en sans-titre à fait que cela n'a gardé que la dernière téléchargé. ce qui est étonnant c'est que en téléchargeant dans le post de dessous cela garde la première en mémoire sans l'écraser
Modifié par krant1 (09 Dec 2010 - 09:24)
Aurais-tu une image de ce que c'est censé donner quand il n'y a pas le problème ? Ca donne quoi avec IE6 et IE7 ?

Et nous allons difficilement pouvoir t'aider sans ton code, ou mieux, un exemple en ligne.
upload/31355-jhgyfg.jpg
l'image sous ie8 pc portable w7


upload/31355-image-2.jpg
image sous ie8, sur pc de bureau xp



idem portable
upload/31355-Sans-titre.jpg

sur pc de bureau
upload/31355-Sanstitr2.jpg
Sans voir le code c'est difficile, mais comme ici, est-ce que tu n'aurais pas des hacks pour IE ou un commentaire conditionnel ?
non rien de ce genre, et ca marche bien sous ie8 sur un pc de bureau. le problème c l'affichage sur pc portable

code d'un bouton
      <li class="onglets-l"><a class="onglets-a" href="../formulaire/contact.php"><span class="onglets-s">Contact / Devis</span></a></li>


css des onglets

/*
il y a des classes pour chaque balise, pour que les parametre ne soit applicable que pour les onglets et ne se mélange pas avec les autres feuilles css
*/


ul.onglets-u {
  float: right;
  margin-top: 16px;
  margin-right: 16px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding: 0px;
  list-style: none;
}

li.onglets-l {
  float: left;
  margin-left: 3px;
  }

a.onglets-a{
  float: left;
  text-decoration: none;
  letter-spacing: 1px;
  padding-left: 10px;
  background-image: url(../onglets/coin-gauche.png);
  background-repeat: no-repeat;
  background-position: 0% -250px;
}

span.onglets-s  {
  float: left;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 3px;
  padding-left: 0px;
  background-image: url(../onglets/coin-droit.png);
  background-repeat: no-repeat;
  background-position: 100% -250px;
  color: #ffffff;
  text-decoration:none;
  letter-spacing:1px
}

li#actif.onglets-l {
  float: left;
  text-decoration: none;
  letter-spacing: 1px;
  padding-left: 10px;
  background-image: url(../onglets/coin-gauche.png);
  background-repeat: no-repeat;
  background-position: 0% 0%;
}

li#actif.onglets-l span.onglets-s {
  float: left;
  padding-right: 10px;
  padding-top: 6px;
  padding-bottom: 3px;
  padding-left: 0px;
  background-image: url(../onglets/coin-droit.png);
  background-repeat: no-repeat;
  background-position: 100% 0%;
  color: #333333;
  text-decoration:none;
  letter-spacing:1px
}

/*
pour le survol des onglet
*/
a:hover.onglets-a{
  background-position: 0% -500px;
}
/*
idem au clavier
*/
a:focus.onglets-a {
  background-position: 0% -500px;
}

a:hover.onglets-a span.onglets-s  {
  background-position: 100% -500px;
}

a:focus.onglets-a span.onglets-s  {
  background-position: 100% -500px;
}


/*
idem fer a droite
*/


ul.onglets-ud {
  float: right;
  margin-top: 16px;
  margin-right: 16px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding: 0px;
  list-style: none;
}

li.onglets-ld {
  float: right;
  margin-left: 3px;
  }

a.onglets-ad{
  float: right;
  text-decoration: none;
  letter-spacing: 1px;
  padding-left: 10px;
  background-image: url(../onglets/coin-gauche.png);
  background-repeat: no-repeat;
  background-position: 0% -250px;
}

span.onglets-sd  {
  float: right;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 3px;
  padding-left: 0px;
  background-image: url(../onglets/coin-droit.png);
  background-repeat: no-repeat;
  background-position: 100% -250px;
  color: #ffffff;
  text-decoration:none;
  letter-spacing:1px
}

li#actif.onglets-ld {
  float: right;
  text-decoration: none;
  letter-spacing: 1px;
  padding-left: 10px;
  background-image: url(../onglets/coin-gauche.png);
  background-repeat: no-repeat;
  background-position: 0% 0%;
}

li#actif.onglets-l span.onglets-sd {
  float: right;
  padding-right: 10px;
  padding-top: 6px;
  padding-bottom: 3px;
  padding-left: 0px;
  background-image: url(../onglets/coin-droit.png);
  background-repeat: no-repeat;
  background-position: 100% 0%;
  color: #333333;
  text-decoration:none;
  letter-spacing:1px
}

/*
pour le survol des onglet
*/
a:hover.onglets-ad{
  background-position: 0% -500px;
}
/*
idem au clavier
*/
a:focus.onglets-ad {
  background-position: 0% -500px;
}

a:hover.onglets-ad span.onglets-sd  {
  background-position: 100% -500px;
}

a:focus.onglets-ad span.onglets-sd  {
  background-position: 100% -500px;
}



Le css pour les menus

/*
menu gris
*/

li.menu-l {
  float: left;
  height: 45px;
  margin-top:-15px;
  }

p.menu-p{
  float: left;
  text-decoration: none;
  letter-spacing: 1px;
  padding-left: 10px;
  background-image: url(../onglets/coin-gauche.png);
  background-repeat: no-repeat;
  background-position: 0% 0px;
}

span.menu-s  {
  width:140px;
  float: left;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 3px;
  padding-left: 0px;
  background-image: url(../onglets/coin-droit.png);
  background-repeat: no-repeat;
  background-position: 100% 0px;
  color: #000000;
  text-decoration:none;
  letter-spacing:1px
}

/*
menu bleu
*/

p.menu-pb{
  float: left;
  text-decoration: none;
  letter-spacing: 1px;
  padding-left: 10px;
  background-image: url(../onglets/coin-gauche-menu.jpg);
  background-repeat: no-repeat;
  background-position: 0% -500px;
}

span.menu-sb  {
  width:140px;
  float: left;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 3px;
  padding-left: 0px;
  background-image: url(../onglets/coin-droit-menu.jpg);
  background-repeat: no-repeat;
  background-position: 100% -500px;
  color: #000000;
  text-decoration:none;
  letter-spacing:1px
}
Sujet clos
Aller à