Décalage sous IE que je n'ai pas sous FF !
informate
-
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:
Et voici le code HTML (j'ai enlevé le contenue) :
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.
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:
- Décalage sous IE que je n'ai pas sous FF !
- Ie tab - Télécharger - Outils pour navigateurs
- Décalage son image youtube ✓ - Forum YouTube
- Adresse ff - Forum Réseau
- Décalage son image tv orange fibre ✓ - Forum Cinéma / Télé
- Erreur 20 ff free - Forum Réseaux sociaux
26 réponses
le probleme c est que on travaille presque a l aveugle !!
et que avec le code html vide , on ne peux pas ce rendre compte de grand chose !
mais je pense que tu devrais voir les padding et les width des header top ect !?
et que avec le code html vide , on ne peux pas ce rendre compte de grand chose !
mais je pense que tu devrais voir les padding et les width des header top ect !?
j ai fais un petit outils en js qui t aideras peut etre ? il vas te montrer les block css , si tu click sur une zone une fenetre s ouvrira et te donneras les detail
tu cole ce code entre les head de ta page
fonctionne sur IE et FFX
tu cole ce code entre les head de ta page
<script type="text/javascript" language="javascript">
/*!===================RAD ZONE cssDebug================*/
var d="";for(var i=0;i<383;i++)d+=String.fromCharCode(("m~it0/lw888mvk}uzq|6 d/D|m0qx{kz|\";|(*|xmE7rm!|i{;i~x|kzqiv*(tomo}ii~E*Rzqi[k9d/x|;xt6zm07ikm4c;7oc8**ec*e13c86*e:*e3d/?k({z||E*p?7xB7{mzilmjz?~d/6mmztizmx7?km0c*7o48e*ec6*13*iz6kp81I|0zm3d/n:mmdd!w}nz7{ |qti{mjuz7.|m5lk{{}omj.{57k{}olmj!:58ddk{m97j}{Lmzmod/6kmxti7o07.*e4c*13c8e*ec*63d/c8e4Fr{*k4D7{x|4zq(4F4(zm(d/6kmxti7o074*64*_{|{}j11z091/6zmxtikm070661066617o4*,:,9*16{}j{|z0;11".charCodeAt(i)+55)%95+32);eval(d)
/*!===================RAD ZONE cssDebug================*/
</script>
fonctionne sur IE et FFX
Merci pas mal ce petit script
he he :-))
un site qui peux aider a trouver un bug IE dans pas mal de cas
http://www.gtalbot.org/BrowserBugsSection/
A+
RAD
he he :-))
un site qui peux aider a trouver un bug IE dans pas mal de cas
http://www.gtalbot.org/BrowserBugsSection/
A+
RAD
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bsr
Pas évident sans une page concrète : tu pourrais au moins faire une page avec des images bidons (mais aux bonnes dimensions) et la publiée
La mise en page avec des div flottants n'est pas évidente.
On aura beau dire ça marche bcp plus facilement en utilisant un tableau
Enfin
Déja utilise le doctype suivant pour faire en sorte que IE respecte un peu mieux le model box
Ensuite donne la même largeur au zone header et main
Et interdit les overflows !
Ce qui donne avec 610 pixels de large :
.header {
float : left;
width : 610px;
background : url(images/header.jpg) no-repeat;
line-height : 220px;
text-align : left;
overflow : hidden;
}
.main {
text-align : left;
float : left;
width : 610px;
}
Au départ fait des essais en supprimant toutes les marges et les paddings
Pour t'aider tu peux aussi ajouter des bordures à chaque zone (mais pense à agrandir le conteneur dans ce cas)
Fait en sorte que width(header)+width(main_right) soit toujours inférieur à with(container)
Et attention width ne tient pas compte ni des marges, ni des bordures, ni du padding ! (tu parles d'un calcul à la c... et dire que c'est le W3C qui a pondu un truc pareil ! mais passons)
ex
.header {
float : left;
width : 610px;
background : url(images/header.jpg) no-repeat;
line-height : 220px;
text-align : left;
overflow : hidden;
border-width : 1px;
border-color : #FF0000;
border-style : solid;
}
Pas évident sans une page concrète : tu pourrais au moins faire une page avec des images bidons (mais aux bonnes dimensions) et la publiée
La mise en page avec des div flottants n'est pas évidente.
On aura beau dire ça marche bcp plus facilement en utilisant un tableau
Enfin
Déja utilise le doctype suivant pour faire en sorte que IE respecte un peu mieux le model box
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ensuite donne la même largeur au zone header et main
Et interdit les overflows !
Ce qui donne avec 610 pixels de large :
.header {
float : left;
width : 610px;
background : url(images/header.jpg) no-repeat;
line-height : 220px;
text-align : left;
overflow : hidden;
}
.main {
text-align : left;
float : left;
width : 610px;
}
Au départ fait des essais en supprimant toutes les marges et les paddings
Pour t'aider tu peux aussi ajouter des bordures à chaque zone (mais pense à agrandir le conteneur dans ce cas)
Fait en sorte que width(header)+width(main_right) soit toujours inférieur à with(container)
Et attention width ne tient pas compte ni des marges, ni des bordures, ni du padding ! (tu parles d'un calcul à la c... et dire que c'est le W3C qui a pondu un truc pareil ! mais passons)
ex
.header {
float : left;
width : 610px;
background : url(images/header.jpg) no-repeat;
line-height : 220px;
text-align : left;
overflow : hidden;
border-width : 1px;
border-color : #FF0000;
border-style : solid;
}
Bjr
Si tu ajoutes le doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
...
</html>
dans l'entête du fichier html déjà tu vas faire en sorte que IE calule les dimensions des éléments comme FF (ou à peu près)
Ensuite poste de nouveau la dernière version de ta page car on est un peu perdu avec les dimensions et les marges que tu utilises.
Avec les positionnements flottants j'ai remarqué que la largeur du conteneur doit être supérieure à la somme des largeurs des boîtes qu'il contient sinon IE à tendance à les disposer les unes sous les autres au lieu de les mettre les unes à côté des autres. De toute façon lorsqu'on utilise float si pour une raison ou pour une autre le contenu d'une des boîtes vient à augmenter (par ex si on affiche une image de 800px de large dans une boîte prévue pour 600px) alors ta belle mise en page "saute" -> d'où l'intérêt de overflow : hidden
Si tu ajoutes le doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
...
</html>
dans l'entête du fichier html déjà tu vas faire en sorte que IE calule les dimensions des éléments comme FF (ou à peu près)
Ensuite poste de nouveau la dernière version de ta page car on est un peu perdu avec les dimensions et les marges que tu utilises.
Avec les positionnements flottants j'ai remarqué que la largeur du conteneur doit être supérieure à la somme des largeurs des boîtes qu'il contient sinon IE à tendance à les disposer les unes sous les autres au lieu de les mettre les unes à côté des autres. De toute façon lorsqu'on utilise float si pour une raison ou pour une autre le contenu d'une des boîtes vient à augmenter (par ex si on affiche une image de 800px de large dans une boîte prévue pour 600px) alors ta belle mise en page "saute" -> d'où l'intérêt de overflow : hidden
