28173 sujets

CSS et mise en forme, CSS3

[résolu]Un bug sous IE ou une erreur de ma part?

Smiley biggrin Bonjour à tous,

J'ai une question par rapport à un souci que j'ai avec IE.

Voilà je vous donne le code problématique.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title></title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <style type="text/css">
           
#sous_menu{ 

padding:0; 
width:  20%;
border : solid 1px #a3c0d5; 
border-top: none; 
}

#sous_menu li{
list-style-type:none; 
margin: 0; 
padding: 0;
border-top: 1px solid #a3c0d5; 
}

#sous_menu a{
padding-left:1.5em;   
text-decoration:none; 
color:#5d90b5; 
display:block;   
}

#sous_menu a:hover{
background-color:#d6e5f8; 
color:#294f79;
}	   
       </style>
   </head>
   <body>
      
     <ul id="sous_menu">
              <li>
                <a href="#">Accueil</a>
              </li>
              <li>
                <a href="#">blablabla</a>
              </li>
              <li>
                <a href="#">Photos</a>
              </li>
              <li>
                <a href="#">Livre d'or</a>
              </li>
              <li>
                <a href="#">News</a>
              </li>
            </ul>
		
</body></html>


En fait ce code ne marche pas bien sur IE. Si vous testez vous verrez ce que je veux dire par là. Par contre si dans l'id sous_menu j'enlève plutôt la bordure du bas. Et que dans sous_menu li je ne mets que les bordures du bas, et bien cela marche sous explorer!!!! Pourtant cela revient au même, c'est juste l'inverse!!!! Smiley eek Est-ce un bug D'IE ou est-ce une erreur dans mon code? Smiley biggol C'est quand même étrange!!!

Bye et merci de m'éclairer Smiley smile !!
Modifié par Seb1952 (01 May 2006 - 10:18)
Seb1952 a écrit :
En fait ce code ne marche pas bien sur IE. Si vous testez vous verrez ce que je veux dire par là.

Bonjour Seb1952, bienvenue sur ce forum !

Par contre, ça serait gentil de décrire ton problème :
– quel est le rendu souhaité ;
– quel est le rendu obtenu ;
– qu'est-ce qui semble poser problème (si tu en as une idée) ;
– quelles solutions as-tu déjà tenté (si tu as essayé quelque chose).

Là, tu as l'air d'avoir zappé les deux premières étapes ! Smiley sweatdrop

C'est bien gentil de donner ton code, c'est d'ailleurs fortement recommandé dans les règles du forum. Mais sans description du problème, qui va prendre la peine de créer une page, y copier-coller ton code, charger la page avec deux ou trois navigateurs pour tester tout ça… si on ne sait même pas ce à quoi il faut faire attention ?

Merci de préciser, tu verras, on obtient de meilleures réponses avec une information claire. Smiley cligne


Enfin, à titre personnel, j'ai une nette préférence pour les exemples déjà en ligne. Ça permet de tester plus rapidement, et ne gène pas l'accès au code (surtout avec un navigateur comme Firefox et l'extension webdeveloper). Cf ma signature Smiley lol
Salut, Smiley biggrin

Merci d'avoir répondu. Je viens de relire mon post...C'est clair que j'ai été un peu vite.

Donc j'explique:

Voilà j'ai un menu dont les liens se colorise au survol. J'utilise display: block pour prendre tout l'espace de la boite li qui les contient.

Comme vous pouvez voir dans le code je mets des bordures tout autour de ul sauf sur la bordure du haut. Pour les listes par contre je ne mets que la bordure du haut. a ce moment j'obiens ce que je veux...du moins dans Konqueror ou firefox.

Ce que je veux c'est juste des liens avec un background au survol qui prend toutes la boite qui les contient.

Mais IE affiche mal. Pour deux raisons:
1. Au survol, l'effet hover ne marche pas bien: il n'y a qu'une partie de la boîte qui se colorise.
2. On croirait que j'ai appliqué un padding à l'élément li ou une marge extérieure aux liens. (je ne sais pas trop)


Par contre, c'est ce qui est bizzare: si je décide d'inverser ma façon d'afficher les bordures: C'est à dire que je mets une bordure autour de ul sauf en bas et que je mets une bordure a li uniquement en bas: Cela marche: Pourtant c'est exactement la même chose à l'envers!!!

Donc si on change juste 



#sous_menu{ 

padding:0; 
width:  20%;
border : solid 1px #a3c0d5; 
border-bottom: none; /* bas au lieu du haut*/

}



#sous_menu li{

list-style-type:none; 
margin:0; 
padding: 0;
border-bottom: 1px solid #a3c0d5; /* bas au lieu du haut */

}


Et bien IE l'affiche correctement

