28172 sujets

CSS et mise en forme, CSS3

Problème comportement code CSS avec IE pour un menu <li>

Bonsoir.
Voilà je me prends un peu la tête sur un bug que me fait IE 8.0, je ne sais pas si il me le fait sur IE 7.0 n'ayant plus le navigateur sur mon pc. Mais sur firefox ca marche nikel.
J'ai un menu avec le comportement suivant :


<div id="menu-fr">
		<ul>
		<li><a title="Lien 1" href="#">Lien</a></li>
		<li><a title="Lien 1" href="#">Lien</a></li>
		<li><a title="Lien 1" href="#">Lien</a></li>
		<li><a title="Lien 1" href="#">Lien</a></li>
		<li><a title="Lien 1" href="#">Lien</a></li>
		<li><a title="Lien 1" href="#">Lien</a></li>
		</ul>
</div>


Et ma partie CSS:


#menu-fr ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

#menu-fr li {
	display: inline;
}

#menu-fr li a {
  	text-decoration: none;
 	color: #E8EDEE;
  	font-size: 14px;
  	font-weight: bold;
  	font-variant: small-caps;
}

#menu-fr li a:hover, #menu-fr li a:focus, #menu-fr li a:active { 
	border-bottom: 8px ;
	border-bottom-style: solid ;
	border-bottom-color: #DCE4E7 ;
    }


Sur Firefox, j'ai bien la barre qui se place en dessous des titres du menu lorsque je passe ma souris dessus. Mais sur IE 8.0, rien pas de barre quand je passe ma souris.

Si je rajoute cette ligne de code : "background: #033 ;" ce qui donne ceci:


#menu-fr li a:hover, #menu-fr li a:focus, #menu-fr li a:active { 
	background: #033 ;
        border-bottom: 8px ;
	border-bottom-style: solid ;
	border-bottom-color: #DCE4E7 ;
    }


Surpise! Ca marche bien sur firefox et sur IE également. Mais du coup j'ai un background à mes titres du menu. j'ai pensé évidemment à mettre la même couleur mon background qu'à mon fond, mais c'est plus une méthode gruge qu'autre chose. J'aimerais bien comprendre pourquoi le code ne se comporte pas pareil sur IE et sur Firefox.

Si vous avez des idées, je suis preneur. Merci.
Modifié par PhilouMinety (19 Jul 2009 - 22:29)
Bonsoir PhilouMinety,

j'ai testé ton code XHTML et CSS sous Firefox 3.5 et Internet Explore 8.0 et tout se passe correctement chez moi.

Quand je passe le curseur de ma souris sur les liens sous IE8, j'ai bien la barre de soulignement qui apparaît.

Néanmoins, j'ai testé avec Internet Explorer 7 Standalone et, quand on passe le curseur de sa souris sur un lien, la barre de soulignement apparaît mais elle est très fine.
Bonsoir jQz. Merci pour ta réponse.

Ah bon ? Je comprends plus rien alors Smiley lol
Donc dès mon premier code, tu as bien la barre de soulignement ? Etrange que chez moi ca plante...
Est-ce que le fait que mon <div id="menu-fr"> soit incorporé dans un autre <div> peut être une raison du plantage ?
Modifié par PhilouMinety (19 Jul 2009 - 22:49)
De rien Smiley langue .

Montre moi ton code avec ton <div id="menu-fr"> incorporé dans un autre div s'il te plaît.
Ok le voici.

<div id="header-global-fr">
	<div id="header-menu-fr">
		<a href="#" id="lien-ban-fr"><h2>www</h2></a>	
		<div id="menu-fr">
		<ul>
		<li><a title="Lien 1" href="#">Lien</a></li>
		<li><a title="Lien 1" href="#">Lien</a></li>
		<li><a title="Lien 1" href="#">Lien</a></li>
		<li><a title="Lien 1" href="#">Lien</a></li>
		<li><a title="Lien 1" href="#">Lien</a></li>
		<li><a title="Lien 1" href="#">Lien</a></li>
		</ul>
		</div>
	</div>
	<div id="header-menu2-fr">
		<div id="header-fr-skin">
		<a href="#">Skinner</a>
		</div>
	  <div id="header-fr-flag">
	  <a href="#"><img src="styles/style_v5/images_site/fr.gif" alt="Francais" width="16" height="11" border="0" /></a>
	  <a href="#"><img src="styles/style_v5/images_site/uk.gif" alt="English" width="16" height="11" border="0" /></a>
	  </div>		
	</div>
</div>


Je t'avouerais que j'ai pas testé le premier code que je t'avais donné tout seul. Merci de ton aide en tout cas.
J'ai testé avec le deuxième code et tout marche parfaitement sous Firefox 3.5, IE7 Standalone et IE8.

Néanmoins, ton code n'étais pas valide mais je te l'ai corrigé et il est maintenant valide.

Voilà ton code valide sémantiquement :


<!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>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
   </head>
   <body>
   
		<div id="header-global-fr"> 
			<div id="header-menu-fr"> 
				<h2><a href="#" id="lien-ban-fr">www</a></h2>
					<div id="menu-fr"> 
						<ul> 
							<li><a title="Lien 1" href="#">Lien</a></li> 
							<li><a title="Lien 1" href="#">Lien</a></li> 
							<li><a title="Lien 1" href="#">Lien</a></li> 
							<li><a title="Lien 1" href="#">Lien</a></li> 
							<li><a title="Lien 1" href="#">Lien</a></li> 
							<li><a title="Lien 1" href="#">Lien</a></li> 
						</ul> 
					</div> 
			</div> 
			<div id="header-menu2-fr"> 
				<div id="header-fr-skin"> 
					<a href="#">Skinner</a> 
				</div> 
				<div id="header-fr-flag"> 
					<a href="#"><img src="styles/style_v5/images_site/fr.gif" alt="Francais" width="16" height="11"  /></a> 
					<a href="#"><img src="styles/style_v5/images_site/uk.gif" alt="English" width="16" height="11" /></a> 
				</div>         
			</div> 
		</div> 
   
   </body>
</html>


Les erreurs que tu avais commissent :


<a href="#" id="lien-ban-fr"><h2>www</h2></a>


Il ne faut jamais insérer des titres dans des liens mais des liens dans les titres, ce qui devient :


<h2><a href="#" id="lien-ban-fr">www</a></h2>




<a href="#"><img src="styles/style_v5/images_site/fr.gif" alt="Francais" width="16" height="11" border="0" /></a> 
      <a href="#"><img src="styles/style_v5/images_site/uk.gif" alt="English" width="16" height="11" border="0" /></a>


Comme l'a dit le validateur du W3C, l'attribut border existe mais pas pour cet élément.

Ce qui devient donc :


<a href="#"><img src="styles/style_v5/images_site/fr.gif" alt="Francais" width="16" height="11"  /></a> 
					<a href="#"><img src="styles/style_v5/images_site/uk.gif" alt="English" width="16" height="11" /></a>


Sans l'attribut border.

Mais alors, comment dois-je faire pour retirer les bordures autour de mes images ?

Rien de plu simple dans ta feuille de style CSS rajoute cette ligne :


a img {
	border: none;
}


Voilà, en espérant t'avoir aidé Smiley cligne .
Modifié par jQz (19 Jul 2009 - 23:20)
Ok merci pour les petites corrections! C'est sympa.
Bon ben si ca marche avec toi, va falloir que je comprennes pourquoi ca marche pas à mon niveau Smiley ohwell . Je vais tout reprendre je crois, c'est le mieux.

Par contre je viens de voir que tout mon css plante sur IE6 Smiley lol
Ya encore du boulot hé hé.

Bon je vais revoir tout ça alors. merci de ton aide. Je vais faire les tests et je te tiens au courant.
a écrit :
Ok merci pour les petites corrections! C'est sympa.


De rien Smiley cligne .

a écrit :
Bon ben si ca marche avec toi, va falloir que je comprennes pourquoi ca marche pas à mon niveau Smiley ohwell


Je ne sais pas du tout si ce que je vais dire est la cause de ton problème ou pas, mais peut-être as-tu mal installé Internet Explore 8 ?

a écrit :
Par contre je viens de voir que tout mon css plante sur IE6 Smiley lol


Moi aussi, il n'y a pas si longtemps j'ai revue mon CSS à l'aide des commentaires conditionnels afin d'afficher correctement mon site sous IE6.

Il faut le dire, Internet Explorer et le respect des standards du web ce n'est pas encore ça.
Bonsoir.
Et salut jQz si tu me lis toujours Smiley cligne

Bon j'ai testé la partie menu et soulignement toute seule dans une feuille. Et là tout marche. Je dois avoir commis une erreur dans mon code entier. Le code tourne correctement sur firefox et sur IE 8.0. Sur IE 7 et 6, il tourne également mais la barre n'est plus d'un pixel au lieu de 7px.

Je vais pousser ma recherche sur le code entier. Je marquerais résolu dès que ca sera ok à mon niveau. Merci !
bonsoir,

si tu navigue avec IE8 , il t'est possible de voir ta page comme dans IE7.

LA touche f12 , te permet d'afficher des outils de développement. tu as plusieurs menu dont deux : mode navigateur et mode document .
Ceux ci te permettent de basculer du mode d'affichage IE8 a IE7 , en mode standard ou quirk. (+ voir plus bas)


Au chargement de ta page , le mode aproprié est affiché ... Une page mal faite passe d'elle même en mode quirk par exemple.

Passes ta page au "validateur" si elle s'affiche d'emblée en mode quirk. Une fois corrigée , il est temps alors de faire les correctifs CSS , si besoins. Smiley smile (autre cas , la correction du code est conseillé Smiley smile )

Plus bas , c'est ici Smiley smile
- Pas besoin donc de IE7 en standalone ,
- pour IE6 voir du coté de http://www.xenocode.com/Browsers/ , lance IE6 avant ton IE8 puis ne t'étonnes pas de son aspect IE/7-8 , le moteur de rendu est bien celui de IE6 , il réagit aussi très bien au commentaire conditionnels.

GC
Bonsoir. Merci pour ta réponse gc-nomade, j'avais justement pris l'initiative avant de lire ton post de passer par le site que tu m'as donné pour tester tout ça. Merci pour les infos.

Bon j'ai fait quelques tests assez concluants ce soir. J'ai d'abord isolé la partie de mon code menu afin d'être sûr qu'il marche bien tout seul. Après des lectures à droite et à gauche et notamment ici sur le forum j'ai pu voir que le fait de ne rien avoir sur IE7 ou IE6 pouvait venir du fait que je n'avais pas de balise {zoom:1;}. J'ai donc testé avec et ca marche sur tous les navigateurs. Mais voilà que ca me créé maintenant un bug assez étrange Smiley confus

Voyez par vous même.

Comportement du menu sur IE7.

upload/3811-testmenu.jpg

Comportement du menu sur IE8.

upload/3811-testmenu1.jpg

Quand je passe par dessus mon menu, tout reste bien en place sur firefox et sur IE8. Alors que sur IE 7 et IE6, j'ai un espace de décalage vers le bas de tous les autres titres.
Bref ^^

Voici mon code:


<div id="menu-fr"> 
<ul> 
<li><a title="Lien 1" href="#">Lien</a></li> 
<li><a title="Lien 1" href="#">Lien</a></li> 
<li><a title="Lien 1" href="#">Lien</a></li> 
<li><a title="Lien 1" href="#">Lien</a></li> 
<li><a title="Lien 1" href="#">Lien</a></li> 
<li><a title="Lien 1" href="#">Lien</a></li> 
</ul> 
</div> 




html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body,td,th {
	color:#000000;
	font-family: arial,helvetica,sans-serif;
	font-size: 11px;
	background-color:#EAECEA;
}



#menu-fr ul { 
    list-style: none;
    padding: 0px;
    margin: 0px;
} 
 
#menu-fr ul li { 
    display: inline;
} 
 
#menu-fr li a { 
      text-decoration: none;
	  color: #000000;
      font-size: 14px;
      font-weight: bold;
      font-variant: small-caps;
} 
 
#menu-fr li a:hover, #menu-fr li a:focus, #menu-fr li a:active {
	zoom: 1;
	border-bottom: 8px solid #A1B03B;
}


Merci d'avance.

PhilouMinety
Bonsoir PhilouMinety

a écrit :
Bonsoir.
Et salut jQz si tu me lis toujours Smiley cligne


Eh oui, je te lis toujours Smiley langue .

a écrit :
Quand je passe par dessus mon menu, tout reste bien en place sur firefox et sur IE8. Alors que sur IE 7 et IE6, j'ai un espace de décalage vers le bas de tous les autres titres.
Bref ^^


La cause de ce problème est l'insertion de la propriété zoom et de sa valeur que tu as mise à 1.
De plus, cette propriété n'est pas valide aux yeux du W3C.

Donc, j'ai repris ton code et j'ai juste supprimé la propriété zoom, j'ai fais le test sous IE6, IE7, IE8 et Firefox, tout ce passe comme il se faut chez moi, la taille du soulignement ne varie plus et il n'y a plus le soulèvement du lien quand on passe le curseur dessus.
Modifié par jQz (24 Jul 2009 - 21:54)
Bonsoir jQz.
En fait j'ai utilisé le zoom car je suis tombé sur cette page en fouillant le forum : http://forum.alsacreations.com/topic-4-42139-1-Probleme-border-bottom-IE7.html

Je trouvais que ça se rapprochait de mon problème.

Bon j'ai enlevé la propriété zoom. Tout marche sauf sur IE 7 où je n'ai aucun soulignement, rien du tout. Je commence à devenir fou pour un truc aussi simple qu'un menu. Et je suis loin encore d'avoir fait toute ma page ^^
Mais comment ca marche chez toi et pas chez moi, ça je comprends pas...


Edit : Bon il semble que j'ai trouvé une solution en me balladant sur internet. J'ai rajouté le code suivant dans mon css, et tout marche sur IE 6,7 et 8 ainsi que sur Firefox.


#menu-fr ul li a {
	display: inline-block;
	vertical-align: top;
}


Si tu peux me dire si c'est ok chez toi aussi, ou quelqu'un d'autre. Et si l'ajout de ce code est dans les respects des standards ou non.

Je vais faire un test de mon côté en incluant mon menu dans ma page entière maintenant, et voir si tout ça tourne correctement.

Merci.
Modifié par PhilouMinety (24 Jul 2009 - 22:29)
En rajoutant ton code et en enlevant la propriété zoom, ça marche parfaitement sur IE6, IE7, IE8 et Firefox, néanmoins, quand on passe le curseur de sa souris sur un des liens, cela pousse vers le bas le mot skinner ainsi que les deux petites images.

Eh oui, ton code CSS est valide Smiley cligne .

Tu peux vérifier la validité de ton code XHTML et CSS en te servant des validateurs du W3C.

- Validateur W3C pour le HTML, XHTML
- Validateur W3C pour le CSS.
Modifié par jQz (24 Jul 2009 - 22:41)
Salut,

jQz a écrit :
Voilà ton code valide sémantiquement
Le fait qu'un code passe la validation ne signifie pas qu'il soit sémantique. En l'occurrence c'est anormal de commencer par un titre de niveau 2 et non pas par un titre de niveau 1.

jQz a écrit :
l'attribut border existe mais pas pour cet élément.
Pas tout à fait : le fait d'être autorisé ou non à utiliser des attributs et des éléments de présentation ne dépend que du doctype utilisé (même si c'est toujours une bonne habitude de séparer le contenu (html) et la présentation (css).


@PhilouMinety > je n'ai pas IE8 sous la main mais puisque tu veux affecter un border-bottom de 8px ce serait plus logique de prévoir la place nécessaire dès le début :
#menu-fr ul {
    padding: 0 0 8px 0;
}
Salut.

J'ai bien avancé sur mon menu. Je n'étais pas revenu ici trop vite car je voulais intégrer plusieurs éléments dans ma page afin que tout soit bien pris en compte. Et ca y'est le menu marche nikel. Le border-bottom est bien respecté sur Firefox, IE8, IE7 et IE6 également.

Par contre j'ai encore un léger souci Smiley ohwell
Lorsque j'intégre un de mes scripts php dans la page (exemple mes news), cela provoque un comportement bizarre du border-bottom mais uniquement et seulement sur IE8. Le border-bottom marche bien mais se trouve réduit, au lieu de 7px il va faire 2-3 pixels seulement. j'avoue que ca me dépasse un peu ce genre de bizarreries...

voici le code CSS que j'utilise pour mon menu :


#header-fr ul#header-menu li {
	display: inline;
	padding: 3px;
}

#header-fr ul#header-menu li a {
	text-decoration: none;
	color : #E8EDEE;
	font-size: 14px;
  	font-weight: bold;
  	font-variant: small-caps;
}

#header-fr ul#header-menu li a:hover {
	border-bottom: 7px solid #526D74;
}

#header-fr ul#header-menu li a:focus {
	border-bottom: 7px solid #526D74;
}

#header-fr ul#header-menu li a:active {
	border-bottom: 7px solid #526D74;
}


Si vous avez une idée je suis preneur. Mais c'est vraiment stupide qu'IE8 ne fasse pas juste comme les autres et même comme ses prédécesseurs.

Merci.


EDIT 19h34

Ah bah ca m'apprendras à mieux lire tiens!

J'ai utilisé la solution de Heyoan, et ca fixe bien la chose pour IE8. Je vais faire des tests vite fait mais le border-bottom a l'air d'être bien respecté. Merci!



#header-fr ul#header-menu li {
	display: inline;
	padding: 0 3px 7px 0; 
}

Modifié par PhilouMinety (04 Aug 2009 - 19:49)
Sujet clos
Aller à