18041 sujets

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

[Résolu] IE, espace blanc et CSS

En résumé, voici mon problème. Je travaille sur un menu avec des boutons réactifs. Principe hyper classique.

Le but est que les boutons du menu changent lorsqu'on passe la souris dessus.

Pour faire cela, j'utilise un javascript qui change la classe de mes boutons (des Div) si on passe dessus. Cela fonctionne parfaitement sous Firefox, mais pour IE 6 et IE 7, cela ne fonctionne que si je n'utilise pas d'images d'arrière plan.

Je m'explique : si je change la couleur de mes div, tout va bien. Par contre, si je met des images en background, étonnamment, celle du onmouseover est ignorée.

Je montre mes codes :

1) Voici la solution qui fonctionne partout, y compris sous IE :

Si vous essayez ce code avec les propriétés mises en commentaire, et l'ouvrez avec IE, tout fonctionnera très bien, mais on ne change le background qu'avec des codes de couleur. Par contre, si vous remplacez les deux lignes CSS des bouton "on" et off par comme je l'ai fait, seule l'image du bouton "off" sera affichée :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type"
			content="text/html; charset=iso-8859-1" />
		<title>Essai de style avec condition sur l'élement par défaut d'un select</title>

	<style type="text/css">
		body,html{
			height:100%;
			width:100%;
			margin:0;
			padding:0;
		}
		body {
			background: #603202;
		}

		.conteneur {
			background: #ffd085;
			width: 80%;
			height:100%;
			min-height: 100%;
			margin:auto; 
			margin-top:0;
		}
		#headMenu{
			width:400px;
			margin:auto;
		}
		#headMenu div{
			width:100px;
			float:left;
			margin-left:5px;
			text-align:center;
		}
		/* .headMenuItemOn{
			background:blue;
		}
		.headMenuItemOff{
			background:red;
		}*/

		.headMenuItemOff {
			background:url("images/menu_btn.gif") no-repeat ;
		}
		.headMenuItemOn {
			background:url("images/menu_btn_over.gif")no-repeat ;
		}
	</style>
	<script type="text/javascript">
		function gomenu(url){
			parent.location = url;
		}
	</script>

	</head>

	<body onLoad="">
		<div class="conteneur">

			<div id="headMenu">
				<div class="headMenuItemOff" onclick="gomenu('page1.html');" onmouseout="this.className='headMenuItemOff'" onmouseover="this.className='headMenuItemOn'">
					<span>Menu 1</span>
				</div>
				<div class="headMenuItemOff" onclick="gomenu('page2.html');" onmouseout="this.className='headMenuItemOff'" onmouseover="this.className='headMenuItemOn'">
					<span>Menu 2</span>
				</div>
				<div class="headMenuItemOff" onclick="gomenu('page3.html');" onmouseout="this.className='headMenuItemOff'" onmouseover="this.className='headMenuItemOn'">
					<span>Menu 3</span>
				</div>
			</div>
		</div>
			
		</div>

	</body>

</html>


Je suis vraiment dérouté par ce phénomène. Est-ce que quelqu'un aurait une explication . Le répertoire image est au mêne niveau que la page html, et à l'intérieur, on a deux images gifs toutes simples.
Modifié par Shimrhod (05 May 2008 - 16:43)
.headMenuItemOn {
			background:url("images/menu_btn_over.gif")no-repeat ;
		}


Je crois que les doubles-quotes ne font pas parties de la spec CSS mais néanmoins supportés par les navigateurs (Pas sur ni de la première, ni de la deuxième affirmation).
Par contre il manque un espace entre la parenthèse fermante et le "no-repeat" et ça, c'est grave... Smiley lol
Nom d'un chien ! Ca marche ! Smiley smile

Quand j'ai lu cette histoire d'espace blanc qui manquait, j'ai d'abord cru que tu me taquinais, mais non ! C'est bien cela qui a fait s'embrouiller IE !

Purée ! J'aurais jamais cru que c'était important dans les CSS.

MERCI !!!!!!!!!!! Smiley smile Smiley smile Smiley smile

Si tu savais ce que je suis allé imaginer comme théorie compliquée à propos de différentes versions de javascript etc ! Cela fait plusieurs jours que je ne comprenais pas ! Smiley langue
Modifié par Shimrhod (05 May 2008 - 16:44)
C'est typiquement le genre de choses que l'on voit très bien... quand on ne l'a pas écrit. Smiley biggol

Sinon oui les espaces à ce niveau la sont importants car ce type de propriétés permettent de ne pas ecrire toutes les propriétés une par une (background-color, background-image, background-attachment, etc...) donc pour pouvoir les parser il faut un séparateur, qui est ici l'espace.

C'est aussi important de bien écrire CSS comme il a été décrit dans les spécifications, car meme si les navigateurs sont assez tolérants, il ne le sont pas tous de la même façon, et mal écrire le code encourage à la diffusion de mauvaises pratiques...

Sur cette parole marolisatrice, je vais aller relire les specs... Smiley lol Smiley lol Smiley lol
Sujet clos
Aller à