IE bug 2pixel ?

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

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, 13h47

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, 14h07

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, 14h48

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, 17h24

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, 19h13

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.

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

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, 15h15

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

**clb56** · 18/01/2008, 23h56

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.

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

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

IE bug 2pixel ?

CSS

Vue hybride

Discussions similaires

Partager

Partager