IE bug 2pixel ?

**pop_up** · 18/01/2008, 10h23

Bonjour,

J'ai testé ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Maquette</title>
	<style>
body {margin: 0px;padding: 0px; font-family:Verdana,Arial, Helvetica, sans-serif;}
#principal{ max-width:1024px; min-width:800px; margin:auto; width:expression(document.body.clientWidth > 1024? "1024px": "auto" );}
DIV#menu-haut{margin:0; padding:0 201px 0 28px; overflow:auto; zoom:1; background-color:#FF66CC;}
DIV#menu_droite{float:right; width:201px; background-color:#99CC66;}
 
	</style>
</head>
 
<body>
	<div id="principal">		
		<div id="menu_droite">			
				bla<br />
				bla<br />
				bla<br />
				bla<br />
				bla<br />
				bla<br />
				bla<br />
		</div>
		<div id="menu-haut">			
				bla<br />
				bla<br />
				bla<br />					
		</div>
	</div>
</body>
</html>

Je m'aperçois que IE6 laisse un espace qui n'a pas lieu d'etre.

Est ce le bug du 2px ? Est ce qu'on peut le corriger ou le contourner ?

merci

**Candygirl** · 18/01/2008, 14h47

Envoyé par pop_up

Est ce le bug du 2px ?

Non, c'est le bug des 3px

Envoyé par pop_up

Est ce qu'on peut le corriger ou le contourner ?

Le contourner oui, en mettant l'autre élément aussi en float. mais vu que dans ta mise en page tu semble souhaiter n'avoir que la largeur du contenu qui varie, ce n'est pas possible.

Le corriger en ajoutant à l'intention d'IE6- uniquement:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
DIV#menu-haut {
  position:relative;
  left:3px;
  margin-left:-3px;
}

Autrement qq petits détails en passant:

L'attribut lang devrait être défini conjointement au xml:lang dans la balise html en xhtml 1.0 traité comme text/html
Ton padding-right de 201px est inutile vu le overflow:auto qui crèe un nouveau contexte de formatage
Tu devrais sortir les choses invalides de ta feuille de style (expression... zoom:1) et perso je préfère utiliser autre chose que le zoom:1 vu qu'il n'est supporté que depuis IE5.5 je crois.

**pop_up** · 18/01/2008, 15h07

tu utilises quoi à la place de zoom:1 par exemple ?

Je suis d'accord pour le padding de 201px et le overflow, c'est à force de bidouiller que j'ai du oublier de l'enlever.

Pour la feuille de style je met tout d'un coup ici pour que ce soit plus facile pour vous à tester mais sinon je crée bien une feuille pour IE.

merci

**pop_up** · 18/01/2008, 15h48

puis-je encore te soliciter pour ce bug d'1px on dirait ?
cette fois c'est firefox qui laisse un espace à droite du menu haut.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Maquette</title>
	<style>
body {margin: 0px;padding: 0px; font-family:Verdana,Arial, Helvetica, sans-serif;}
#principal{ max-width:1024px; min-width:800px; margin:auto;}
DIV#menu-haut{margin:0; position:relative; padding:0 0 0 28px; overflow:auto; background-color:#FF66CC;}
DIV#menu-haut li {float: left;padding: 0;margin: 0;height: 3em;list-style:none;font-size: 0.7em;font-weight: bold;border-right: 1px solid #ABAAAD;width: 14em;background-color: #A98E78;}
DIV#menu-haut li.dernier {width: 11em;border: none;}
DIV#menu_droite{float:right; width:201px; background-color:#99CC66;}
	</style>
    <!--[if lt IE 7]>
		<link href="ie.css" rel="stylesheet" media="screen" />
	<![endif]-->
</head>
 
