28220 sujets

CSS et mise en forme, CSS3

[Résolu] Espace non désirés sous IE dans listes imbriquées de liens

Bonjour,

J'ai créer un menu constitué de différentes listes imbriquées de liens.
J'aimerais remplacer les éléments span de certains de ces liens par une image.

J'utilise donc une technique bien connue pour ne plus afficher le contenu des span tout en restant accessible:

span {
position: absolute;
left: -9999px;
}


Malheureusement, cette définition CSS génére un espace non désiré sous IE. Comme l'utilisation de display: none, donne le même résultat, je pense que le problème survient dès que les spans sortent du flux.

J'ai adapté mon code afin que vous puissiez observer le problème.
Le premier lien permet de sortir les spans du flux ou de les y replacer.

Je vous donne aussi le code de cette page:

<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>probl&egrave;me menu</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

p {
	margin: 5px 0;
	font-size: x-large;
}

#menu1 {
	width: 96px;
}

ul {
	list-style: none;
}

.section {
	display: block;
	height: 22px;
	background-color:  #FF0202;
	padding-left: 10px;
}

#menu1 a {
	text-decoration: none;
	color: #FFF;
}

#menu1 ul li a {
	font-size: 18px;
	text-align: right;
	height: 22px;
	display: block;
	background: #666;
	padding-right: 5px;
}

#menu1 ul li a:hover {
	background: #999;
}

#menu1 .section span {
	left: -9999px;
}

#menu1 .section .hiddenText {
	position: absolute;
}
</style>
<script type="text/javascript">
	function changePositionValue(){
			var allspan = document.getElementsByTagName("span");
			for (var j=0; j<allspan.length; ++j){
				if (allspan[j].className=="hiddenText") {
					allspan[j].className="";
				} else {
					allspan[j].className="hiddenText";
				}
			}
	}
</script>
</head>
<body>
<p>Sous IE, lorsque les &eacute;l&eacute;ments span sortent du flux, un espace est créé</p>
<p><a href="javascript:changePositionValue()">Retirer ou replacer les &eacute;l&eacute;ments span dans le flux</a></p>
<ul id="menu1">
	<li><a href="" id="sports" class="section" title="Sports"><span>SPAN1</span></a>
		<ul>
			<li><a href="">sous_rub1</a></li>
			<li><a href="">sous_rub2</a></li>
			<li><a href="">sous_rub3</a></li>
			<li><a href="">sous_rub4</a></li>
			<li><a href="">sous_rub5</a></li>
		</ul>
	</li>
	<li>
		<a href="" id="infos" class="section" title="Infos"><span>SPAN2</span></a>
		<ul>
			<li><a href="">sous_rub1</a></li>
			<li><a href="">sous_rub2</a></li>
			<li><a href="">sous_rub3</a></li>
			<li><a href="">sous_rub4</a></li>
			<li><a href="">sous_rub5</a></li>
		</ul>
	</li>
	<li>
		<a href="" id="culture" class="section" title="Culture"><span>SPAN3</span></a>
		<ul>
			<li><a href="">sous_rub1</a></li>
			<li><a href="">sous_rub2</a></li>
			<li><a href="">sous_rub3</a></li>
			<li><a href="">sous_rub4</a></li>
			<li><a href="">sous_rub5</a></li>
		</ul>
	</li>
</ul>
</body>
</html>


J'espère que vous pourrez me proposer une solution.
Merci pour votre aide.
Modifié par Mathieu_vd (14 Aug 2006 - 19:08)
Bonjour Mathieu,

Tu peux modifier le vertical-align de la class .section
par exemple : 
.section {vertical-align: top;}
Bonjour Alan,

Merci pour ton aide.
Un vertical-align:top corrige effectivement l'affichage.

Pourrais-tu m'expliquer pourquoi ?
S'agit-il d'un véritable bug de IE ?
Si je ne m'abuse vertical-align est réservé au cellule de tableau... même si je sais que IE les applique sur d'autre éléments.

@+
Bonjour ghost,

Avec position: relative, le span reste dans le flux. La place que l'élément prend dans le page est conservée.
Ainsi si le span contient un texte plus long, il prendra peut-être trop de place même s'il n'est pas visible. Il en est de même avec la propriété visible.
Mathieu_vd a écrit :
Pourrais-tu m'expliquer pourquoi ?
S'agit-il d'un véritable bug de IE ?
Si je ne m'abuse vertical-align est réservé au cellule de tableau

Bonjour
Vertical-align s'utilise également pour les éléments de type inline (et variantes).

L'espace créé correspond à celui qui se trouve sous la ligne de base pour les lettres à hampe descendante (j,y,p...) et autres caractères.
Puisque l'élément est en display:block, il n'y a aucune raison d'avoir cet espace.
Modifié par Alan (01 Feb 2007 - 23:51)
Ha oui !

Finalement, j'ai déjà été confronté à ce bug mais dans un contexte différent.
Je n'avais pas fait le rapprochement...

Merci pour les explications complémentaires
Sujet clos
Aller à