[RESOLU] DIVs, IE et positionnement : je vais claquer un fusible ...

DIVs, IE et positionnement : je vais claquer un fusible ... [RESOLU] - HTML/CSS - Programmation

Marsh Posté le 17-10-2003 à 22:07:41    

Bon, j'explique : j'utilise un script nommé Wordpress en version .71 pour gérer mon blog. l'interface de mon blog fait abondamment usage des DIVs (pas une table utilisée) et des CSS. Jusque la, tout va bien car j'arrive à faire ce que je veux ...
 
Du moins avec Mozilla car avec Internet Explorer, tout se retrouve en vrac : c'est à dire que le positionnement des DIVs en absolu ne fonctionne pas (le menu n'est plus à droite par exemple et en plus il n'a plus de fond).
 
Voici le CSS de mon blog :
 

Code :
  1. /* Default WordPress by Matthew Mullenweg http://photomatt.net
  2.     This is just a basic layout, with only the bare minimum defined.
  3.  Please tweak this and make it your own. :)
  4. */
  6. a {
  7. color: #069;
  8. }
  10. a:visited {
  11. color: #039;
  12. }
  14. a:hover {
  15. color: #39c;
  16. }
  18. acronym, abbr {
  19. border-bottom: 1px dashed #333;
  20. }
  22. acronym, abbr, span.caps {
  23. cursor: help;
  24. font-size: 90%;
  25. letter-spacing: .07em;
  26. }
  28. blockquote {
  29. border-left: 5px solid #ccc;
  30. margin-left: 1.5em;
  31. padding-left: 5px;
  32. }
  34. body {
  35. font-family: Verdana, Arial, Helvetica, sans-serif;
  36. margin: 0;
  37. background-color: #E2EAF7;
  38. background-image: url("/b2-img/fond-base.jpg" );
  39. background-position: top left;
  40. background-repeat: no-repeat;
  41. font-size: 12px;
  42. }
  44. /*
  45. div {
  46. white-space: normal;
  47. font-size: 12px;
  48. }
  49. */
  51. h2 {
  52. border-bottom: 2px solid #3a6ea5;
  53. margin-bottom: 5px;
  54. font-size: 16px;
  55. font-weight: bolder;
  56. }
  58. h3 {
  59. font-size: 14px;
  60. font-weight: bold;
  61. border: 1px dashed #000;
  62. background-color: #eef;
  63. margin-left: -20px;
  64. margin-right: 0px;
  65. margin-top: 2px;
  66. margin-bottom: 2px;
  67. padding: 3px;
  68. }
  70. img {
  71. border: 0px;
  72. }
  74. p, li {
  75. line-height: 130%;
  76. font-size: 12px;
  77. }
  79. .b2calendarcell {
  80. color: #000;
  81. }
  83. .b2calendaremptycell {
  84. }
  86. .b2calendarheadercell {
  87. background: #808080;
  88. color: #ccc;
  89. }
  91. .b2calendarlinkpost {
  92. color: #f00;
  93. text-decoration: none;
  94. }
  96. .b2calendarmonth {
  97. color: #aaa;
  98. }
  100. .b2calendarrow {
  101. color: #0f0;
  102. }
  104. .b2calendartable {
  105. background: #fff;
  106. border: 1px solid #000;
  107. }
  109. .b2calendartoday {
  110. color: #00f;
  111. }
  113. .cit {
  114. border: 1px dashed #000;
  115. background-color: #fff;
  116. padding: 3px;
  117. margin-left: 15px;
  118. margin-right: 15px;
  119. }
  121. .credit {
  122. font-size: 9px;
  123. text-align: center;
  124. border-top: 1px dashed #000;
  125. border-right: 1px dashed #000;
  126. width: 200px;
  127. }
  129. .feedback {
  130. text-align: right;
  131. color: #ccc;
  132. font-size: 10px;
  133. }
  135. .meta {
  136. color: #000;
  137. font-size: 9px;
  138. }
  140. .meta a {
  141. color: #000;
  142. font-size: 9px;
  143. }
  146. .texte-info {
  147. font-size: 12px;
  148. }
  150. .commentaires {
  151. font-size: 12px;
  152. margin-top: "px;
  153. }
  155. .postage {
  156. border-top : dashed 1px #000;
  157. border-left: dashed 1px #000;
  158. border-bottom: solid 1px #E2EAF7;
  159. border-right: solid 1px #E2EAF7;
  160. padding: 5px;
  161. background-image: url("/b2-img/fond-content-2.png" );
  162. background-repeat: repeat;
  163. }
  165. .storytitle {
  166. font-size: 14px;
  167. }
  169. .storytitle a {
  170. text-decoration: none;
  171. font-size: 14px;
  172. }
  174. .storycontent {
  175. font-size: 12px;
  176. }
  178. #content {
  179. margin: 0 165px 0 200px;
  180. }
  182. #header {
  183. background-color: #3a6ea5;
  184. background-image: url("/b2-img/fond-logo.gif" );
  185. background-repeat: repeat-x;
  186. height: 54px;
  187. margin: 0;
  188. padding: 0px;
  189. }
  191. #header a {
  192. color: #fff;
  193. text-decoration: none;
  194. }
  196. #header a:hover {
  197. color: #ccc;
  198. }
  200. #menu {
  201. background-color: #3a6ea5;
  202. background-image: url("/b2-img/fond-menu.png" );
  203. background-repeat: repeat;
  204. border-left: 1px dashed #000;
  205. border-bottom: 1px dashed #000;
  206. padding-bottom: 10px;
  207. padding-right: 4px;
  208. position: absolute;
  209. right: 0;
  210. top: 65px;
  211. width: 150px;
  212. }
  214. #menu form {
  215. margin: 0 0 0 13px;
  216. }
  218. #menu input {
  219. background-color: #ccc;
  220. border: 1px solid #000;
  221. }
  223. #menu ul {
  224. color: #ccc;
  225. font-variant: normal;
  226. font-weight: bold;
  227. list-style-type: none;
  228. margin: 0;
  229. padding-left: 3px;
  230. }
  232. #menu ul ul {
  233. font-variant: normal;
  234. font-weight: normal;
  235. line-height: 100%;
  236. list-style-type: none;
  237. margin: 0;
  238. padding: 0;
  239. text-align: left;
  240. }
  242. #menu ul ul li {
  243. line-height: 115%;
  244. padding-left: 11px;
  245. list-style-type: none;
  246. }
  248. #menu ul ul li a {
  249. color: #fff;
  250. height: 13px;
  251. text-decoration: none;
  252. list-style-type: none;
  253. }
  255. #menu ul ul li a:hover {
  256. border-bottom: 1px solid #ccc;
  257. }


 
 