<body>
	<div id="principal">		
		<div id="menu_droite">			
				bla<br />
				bla<br />
				bla<br />
				bla<br />
				bla<br />
				bla<br />
				bla<br />
		</div>
		<div id="menu-haut">			
            <ul>
                <li ><a href="./index.php?menuh=1">menu</a></li>
                <li ><a href="./index.php?menuh=2">menu</a></li>
                <li ><a href="./index.php?menuh=3">menu</a></li>
                <li ><a href="./index.php?menuh=4">menu</a></li>
                <li class="dernier" ><a href="./index.php?menuh=5">menu</a></li>
            </ul>					
		</div>
	</div>
</body>
</html>

css pour ie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
#principal {
	width: expression(document.body.clientWidth > 1024? "1024px": "auto" );		/* IE inferieur a la version 7 ne gere pas max-width et min-width */
}
 
DIV#menu-haut {
	zoom: 1;																	/* dote l element du haslayout (contextes de formattage) */
	left: 3px;																	/* correction du bug de 3 pixels de IE */
  	margin-left: -3px;															/* correction du bug de 3 pixels de IE */
}

**Candygirl** · 18/01/2008, 15h51

Envoyé par pop_up

tu utilises quoi à la place de zoom:1 par exemple ?

j'utilise le zoom:1 en phase de débugage autrement si je ne peux attribuer un width de 100% je joue en général avec le traditionnel height de 1%, en fait ça dépend des cas vu qu'ici il faudrait aussi rétablir l'overflow à visible.

Envoyé par pop_up

Je suis d'accord pour le padding de 201px et le overflow, c'est à force de bidouiller que j'ai du oublier de l'enlever.

En fait, dans ton cas d'utilisation de zoom:1, il trouverait son utilité sur IE5

Mais perso, je trouve que la création du nouveau contexte de formatage permet justement de s'affranchir totalement de la taille du menu.

Envoyé par pop_up

Pour la feuille de style je met tout d'un coup ici pour que ce soit plus facile pour vous à tester mais sinon je crée bien une feuille pour IE.

**pop_up** · 18/01/2008, 16h15

petit up car j'avais pas vu mais on a posté en meme temps donc tu as peut etre pas vu la suite.

**Candygirl** · 18/01/2008, 18h24

Envoyé par pop_up

cette fois c'est firefox qui laisse un espace à droite du menu haut.

Et pour quelle raison ton menu devrait-il être collé à droite? Il n'y a rien dans ton code qui l'indique. C'est un hasard si tes largeurs en em cumulées au padding de 28px et à la marge par défaut du ul collent ton menu sur IE7

**pop_up** · 18/01/2008, 20h13

c'est un hasard ... c'est plus moi qui ai bidouiller pour qu'il touche.

En fait je cherche à faire des li de meme dimension et qui au total fassent la largeur entiere.

Si je met une largeur en % soit 20% ici car il y a 5 li au total, les bordures sont en trop en font revenir le dernier à la ligne. Il faudrai aussi mettre la bordure en % et la soustraire ?

En plus si je met en %, cela risque de poser probleme si on retreci la page car le contenu intérieur dépassera .

Y a t'il une méthode optimale ?

encore merci pour tes conseils.

**clb56** · 19/01/2008, 00h56

Envoyé par Candygirl

j'utilise le zoom:1 en phase de débugage autrement si je ne peux attribuer un width de 100% je joue en général avec le traditionnel height de 1%

En général il vaut mieux tant que c'est possible ne pas attibuer de width:100%; à un élément et laisser la valeur par défaut width:auto; s'appliquer car elle est beaucoup moins problématique à l'usage (modèle de boite et tout ça).

Sinon ne pas s'y tromper, le zoom:1; peut bien se trouver dans la css principale, évidemment il l'invalidera (mais un validateur n'est qu'un outil de mise en alerte et si on sait de quoi il en retourne...) et ce n'est pas franchement sa place, mais outre cela il n'y aura pas de problème particulier. height:1%; par contre doit être placé en commentaire conditionnel lt IE7 pour la simple raison que IE7 contrairement à IE6 n'interprète pas height comme un min-height mais bien comme un height versus standards.

**clb56** · 19/01/2008, 01h04

Envoyé par pop_up

Il faudrai aussi mettre la bordure en % et la soustraire ?

Non, appliquer la bordure à l'élément enfant "a" mis en display block.

Quoiqu'il en soit c'est risqué car ce qu'il s'agit de divisé par cinq c'est un nombre déterminé de pixels comme c'est systématiquement le cas dès que l'on parle d'écran. Et si ce nombre n'est pas divisible par cinq ? Il réagit comment l'agent utilisateur ?

**Candygirl** · 19/01/2008, 12h48

Envoyé par clb56

En général il vaut mieux tant que c'est possible ne pas attibuer de width:100%

C'est clair mais c'est néanmoins un excellent moyen de doter un élément du layout dans un contexte maîtrisé (pas de padding, margin, border) et qui n'a aucune influence. Les commentaires conditionnels, c'est beau, accadémique, mais c'est lourd comme syntax et ça éparpille tes css. Je les utilise mais pas quand un bête width 100% peut faire l'affaire.

Envoyé par clb56

height:1%; par contre doit être placé en commentaire conditionnel lt IE7 pour la simple raison que IE7 contrairement à IE6 n'interprète pas height comme un min-height mais bien comme un height versus standards.

Euh ? comprends pas le " un height versus standards".

Dans des cas maîtrisés l'ajout de height de 1% n'aura aucun impacte que ce soit sur IE7 ou les navigateurs récents pour la simple et bonne raison qu'ils l'interprètront comme un height auto si le parent n'a pas de hauteur explicitement spécifiée. Par contre il est clair que je ne vais pas recommandé ce genre de pratique qui peut être pernicieuse pour de futures mises à jour (quand bien même il m'est finalemet extrêmenet rare d'attribuer des height à des éléments contenant du texte) et qui peut avoir certains impactes sur des navigateurs plus vieux (genre IE en mode quirk avec un overflow hidden).

Si je prônais l' utilisation des commentaires conditionnels dans tous les cas quand je les ai découverts, je me suis laissée reconvaincre à jouer finalement avec un peu tout dans la pratique; le star hack (en passant utile pour IE5 mac qui ne connaît pas les commentaires conditionnels), les commentaires conditionnels, les instructions sans impacte. Vas-tu passer par un commentaire conditionnel pour virer le double-margin bug ou simplement ajouter display:inline à ton élément ? Le width 100% en contexte maîtrisé n'aura pas plus d'impacte.

Oui, la validation est un outil et on peut avoir un site pourri jusqu'à la moelle et valide. Cela reste sependant un outil simple pour le grand publique pour se faire une idée donc perso je refuse de laisser IE me la gâcher pour le site d'un client et préfère passer par un commentaire conditionnel dans ce cas ou un hack valide.

Enfin qui sait si, dans le futur, la propriété zoom ne prendra-t-elle pas une fonction particulière et standard qui pourrait avoir un impacte inconnu à ce jour ?

Bref ce sont mes choix personnels actuels, et demain peut-être seront-il autres

**clb56** · 19/01/2008, 13h53

Envoyé par Candygirl

C'est clair mais c'est néanmoins un excellent moyen de doter un élément du layout dans un contexte maîtrisé

Oui tout à fait d'accord avec la limite de la pérennité de cette maitrise.

Enfin qui sait si, dans le futur, la propriété zoom ne prendra-t-elle pas une fonction particulière et standard qui pourrait avoir un impacte inconnu à ce jour ?

LOL

D'un autre coté si IE8 voit l'abandon du moteur trident tout va sans doute être très différent.

Pour l'heure je continue pour ma part à utiliser sans réserve les commentaires conditionnels car la dispersions des css je pense qu'elle peut et doit être limitée. Donc tout cela n'a pas à prendre des proportions ingérables.