J'ai édité car j'ai écrit un ânerie par rapport a openweb juste avant!!


Je voudrais ajouter une chose: si je pouvais le mettre en ligne je le mettrais, et en fait si je n'ai pas expliqué vraiment le pb c'est parce que pour une fois je trouvais le test plus explicite!!! Désolé

Mais voilà un lien sur open web où j'ai vu le même type de menu:
http://openweb.eu.org/dom/[/url]

C'est le menu en haut a gauche (en bleu)

Car comme vous pouvez le remarquer j'ai pas été très clair dans mon explication encore une fois!!!. Smiley eek Merci de m'aider... Smiley biggrin
Modifié par Seb1952 (29 Apr 2006 - 23:21)
Modérateur
bonjour,

c'est un bug d'IE sur la balise <a>, la partie basse de la balise ne s'affiche pas completement, generalement on s'en aperçoit a cause de la bordure qui n'apparait pas.
Il faut alors jouer sur le line-height pour la rendre visible, la valeur est toujours superieurs a la taille de la police.
Essai entre 1.3em et 1.7em, c'est generalement entre ces 2 valeurs que l'on retrouve les bordures du bas dans IE.

Ce probleme semble aussi apparaitre sur ul ? d'une autre façon ? essai alors de placé un line-height a <ul> ! etrange.

Autre piste , une fusion de marge mal interpreté avec un autre element , le dernier li ou le prochain element dans le flux. alors un petit padding-bottom de 3 a 5 px si <li> est en cause appliquer a <ul>, ou bien un padding-top au prochain element (arrive parfois avec des image en float dans l'element suivant) .

... pas d'autre idée Smiley smile

++
Modifié par gcyrillus (29 Apr 2006 - 23:37)
Bien entendu, je suppose que pour prévenir les problèmes liés aux styles par défaut des navigateurs, tu as appliqué sur ton ul un petit :
ul#sous_menu {margin: 0; padding: 0;}

ou quelque chose de similaire ?

Il est tard donc j'ai lu en diagonale, il faudra que j'y revienne.
Bonjour à vous,


Pour te répondre mpop

ul#sous_menu{padding: 0; margin: 0:}


Moi j'ai fait cela:

#sous_menu {padding:0};


Cela revient au même puisque mon identifiant est dans la balise ul. J'utilise pas de div en trop (cela me file des boutons Smiley langue )

Donc je n'ai pas mis margin: 0; comme tu peux le voir...j'ai testé vite fait même si je ne voyais ce que la marge extérieure de ul pouvait faire dans le problème...Dommage cela ne marche pas!!!


Vous me direz puisque inverser la mise en place des bordures est suffisante pour régler le problème pourquoi sans faire!!! Enfin, c'était juste pour comprendre ce bug...En tous cas sur openweb le menu que j'ai mis en lien utilise "la technique qui marche" (cad: ul: bordure du haut de droite et de gauche et li: bordure haut uniquement)

Salut, gcyrillus

line-height (désolé de pas dire les choses dans l'ordre Smiley cligne ) j'ai essayé cela marche mais cela modifie un peu l'affichage, la solution que j'avais trouvé c'était de mettre height 100% a la balise a. Ce qui joue sur le même principe...

Donc le problème est résolu...En fait, on pourrait se demander pourquoi j'ai posté puisque j'avais bien dans l'idée que c'était un bug...et en plus j'avais trouvé le moyen de le régler... Smiley eek


Enfin, merci de vos réponses, au fait quelqu'un sait si ce bug se règle avec line-height ou height dans ie 5.5?

Bye. Sympa ce forum sur d'autres forums on me répond toujours tout de suite et à la fin je suis pas plus au courant...Là, cela a mis du temps (il faut dire que j'étais pas clair) mais au moins plus de pb...


A + les alsa...ciens (euh !!!)
Smiley langue
Modifié par Seb1952 (30 Apr 2006 - 07:46)
Seb1952 a écrit :
Bye. Sympa ce forum sur d'autres forums on me répond toujours tout de suite et à la fin je suis pas plus au courant...Là, cela a mis du temps (il faut dire que j'étais pas clair) mais au moins plus de pb...

Hé hé reviens nous voir si besoin Smiley cligne

Au passage, le coup du margin: 0; sur ul, c'est lié au fait que pour créer le retrait à gauche des listes, IE utilise un margin: 2.5em; sur ul, et Firefox un padding: 2.5em. Si on oublie de spécifier les deux, on peut avoir des surprises.
Ok merci.

Je le savais pour le truc du padding et marge mais je voulais dire que je voyais pas le rapport avec mon b...Euh voilà...Salut mpop (sympa ton avatar!!!)
Sujet clos
Aller à