Décalage sous IE que je n'ai pas sous FF !

informate -  
 informate -
Bonjour,
J'ai un gros soucis depuis pas mal de temps sous IE avec mon forum intégré à mon thème, un décalage que je n'ai pas sous Mozilla Firefox.

Voici le code CSS:
1./* standard elements */
2.* {
3. margin: 0;
4. padding: 0;
5.}
6.
7.a {color: #C06468; text-decoration:none;}
8.
9.a:hover {color: #C06468 border-bottom: 1px dotted #C06468;}
10.
11.body {
12. background: #333 url(images/bg.jpg);
13. text-align:center;
14. color: #333;
15. font: 10px/15px tahoma, verdana, geneva, helvetica, arial, sans-serif;
16. margin: 1% 0;
17.}
18.
19.p,ul {
20. padding-bottom: 1em;
21.}
22.
23.ul {margin-left: 1.2em;}
24.
25.li {list-style: none;}
26..main li {list-style-image: url(images/li.gif);}
27.
28.h1 { font: 12px tahoma, verdana, geneva, helvetica, arial, sans-serif; text-align: center; border-bottom:6px dotted #C06468;}
29.
30.h2 img {margin:0 15px 0 0;}
31.
32.blockquote {
33. background: #fff;
34. border-bottom: 2px solid #000;
35. border-top: 2px solid #000;
36. color: #000;
37. display: block;
38. font-size: 0.9em;
39. margin-bottom: 1.2em;
40. padding: 6px 12px;
41.}
42.blockquote p {padding: 3px 0;}
43.
44.h2,h3 {color: #994;}
45.
46.
47./* misc */
48..clearer {clear: both;}
49..main_right .padded {padding: 6px 2px 6px 10px;}
50..main .padded {padding: 18px 12px;}
51..meta {font-size: 1.0em; color: #666;}
52..left {float: left;}
53..right {float: right;}
54.
55./* structure */
56..container {
57. font: 10px/15px tahoma, verdana, geneva, helvetica, arial, sans-serif;
58. background: url(images/bgcontainer.jpg) repeat-y;
59. margin: 0 auto;
60. text-align:left;
61. width: 780px;
62. border: 5px solid #222;
63.}
64.
65./* header */
66..header {
67. float: left;
68. width: 610px;
69. background: url(images/header.jpg) no-repeat;
70. line-height: 220px;
71. text-align: left;
72.}
73.
74./* structure */
75..top {
76. background: #222;
77. color: #DDD;
78. float: left;
79. font: normal 1.4em Verdana;
80. height: 50px;
81. text-align: center;
82. width: 639px;
83.}
84..subnav {
85. float: left;
86. width: 10px;
87.}
88..main {
89. float: left;
90. width: 600px;
91.}
92..main_right {
93. float: right;
94. text-align:left;
95. width: 170px;
96. font: 10px/15px tahoma, verdana, geneva, helvetica, arial, sans-serif;
97. color: #CCC;
98.}
99.
100./* sub-navigation */
101..subnav h1 {
102. background: #222;
103. color: #FFE;
104. font: bold 1.1em Verdana,sans-serif;
105. line-height: 24px;
106. padding-left: 8px;
107.}
108..subnav ul {margin: 0; padding: 0;}
109..subnav li {
110. border-bottom: 1px solid #696755;
111. list-style: none;
112.}
113..subnav li a {
114. background: #89866F;
115. color: #111;
116. display: block;
117. padding: 8px 0 8px 12px;
118. width: 148px;
119. text-decoration: none;
120.}
121..subnav li a:hover {
122. background: #9C997C;
123. color: #000;
124.}
125.
126./* footer */
127..footer {
128. background: url(images/bgfooter.jpg) repeat-x;
129. color: #CCC;
130. font-size: 0.9em;
131. line-height: 20px;
132. width: 100%;
133. font-size:9px;
134. text-align: center;
135.}
136..footer .left,.footer .right {padding: 0 16px;}
137..footer a {color: #EEE;}
138..footer a:hover {color: #FAFCB0;}
139.
140.}


Et voici le code HTML (j'ai enlevé le contenue) :
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
2."http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3.<html>
4.<head>
5.<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
6.<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
7.<title></title>
8.</head>
9.
10.<body>
11.
12.
13.<!-- /////////////////// CONTENUE/HEADER/MENUDROITE/ ///////////////////////// -->
14.
15.
16.<div class="container">
17.
18. <div class="header"> </div>
19.
20. <div class="main_right">
21.
22. <div class="padded">
23.
24. <h1><b>SITE INFO</b> </h1>
25....
26.
27.<h1><b> FANLISTING </b></h1>
28....
29.
30.<br/>
31.
32.
33.<h1><b>LINK SITE</b></h1>
34....
35.
36.<br/>
37.
38.
39.<h1><b>TO READ</b></h1>
40....
41.
42.
43.<h1><b>PARTNERS</b></h1>
44....
45.
46. </div>
47. </div>
48.
49.
50.<!-- /////////////////// MENU ///////////////////////// -->
51.
52. <div class="main">
53.
54. <div class="padded">
55.
56.<style>
57.a.inner{
58. text-decoration: none;
59. color:#000000;
60. margin-right: 6px;
61.}
62.a.inner:hover {
63. color:#000000;
64. border-bottom: 1px dotted #C06468;
65.}
66.a.outer {
67. text-decoration: none;
68. color:#606060;
69. margin-left: 6px;
70.}
71.a.outer:hover {
72. color:#aaaaaa;
73. border-bottom: 1px dotted #90D088;
74.}
75.
76.</style>
77.<div style="padding: 2px 0px 2px 15px; text-align: center; border-top: 1px solid #999999; border-bottom: 1px solid #999999; line-height: .9em; margin-bottom: 10px; padding: 5px 10px 5px 10px;">
78. <a class="inner" href="index.html">Home</a>
79. <a class="inner" href="bio.html">Bio</a>
80. <a class="inner" href="filmo.html">Filmography</a>
81. <a class="inner" href="interviews.html">Interviews</a>
82. <a class="inner" href="gallery.html">Gallery</a>
83. <a class="inner" href="videos.html">Videos</a>
84. <a class="inner" href="trailers.html">Trailers</a>
85. <a class="inner" href="magazines.html">Magazines</a>
86.
87. <a class="outer" href="forum/forum.php">Forum</a>
88. <a class="outer" href="forum/forum.php?chat=1">Tchat</a>
89. <a class="outer" href="guestbook.html">Guestbook</a>
90. <a class="outer" href="site.html">Site</a>
91. <a class="outer" href="contact.html">Contact</a>
92.</div>
93.
94.
95.<!-- /////////////////// CONTENUE ///////////////////////// -->
96.
97.@DNF <!-- c'est l'emplacement du forum-->
98.
99. </div>
100.
101. </div>
102.
103. <div class="clearer"><span></span></div>
104.
105.
106.
107.</div>
108.
109.</body>
110.
111.</html>


Et voyez en image ce que cela donne sous FF:
http://img164.imageshack.us/img164/6062/irxiegroq4modb0.jpg
(Niquel quoi)

Et sous IE:
http://img126.imageshack.us/img126/3/ieys2.jpg
(Le bordel !)

Voilà, j'espère avoir de l'aide car j'ai déjà poster pas mal sur différents forum mais en vain :/

Merci d'avance.

PS: Je ne donne pas le lien en raison de garder l'anonymat du site.
A voir également:

26 réponses

informate
 
Ah désoler je pensais pas que ça gainerais !

CSS:
/* standard elements */
* {
	margin: 0;
	padding: 0;
}

a {color: #C06468; text-decoration:none;}

a:hover {color: #C06468 border-bottom: 1px dotted #C06468;}

body {
	background: #333 url(images/bg.jpg);
	text-align:center;
	color: #333;
	font: 10px/15px tahoma, verdana, geneva, helvetica, arial, sans-serif;
	margin: 1% 0;
}

p,ul {
	padding-bottom: 1em;
}

ul {margin-left: 1.2em;}

li {list-style: none;}
.main li {list-style-image: url(images/li.gif);}

h1 { font: 12px tahoma, verdana, geneva, helvetica, arial, sans-serif; text-align: center; border-bottom:6px dotted #C06468;}

h2 img {margin:0 15px 0 0;}

blockquote {
	background: #fff;
	border-bottom: 2px solid #000;
	border-top: 2px solid #000;
	color: #000;
	display: block;
	font-size: 0.9em;
	margin-bottom: 1.2em;
	padding: 6px 12px;
}
blockquote p {padding: 3px 0;}

h2,h3 {color: #994;}


/* misc */
.clearer {clear: both;}
.main_right .padded {padding: 6px 2px 6px 10px;}
.main .padded {padding: 18px 12px;}
.meta {font-size: 1.0em; color: #666;}
.left {float: left;}
.right {float: right;}

/* structure */
.container {
	font: 10px/15px tahoma, verdana, geneva, helvetica, arial, sans-serif;
	background: url(images/bgcontainer.jpg) repeat-y;
	margin: 0 auto;
	width: 780px;
	border: 5px solid #222;
}

/* header */
.header {
	float: left;
	width: 610px;
	background: url(images/header.jpg) no-repeat;
	line-height: 220px;
	text-align: left;	
}

/* structure */
.top {
	background: #222;
	color: #DDD;
	float: left;
	font: normal 1.4em Verdana;
	height: 50px;
	text-align: center;
	width: 639px;
}
.subnav {
	float: left;
	width: 10px;
}
.main {
	text-align: left;
	float: left;
	width: 600px;
}
.main_right {
	float: right;	
	text-align:left;
	width: 170px;
	font: 10px/15px tahoma, verdana, geneva, helvetica, arial, sans-serif;
	color: #CCC;
}

/* sub-navigation */
.subnav h1 {
	background: #222;
	color: #FFE;
	font: bold 1.1em Verdana,sans-serif;
	line-height: 24px;
	padding-left: 8px;
}
.subnav ul {margin: 0; padding: 0;}
.subnav li {
	border-bottom: 1px solid #696755;
	list-style: none;
}
.subnav li a {
	background: #89866F;	
	color: #111;
	display: block;
	padding: 8px 0 8px 12px;
	width: 148px;
	text-decoration: none;
}
.subnav li a:hover {
	background: #9C997C;
	color: #000;
}

/* footer */
.footer {
	background: url(images/bgfooter.jpg) repeat-x;
	color: #CCC;
	font-size: 0.9em;
	line-height: 20px;
	width: 100%;
	font-size:9px;
	text-align: center;
}
.footer .left,.footer .right {padding: 0 16px;}
.footer a {color: #EEE;}
.footer a:hover {color: #FAFCB0;}

}


HTML:
<!D<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="../styleforum.css" media="screen"/>
<title></title>
</head>

<body>


<!-- /////////////////// CONTENUE/HEADER/MENUDROITE/ ///////////////////////// -->


<div class="container">

		<div class="header"> </div>

	<div class="main_right">

		<div class="padded">
			
 <h1><b>SITE INFO</b> </h1>
...

<h1><b> FANLISTING </b></h1>
...

<br/>


<h1><b>LINK SITE</b></h1>
...

<br/>


<h1><b>TO READ</b></h1>
...


<h1><b>PARTNERS</b></h1>
...

		</div>
	</div>
	
		
<!-- /////////////////// MENU ///////////////////////// -->

	<div class="main">

		<div class="padded">

<style>
a.inner{
	text-decoration: none;
	color:#000000;
	margin-right: 6px;
}
a.inner:hover {
	color:#000000;
	border-bottom: 1px dotted #C06468;
}
a.outer {
	text-decoration: none;
	color:#606060;
	margin-left: 6px;
}
a.outer:hover {
	color:#aaaaaa;
	border-bottom: 1px dotted #90D088;
}

</style>
<div style="padding: 2px 0px 2px 15px; text-align: center; border-top: 1px solid #999999; border-bottom: 1px solid #999999; line-height: .9em; margin-bottom: 10px; padding: 5px 10px 5px 10px;">
	<a class="inner" href="../index.html">Home</a>
	<a class="inner" href="../bio.html">Bio</a>
	<a class="inner" href="../filmo.html">Filmography</a>
	<a class="inner" href="../interviews.html">Interviews</a>
	<a class="inner" href="../gallery.html">Gallery</a>	
	<a class="inner" href="../videos.html">Videos</a>
	<a class="inner" href="../trailers.html">Trailers</a>
	<a class="inner" href="../magazines.html">Magazines</a>

	<a class="outer" href="../forum/forum.php">Forum</a>
	<a class="outer" href="../forum/forum.php?chat=1">Tchat</a>
	<a class="outer" href="../guestbook.html">Guestbook</a>
	<a class="outer" href="../site.html">Site</a>
	<a class="outer" href="../contact.html">Contact</a>
</div>


<!-- /////////////////// CONTENUE ///////////////////////// -->
			 
<center>			  
@DNF	<!-- C'est l'emplacement du forum-->		  
</center>			 
		</div>

	</div>
	
	<div class="clearer"><span></span></div>



</div>

</body>

</html>
0
informate
 
Merci, mais nan toujours pareil :/
Cela ne viendrait t-il pas de marges mal interprété par IE ?
0
informate
 
Ah !! on tiens le bon bout... En effet ça décale le menu de droite pas mal vers la droite, et IE me place le forum correctement. Par sous FF le menu de droite est décalé à droite (enfin normale c'était un test)
0
informate
 
Raah c'est louche ce problème, mais si tu regarde c'est au niveau de la marge de droite du forum et de la marge de gauche du menu de droite:
http://img172.imageshack.us/img172/5473/irxiegroq4modb0xp6.jpg

Tu vois les endroits que j'ai encadrer en rouge ce sont les marges ou les padding je sais même plus à force... Et bien sous IE elle ne sont pas pris en charge j'ai l'impression ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
informate
 
Merci pas mal ce petit script, en effet depuis le début je pensais que ça venais de ça et ça confirme:

.main_right .padded {padding: 6px 2px 6px 10px;}
.main .padded {padding: 18px 12px;}


Plus précisément le 10px de .main_right qui n'est pas interprété par IE
Et le 12px de .main de même.
Ce qui explique les décalage, maintenant reste à savoir pourquoi et comment régler le soucis ?
Merci encore à toi et de ton temps.
0
informate
 
Houla ! ça va être un peu dur de trouver dans tout ça !
0
informate
 
Re, écoute ça ne pas pas vraiment aidé :S Comment faire ?
0
informate
 
Tu n'as pas un autre moyen, comment réglé ce décalage ?
0
informate
 
Tu vois j'ai essayé en faisant comme ça:

.main_right .padded {padding-top: 6px; padding-right:2px; padding-bottom:10px; padding-left:10px;}
.main .padded {padding-top: 18px; padding-left:12px; padding-right:12;}

Je me suis dis que IE allait surement mieux l'interpréter, mais toujours pareil, je désespère !
0
informate
 
up
0
informate
 
Merci quand même mais mais je viens de trouver la source du problème, j'explique:
Voilà le "width " du container est de 780px; et bien si je le mets à 790px tout fonctionne sous IE, y compris sous FF mais le hic c'est que sous FF ça rajoute 10px de trop au menu de droite !!

Alors comment faire ?? et de quoi est du ce problème ? J'ai entendu parler d'un script pour que IE et FF interprète pas la même partie du CSS qu'on lui demande...

Merci
0
informate
 
Je l'ai déjà mis de Doctype, ça n'a rien changer !

Que faire maintenant ?
0
pijaku Messages postés 13513 Date d'inscription   Statut Modérateur Dernière intervention   2 769
 
Salut,
Je suis loin d'être un spécialiste alors juste une question : que se passe t'il si tu supprimes float : right; dans :
.main_right {
93. float: right;
94. text-align:left;
95. width: 170px;
96. font: 10px/15px tahoma, verdana, geneva, helvetica, arial, sans-serif;
97. color: #CCC;
98.}
0
informate
 
Et bien le menu de droite se retrouve coller à gauche, logique !!
0
PhP Messages postés 1774 Statut Membre 606
 
Bsr

En testant avec des div vides aucun problème mais c'était prévisible.

Il est probable que le contenu de tes divs doit certainement être trop grand par rapport à leur largeur.

Quelle drôle d'idée aussi de faire un site qui doit rester anonyme ! Il n'est donc pas prévu qu'il soit consultable par les internautes ?

Si ton site est classé secret défense j'abandonne : sans une vraie page impossible d'aller plus loin.
0
informate
 
Bonjour, alors j'ai essayé avec le width du container en temps normal le width du container est de 780px, pas de problème, sauf sous IE, pour IE c'est comme s'il y avait seulement 770px ( ce qui explique tout ces décalages), du coup j'ai essayé en le mettant a 790px, et là ça rend niquel sous IE, par contre forcément ça me l'élargis de +10px pour Mozilla Firefox, comment expliquer cette différence de 10px ? et surtout comment réglé le soucis ?
0
PhP Messages postés 1774 Statut Membre 606
 
Bsr

Plusieurs personnes ont déjà essayées de te répondre : à chaque fois même conclusion on peut pas t'aider en aveugle surtout sur un bug de mise en page.

Il faut le code de ta page avec le véritable contenu ou alors un montage identique avec des photos factices (mets ta propre photo à la place s'il le faut ;-) et un forum factice mais de taille identique : t'as bien un site de test non ? Tu dois pouvoir bricoler une page qui reproduit le bug et la publier sur le net ?

0
informate
 
Rooh cool le problème est résolu, un mec m'a parler de Bow Model Hack, j'ai chercher, j'ai trouvé ceci:
http://www.tatane.info/index.php/le-hack-model-box-css

Dans le commentaire du mec en bas, j'ai fais comme il a dit:
width : 780px !important; width:790px;

le "!important" est spécifié pour tous naviagteurs respectant les normes W3C Dans ce cas seul IE (4 / 5 / 5.5 / 6+ ) lira "width: 790px;"


Niquel ça marche parfait, IE, FF, Opera, c'est super.

Merci à tous, j'espère que ça aidera d'autre personnes !
0
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
PS: Je ne donne pas le lien en raison de garder l'anonymat du site. OK ;-))

alors enleve les chiffres a gauche et reposte !! ;-)) que l on est pas a nettoyer ton code avant de le controler !!

RAD
-1
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
on vas y aller par etape 1 la correction code

le HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>     
  <head>         
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">         
    <link rel="stylesheet" type="text/css" href="../styleforum.css" media="screen">         
    <title>         
    </title>           
  </head>     
  <body>         
    <!-- /////////////////// CONTENUE/HEADER/MENUDROITE/ ///////////////////////// -->         
    <div class="container">             
      <div class="header">             
      </div>             
      <div class="main_right">                 
        <div class="padded"><h1><b>SITE INFO</b></h1>...<h1><b>FANLISTING</b></h1>...                     
          <br><h1><b>LINK SITE</b></h1>...                     
          <br><h1><b>TO READ</b></h1>...<h1><b>PARTNERS</b></h1>...                 
        </div>             
      </div>             
      <!-- /////////////////// MENU ///////////////////////// -->             
      <div class="main">                 
        <div class="padded">                     
          <div style="padding: 2px 0px 2px 15px; 	text-align: center; 	border-top: 1px solid #999999; 	border-bottom: 1px solid #999999; 	line-height: .9em; 	margin-bottom: 10px; 	padding: 5px 10px 5px 10px; ">                         
            <a class="inner" href="../index.html">Home</a>                          
            <a class="inner" href="../bio.html">Bio</a>                          
            <a class="inner" href="../filmo.html">Filmography</a>                          
            <a class="inner" href="../interviews.html">Interviews</a>                          
            <a class="inner" href="../gallery.html">Gallery</a>                          
            <a class="inner" href="../videos.html">Videos</a>                          
            <a class="inner" href="../trailers.html">Trailers</a>                          
            <a class="inner" href="../magazines.html">Magazines</a>                          
            <a class="outer" href="../forum/forum.php">Forum</a>                          
            <a class="outer" href="../forum/forum.php?chat=1">Tchat</a>                          
            <a class="outer" href="../guestbook.html">Guestbook</a>                          
            <a class="outer" href="../site.html">Site</a>                          
            <a class="outer" href="../contact.html">Contact</a>                     
          </div>                     
          <!-- /////////////////// CONTENUE ///////////////////////// -->                     
          <center>@DNF                          
            <!-- C'est l'emplacement du forum-->                     
          </center>                 
        </div>             
      </div>             
      <div class="clearer">             
      </div>         
    </div>     
  </body>  
</html>


CSS
a {
color : #c06468;
text-decoration : none;
}
a:hover {
color : #c06468;
border-bottom : 1px dotted #c06468;
}
body {
background : #333 url(images/bg.jpg);
text-align : center;
color : #333;
font : 10px/15px tahoma, verdana, geneva, helvetica, arial, sans-serif;
margin : 1% 0;
}
p, ul {
padding-bottom : 1em;
}
ul {
margin-left : 1.2em;
}
li {
list-style : none;
}
.main li {
list-style-image : url(images/li.gif);
}
h1 {
font : 12px tahoma, verdana, geneva, helvetica, arial, sans-serif;
text-align : center;
border-bottom : 6px dotted #c06468;
}
h2 img {
margin : 0 15px 0 0;
}
blockquote {
background : #fff;
border-bottom : 2px solid #000;
border-top : 2px solid #000;
color : #000;
display : block;
font-size : 0.9em;
margin-bottom : 1.2em;
padding : 6px 12px;
}
blockquote p {
padding : 3px 0;
}
h2, h3 {
color : #994;
}
.clearer {
clear : both;
}
.main_right .padded {
padding : 6px 2px 6px 10px;
}
.main .padded {
padding : 18px 12px;
}
.meta {
font-size : 1em;
color : #666;
}
.left {
float : left;
}
.right {
float : right;
}
.container {
font : 10px/15px tahoma, verdana, geneva, helvetica, arial, sans-serif;
background : url(images/bgcontainer.jpg) repeat-y;
width : 780px;
border : 5px solid #222;
margin : 0 auto;
}
.header {
float : left;
width : 610px;
background : url(images/header.jpg) no-repeat;
line-height : 220px;
text-align : left;
}
.top {
background : #222;
color : #ddd;
float : left;
font : normal 1.4em Verdana;
height : 50px;
text-align : center;
width : 639px;
}
.subnav {
float : left;
width : 10px;
}
.main {
text-align : left;
float : left;
width : 600px;
}
.main_right {
float : right;
text-align : left;
width : 170px;
font : 10px/15px tahoma, verdana, geneva, helvetica, arial, sans-serif;
color : #ccc;
}
.subnav h1 {
background : #222;
color : #ffe;
font : bold 1.1em Verdana, sans-serif;
line-height : 24px;
padding-left : 8px;
}
.subnav li {
border-bottom : 1px solid #696755;
list-style : none;
}
.subnav li a {
background : #89866f;
color : #111;
display : block;
width : 148px;
text-decoration : none;
padding : 8px 0 8px 12px;
}
.subnav li a:hover {
background : #9c997c;
color : #000;
}
.footer {
background : url(images/bgfooter.jpg) repeat-x;
color : #ccc;
line-height : 20px;
width : 100%;
font-size : 9px;
text-align : center;
}
.footer .left, .footer .right {
padding : 0 16px;
}
.footer a {
color : #eee;
}
.footer a:hover {
color : #fafcb0;
}
*, .subnav ul {
margin : 0;
padding : 0;
}
a.inner {
text-decoration : none;
color : #000;
margin-right : 6px;
}
a.inner:hover {
color : #000;
border-bottom : 1px dotted #c06468;
}
a.outer {
text-decoration : none;
color : #606060;
margin-left : 6px;
}
a.outer:hover {
color : #aaa;
border-bottom : 1px dotted #90d088;
}



essaye deja comme ca ! il y avais une erreur de doctype et IE n aime pas ?

ps: j ai quelque problemes pour poster sur le forum ce soir ??

RAD
-1