Par contre un des vrais intérêt des commentaires conditionnels c'est qu'ils indiquent bien le caractère correctif des propriétés misent en oeuvre, et c'est d'autant plus utiles quand il s'agit de IE vs IE.

Dans le cas des hacks les choses sont moins lisibles je trouve.

**Candygirl** · 19/01/2008, 16h35

Je serais brève:

+1 à l'ensemble du propos

@pop-up: +1 à la réponse fournie par clb56

**pop_up** · 20/01/2008, 12h51

Merci à vous pour cette riche discussion.

bon j'avoue que quand je vois moteur trident, je suis totalement largué mais c'est pas grave je me documenterai.

Sinon pour le menu j'a fait ce que vous m'avaient conseillé à savoir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Maquette</title>
	<style>
body {margin: 0px;padding: 0px; font-family:Verdana,Arial, Helvetica, sans-serif;}
#principal{ max-width:1024px; min-width:800px; margin:auto; padding: 0px;}
DIV#menu-haut{margin:0; position:relative; padding:0 0 0 28px; overflow:auto; background-color:#FF66CC;}
DIV#menu-haut li {float: left;padding: 0;margin: 0;height: 3em;list-style:none;font-size: 0.7em;font-weight: bold;width: 20%;background-color: #A9C3FF; text-align:center; }
DIV#menu-haut li a { display:block; border-right:1px solid #000000; height:100%; }
DIV#menu-haut li.dernier a {border:none; }
DIV#menu_droite{float:right; width:201px; background-color:#99CC66;}
	</style>
    <!--[if lt IE 7]>
		<link href="ie.css" rel="stylesheet" media="screen" />
	<![endif]-->
</head>
 
<body>
	<div id="principal">		
		<div id="menu_droite">			
				bla<br />
				bla<br />
				bla<br />
				bla<br />
				bla<br />
				bla<br />
				bla<br />
		</div>
		<div id="menu-haut">			
            <ul>
                <li ><a href="./index.php?menuh=1">menu</a></li>
                <li ><a href="./index.php?menuh=2">menu</a></li>
                <li ><a href="./index.php?menuh=3">menu</a></li>
                <li ><a href="./index.php?menuh=4">menu</a></li>
                <li class="dernier" ><a href="./index.php?menuh=5">menu</a></li>
            </ul>					
		</div>
	</div>
</body>
</html>

le css pour ie reste le meme. J'ai mis tout mes <li> à 20%. Au début je comprenai pas trop le probleme du "divisible par 5" mais quand j'ai redimenssioné, j'ai vite compris ^^.
J'ai aussi ajouté un height 100% sur les balises <a> pour qu'elles prennent la hauteur du li.

Mais du coup, étant donné en plus que je vais devoir en faire un menu déroulant de tout ça aprés, est ce qu'il vaut mieux faire des <li> avec une taille fixe (ou en em) et considérer que si la résolution diminue, le menu passe à la ligne.

C'est vraiment chiant les pages à largeur variable

encore merci à vous

**clb56** · 20/01/2008, 13h13

Envoyé par pop_up

Mais du coup, étant donné en plus que je vais devoir en faire un menu déroulant de tout ça aprés, est ce qu'il vaut mieux faire des <li> avec une taille fixe (ou en em) et considérer que si la résolution diminue, le menu passe à la ligne.

Le mieux c'est de ne pas faire de menu déroulant du tout, de bien travailler les pages relais des différentes rubriques et également la page plan du site.

Pour le dire autrement, le mieux c'est toujours de travailler le plus rigoureusement possible tant du point de vue de la construction des documents que du point de vue de l'accès aux différentes ressources constituant un site.

Pour cela les menus déroulants sont loins d'être ce qu'il y a de plus formateur.

Envoyé par pop_up

C'est vraiment chiant les pages à largeur variable

Bouges pas, je vais chercher un fouet et je reviens

vala, vala

IE bug 2pixel ?

CSS

Discussions similaires

Partager

Partager