Décalage d'éléments sous IE

**Fugugirl** · 09/02/2007, 15h49

Bonjour à tous,

je tente de faire une page qui va être remplie en php et de la faire en div... quasiment de bout en bout mais j'ai de fâcheux désordres... et sur quelques uns je ne comprends pas.

Pour voir la page et le code (sous FF et IE pour voir la différence):

http://www.kimlico.com/TC/domaines.html

le code :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!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>Document sans nom</title>
<link href="_principale.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
}
-->
</style></head>
 
<body>
 
<div style="width:780px; margin:auto;border-left:1px solid #999;border-right:1px solid #999; background:url(design/Layout/MAJ-02-2007/Barres/hachurees/bckgrd_H_bleu.gif);">
 <div style="float: left; width:250px;padding-left:20px;"><img src="accueil_fichiers/logo_transp.gif" /></div>
 <div class="texteMessage" style="float: left; width:200px;padding-left:10px;margin-top:40px;">ALL DOMAINS ACTIVITES</div>
 <div class="textarea" style="float: right; width:130px;margin-right:10px;padding:1px; text-align:center;margin-top:10px;">Exceeded forecasts</div>
 <div class="textarea" style="float: right; width:100px;margin-right:10px;padding:1px; text-align:center;margin-top:10px;">All lists</div>
 
 
 
<div style="width:780px; float:left;border-top:1px solid #999;border-bottom:1px solid #999;padding:5px 0 3px 0; background-color:#FFFFFF;"><div style=" width:20px; float:left; margin:0 0 0 20px;"><img src="accueil_fichiers/fleche_titre.gif" /></div><div  class="titre_accueil" style="padding-top:2px; width:400px; float:left;">COMPTABILITÉ</div>
  <div style="float:right;width:300px; text-align:right; padding:0 10px 0 0;">&nbsp;<a href="#" onclick="document.navigation.IdDomaine.value=3;document.navigation.action='pdf/generateRapportAccueilPdf.php';document.navigation.submit();document.navigation.action='decomptes.php';" class="lienAccueil">To print,  download the PDF!</a> <img src="accueil_fichiers/pdf-logo.gif" align="absmiddle" border="0" /></div> 
  <div style="clear: both"></div> </div> 
 
<div style="float:left; width:780px ;margin-top:7px; background-color:#FFFFFF;">
<div style="padding:4px;width:700px; margin:5px 0 0 40px;">
<div style="width:15px; float:left;"><img src="accueil_fichiers/fleche_fichiers.gif" /></div>
<table cellpadding="0" cellspacing="0" border="0"><tr><td ><span class="soustitre_accueil"><a href="#">CCV CLIENT CONCESSIONNAIRE VOITURE</a></span></td><td><img src="accueil_fichiers/blank.gif" width="10" /></td><td><img src="accueil_fichiers/Vert_cligno.gif" /></td></tr></table></div>
 
<div style="float:left;margin:2px 0 0 80px; width:700px;"><div style="width:15px; float:left;"><img src="accueil_fichiers/picto_calendrier.gif" name="Calendar" width="11" height="14" id="Calendar" /></div><span class="commentaire_accueil">from 12/04/2006 to 03/31/2007</span></div>
 
<div style="float:left;margin:8px 0 0 80px; width:700px;">
<div style="float:left;text-align:left;"><span class="temps_couts">spent <b>123h12mn 12s</b></span></div>
<div style="float:left;text-align:center;margin-left:150px;"><span class="temps_couts">envisaged <b>103h</b></span></div>
<div style="float:right;text-align:right;margin-right:10px;"><span class="temps_couts">total <b>103h</b></span></div>
</div>
 
 
<div style="width:15px; float:left; margin:5px 0 0 60px;"><img src="accueil_fichiers/clock.gif" /></div>
<div style="float:left;margin:5px 0 0 5px; width:690px;"><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td background="accueil_fichiers/SBarre_rouge.jpg" height="10" style=" border-left:1px solid #999;border-right:1px solid #999;"></td></tr></table></div>
<div style="float:left;margin:8px 0 0 80px; width:700px;">
 <div style="float:left;text-align:left;"><span class="temps_couts">spent <b>123h12mn 12s</b></span></div>
<div style="float:left;text-align:center;margin-right:150px;margin-left:150px;"><span class="temps_couts">envisaged <b>103h</b></span></div>
<div style="float:right;text-align:right;margin-right:10px;"><span class="temps_couts">total <b>103h</b></span></div>
</div>
<div style="width:15px; float:left; margin:3px 0 0 60px;"><img src="accueil_fichiers/dollar_sign.gif" width="11" height="14" /></div>
<div style="float:left;margin:5px 0 0 5px; width:690px;"><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td background="accueil_fichiers/SBarre_vert.jpg" height="10" style=" border-left:1px solid #999;border-right:1px solid #999;"></td></tr></table></div>
 
<div style="float:left;width:730px;height:20px;"></div>
 
 
<div style="clear: both"></div>
</div>
 
 
 
<div style="clear: both"></div> 
</div>
</body>
</html>

Si quelqu'un voit la lumière qui me fait défaut.

Merci à tous,

Aurélia.

**Fugugirl** · 09/02/2007, 16h10

Tentative de réponse :

le décalage de mes barres de temps et de couts pourrait-il venir du fait que leur width est interprété différement par IE ??

Je demande car comme je n'ai pas de PC et IE sous lamain j'ai du mal à tester tout ceci en temps réél.

Merci à tous de votre aide.

**MasterOfChakhaL** · 09/02/2007, 16h45

Envoyé par Fugugirl

le décalage de mes barres de temps et de couts pourrait-il venir du fait que leur width est interprété différement par IE ??

Ca pourrait être quelque chose du genre...
Tu peux commencer par ajouter:

Code :

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

1
2
3
4
* {
  margin: 0;
  padding: 0;
}

Ca permettra, pour tous les éléments, de remettre à 0 les valeurs par défaut qui peuvent être différentes en fonction du navigateur.

Si tes dimensions sont calculées au pixel prêt, le décalage peut peut-être venir de la largeur de la bordure.
Tu peux essayer:

Code :

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

1
2
3
4
#element {
  border: 1px solid #000;
  margin: -1px;
}

Ca devrait compenser la largeur de la bordure.

Si tu as des éléments flottants, tu peux essayer de les passer à display: inline; ,ca permet de corriger certains bug d'IE qui gère mal les flottants

**Fugugirl** · 09/02/2007, 16h49

Merci j'applique tout de suite tes conseils

Bonne fin d'après-midi.

A.

**Fugugirl** · 09/02/2007, 16h56

Juste une petite question :

que vient ajouter/modifier/améliorer le "display: inline;" sur les éléments flottants... (la plupart de mes éléments le sont) ?

Merci de ton aide,
A.

**MasterOfChakhaL** · 09/02/2007, 17h08

En fait, ca n'a rien de logique...
En théorie les éléments flottants sont censés être affichés comme des blocs, donc c'est même plutot contradictoire.
IE comprends mieux comme ca et ca ne gène pas les autres navigateurs. Va savoir...

Décalage d'éléments sous IE

CSS

Vue hybride

Discussions similaires

Partager

Partager