J'ai également modifié une fonction incluse qui sert à parser à l'affichage le contenu de la BDD de manière à éviter d'utiliser comme auparavant la balise <></p> à l'intérieur d'une balise <div></div>, le validator du W3C n'aimant pas cela ...
Voici la fonction :
 

Code :
  1. function wpautop($pee, $br=1) {
  3. $pee = preg_replace('|<br />\s*<br />|', "\n\n", $pee);
  5. $pee = preg_replace("/(\r\n|\n|\r)/", "\n", $pee); // cross-platform newlines  
  7. // $pee = preg_replace("/\n\n+/", "\n\n", $pee); // take care of duplicates
  9. $pee = preg_replace('/\n?(.+?)(\n\n|\z)/s', "<br />$1\n", $pee); // make paragraphs, including one at the end  
  11. $pee = str_replace('<br /></p>', '</p>', $pee);
  13. $pee = str_replace('<p><p>', '<p>', $pee);
  15. $pee = str_replace('</p></p>', '</p>', $pee);
  17. $pee = preg_replace('!<p>\s*(</?(?:table|ul|ol|li|pre|select|form|blockquote)> )!', "$1", $pee);
  19. $pee = preg_replace('!(</?(?:table|ul|ol|li|pre|select|form|blockquote)> )\s*</p>!', "$1", $pee);
  21. if ($br) $pee = preg_replace('|(?<!<br /> )\s*\n|', "<br />\n", $pee); // optionally make line breaks
  23. $pee = preg_replace('!(</?(?:table|ul|ol|li|pre|select|form|blockquote|p)> )<br />!', "$1", $pee);
  25. $pee = preg_replace('|<p><blockquote([^>]*)>|i', "<blockquote$1><p>", $pee);
  27. $pee = str_replace('</blockquote></p>', '</p></blockquote>', $pee);
  29. $pee = preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $pee);
  33. return $pee;


 
Qui peut m'indiquer comment je pourrais faire pour forcer Internet Explorer à positionner correctement les DIVs ?


Message édité par Gilbert Gosseyn le 18-10-2003 à 11:29:57

---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
Reply

Marsh Posté le 17-10-2003 à 22:07:41   

Reply

Marsh Posté le 17-10-2003 à 22:34:07    

Gilbert Gosseyn a écrit :

de manière à éviter d'utiliser comme auparavant la balise <></p> à l'intérieur d'une balise <div></div>, le validator du W3C n'aimant pas cela ...


Ben c'est nouveau ça  :heink:  
Les blocs acceptent très bien les blocs.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 17-10-2003 à 23:18:24    

Sauf que les paragraphes sont peut des blocs mais les DIVs sont eux des boites ...
 
Fais le test toi même et tu verras ce que te dira le validateur W3 ... (une erreur par balise <p></p> )


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
Reply

Marsh Posté le 17-10-2003 à 23:24:22    

les div sont des blocs comme les autres, ils peuvent contenir n'importe quel autre bloc.
Ton erreur vient d'ailleurs


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 17-10-2003 à 23:28:39    

PS : je viens de tester quand-même (même si je ne sais pas pourquoi) : "This Page Is Valid XHTML 1.0 Strict!"
 
Le code :
<div><p>toto</p></div>


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 17-10-2003 à 23:41:38    

Alors qpourquoi il me chiait une erreur à chaque utilisation de cette foutue balise <p> ? J'aimerais bien le savoir ...
 
Mais cela ne me renseigne pas pourquoi IE décide d'un coup de claquer un fusible ainsi ...


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
Reply

Marsh Posté le 17-10-2003 à 23:45:51    

Comme dit, ton erreur vient d'ailleurs (un formulaire peut-être), mais à cette heure-ci je n'ai pas du tout envie de lire tout ton code en détail.
 
Pour IE, je suppose que tu connais déjà ce lien : http://openweb.eu.org/articles/dimensions_boites_css/


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 17-10-2003 à 23:55:26    

Bon, j'ai remodifié la fonction pour remettre les balises <p></p> et ce n'est pas mieux. Donc l'erreur n'est pas la. Maintenant, faut la trouver ...


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
Reply

Marsh Posté le 18-10-2003 à 01:29:05    

Il me semble que j'ai trouve ton erreur ...
 
C'est normal que tu petes un fusible ...  
 
C'est une petite erreur de rien du tout ...
Regarde dans ton css, le style de classe .commentaires ...
tu ne remarques rien de bizzare ??
 

Citation :


.commentaires {
font-size: 12px;
margin-top: "px;
}  


 
Et oui, c'est tout con, mais il faudrait mettre un chiffre :P
 
En tout cas je te rassure je ne l'ai pas vu tout de suite, j'ai du passer par une methode de "barbares" ... :P
 
J'ai rajoute une ligne a la fin de ton css
" /*  */ "
Ensuite j'ai commencer par mettre un "/*" devant les styles, comme cela tous les styles jusqu'a la ligne de fin etaient mis en commentaire. Ensuite il ne restait plus qu'a reinclure les styles les uns apres les uns (ou 2 par 2). Avec cette methode "barbare" tu peux voir ou ca coince :P.
 
Pour une fois que c'est IE qui ne tolere pas les erreurs, oui d'habitude IE est bcp plus laxiste que les autres navigateurs en ce qui concerne les erreurs d'html... :P
 
Allez a plouche.


Message édité par cerel le 18-10-2003 à 01:31:45
Reply

Marsh Posté le 18-10-2003 à 11:09:01    

:ouch: ! Je corrige cela de suite ! Merci :jap: (clavier de portable :/).


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
Reply

Marsh Posté le 18-10-2003 à 11:09:01   

Reply

Marsh Posté le 18-10-2003 à 11:15:23    

Merci, c'était bien cela ...


---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4
Reply

Marsh Posté le 18-10-2003 à 11:31:19    

Tu vois, je te l'avais dit ! LOL


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed