[CSS] IE n'aime pas mon code...

IE n'aime pas mon code... [CSS] - HTML/CSS - Programmation

Marsh Posté le 28-09-2005 à 20:00:54    

Bonsoir à tous,
 
Je suis en train de créé un petit site tout simple, avec une mise en page dans les normes (enfin je pense), et une CSS correcte.
Seulement comme rien n'est parfait, mon site ne passe pas du tout comme il faudrait sous IE, alors que Mozilla, Opera l'affiche correctement.
 
Pour avoir un aperçu de la page:
 
-
 
(j'ai rempli les paraphs avec du dummy, fallait bien qu'il y ait un semblant de contenu  ;) )
 
Raccourci vers la feuille de style:
 
-
 
Si qqn pouvait m'aider ça serait sympa :)


Message édité par ANViL le 18-05-2008 à 17:23:33
Reply

Marsh Posté le 28-09-2005 à 20:00:54   

Reply

Marsh Posté le 28-09-2005 à 20:27:34    

Passe en xhtml 1.0 strict pour ta DTD pour avoir le modele de boite Strict du w3c sur IE et gecko ... tu auras deja moins de surprise peut-etre :)

Reply

Marsh Posté le 28-09-2005 à 20:33:16    

Ok c'est fait, mais ça ne résoud apperemment rien  :(
 
Je ne comprends pas pourquoi IE distortionne la boite (quoiqu'avec le nombre de bugs CSS d'iE plus rien ne m'étonne), la largeur est fixée pourtant  :??:


Message édité par ANViL le 28-09-2005 à 20:34:59
Reply

Marsh Posté le 28-09-2005 à 20:37:12    

Réduit de peux la taille du contenu de droite....;)


Message édité par xtof_83 le 28-09-2005 à 20:37:31
Reply

Marsh Posté le 28-09-2005 à 20:44:18    

Voilà c'est fait,  
 
mais bon, c'est pas vraiment une solution:
 
- les boites (div) des listes de menus sont trop larges par rapport aux autres (le titre 'ADMIN' et celle contenant la photo du GSM) donc ça ne rend pas très bien :sweat:
 
- Ensuite (toujours dans les mystères d'IE) il me saccage le pied de page, que j'ai pourtant déclaré correctement avec un clear: both
 
Je désespère d'arriver à une solution potable pour les usagers d'IE...

Reply

Marsh Posté le 28-09-2005 à 20:47:40    

Ben les % sous IE c'est pas top...alors soit tu met le menu en dure et le reste n flottant et ce sera mieux
 
 
Moi je pense c'est le plus logique...

Reply

Marsh Posté le 28-09-2005 à 20:52:06    

Mais le truc c'est que j'ai déjà essayé de mettre une largeur fixe pour le menu (et même de le mettre en position fixe plutot que flottante, c'est ce que j'avais fais initialement) mais ça foirait déjà ! J'ai essayé plusieurs dispositions différentes (absolue, relative...) IE me rajoute toujours 2% de largeur en trop.
 
IE <- :gun:


Message édité par ANViL le 28-09-2005 à 20:52:23
Reply

Marsh Posté le 28-09-2005 à 20:53:24    

_margin:0px
_padding:0px

Reply

Marsh Posté le 28-09-2005 à 21:11:14    

j'ai remplacé les occurences existantes de margin: 0px ainsi que padding: 0px par ce que tu as indiqué, mais ça ne change rien.
 
C'est un hack pour IE ? et ou faudrait-il le placer pour que ça fonctionne ?

Reply

Marsh Posté le 28-09-2005 à 21:17:00    

tu vires la merde que xtof t'a filé, c'est du bidouillage sans reflexion
 
ensuite quand on fait une CSS
on se casse pas la tete, on vire les marges externes (margin) et les marges internes (padding) de tous les éléments
 
* {
  padding: 0;
  margin: 0;  
 }
 
ton problème vient surtout du fait que pour UL
sous IE c'est un margin qui est effectué pour le décalage
alors que sous Gecko (FF..) c'est un padding qui est effectué (qui a mon sens est plus juste)
 
donc soit tu vires les padding/margin pour TOUS tes éléments ou tu l'applique que au UL de ton menu

Message cité 1 fois
Reply

Marsh Posté le 28-09-2005 à 21:17:00   

Reply

Marsh Posté le 28-09-2005 à 21:29:15    

j'ai corrigé une petite largeur, même si ca fait foirer un peu sous ie en 640x480, c'est passage. Mais je pense que tu aurais du te contenter d'un layout fixe. C'est chiant les layout fluides

Code :
  1. /* BLOCS PRINCIPAUX */
  3. * {
  4.    padding: 0;
  5. margin: 0;
  6. }
  8. body {
  9. background: url(images/background.jpg) fixed no-repeat top left;
  10. text-align: center;
  12. }
  14. .conteneur {
  15. width: 100%;
  16. }
  18. #main {
  19. margin: 10px auto;
  20. width: 80%;
  21. border: 1px black solid;
  22. background: rgb(160,159,152);
  23. }
  26. /* HEADERS 1-6 */
  29. h1,h2,h3 {
  30. margin: 0px;
  31. padding: 1em 0em;
  32. border: 1px black none;
  33. border-bottom-style: solid;
  34. }
  36. h1 {
  37. background: url(images/header1_gradient.jpg) repeat-x top left;
  38. font: normal 25px Verdana, sans-serif;
  39. text-align: center;
  40. }
  42. h2 {
  43. background: rgb(190,190,190);
  44. font: bold 16px Verdana, sans-serif;
  45. text-align: left;
  46. text-indent: 30px;
  47. }
  49. h3 {
  50. font: bold 11px Verdana, sans-serif;
  51. border-bottom-style: none;
  52. }
  54. h4,h5 {
  55. background: rgb(178,186,195) url(images/header_gradient.jpg) repeat-y top right;
  56. font: bold 10px Verdana, sans-serif;
  57. vertical-align: middle;
  58. border: 1px black none;
  59. color: rgb(45,63,85);
  60. line-height: 20px;
  61. text-indent: 20px;
  62. text-align: left;
  63. margin: 0px;
  64. }
  66. h4 {
  67. border-bottom-style: solid;
  68. }
  70. h5 {
  71. border-bottom-style: solid;
  72. border-top-style: solid;
  73. }
  75. h6 {
  76. background: rgb(100,100,100);
  77. font: bold 10px Verdana, sans-serif;
  78. color: rgb(200,200,200);
  79. border-top: 1px black solid;
  80. text-align: center;
  81. margin: 0px;
  82. padding: 0.5em 0em;
  83. clear: both;
  84. }
  87. /* PARAGRAPHES */
  90. p {
  91. margin: 0px;
  92. padding: 0.5em 0em;
  93. }
  95. #conteneur_menu_gauche {
  96. float: left;
  97. width: 18%;
  98. }
  101. /* MENU GAUCHE 1 */
  104. #liste_haut {
  105. border: 1px black solid;
  106. border-left: none;
  107. font: bold 12px Verdana, sans-serif;
  108. }
  110. #liste_haut ul {
  111. list-style: none;
  112. border: none;
  113. }
  115. #liste_haut li {
  116. text-indent: 15px;
  117. text-align: left;
  118. }
  120. #liste_haut li a {
  121. border-left: 15px solid rgb(38,75,113);
  122. background: rgb(220,220,220);
  123. color: rgb(130,130,130);
  124. vertical-align: middle;
  125. text-decoration: none;
  126. line-height: 32px;
  127. display: block;
  128. width: 100%;
  129. }
  131. html>body #liste_haut li a {
  132. width: auto;
  133. }
  135. #liste_haut li a:hover {
  136. border-left: 15px rgb(245,153,14) solid;
  137. background-color: rgb(205,205,205);
  138. color: black;
  139. }
  142. /* PAGE DROITE */
  145. #page_droite {
  146. float: right;
  147. width: 78%;
  148.    margin-right:0.5%;
  149. border: 1px black solid;
  150. margin-bottom: 10px;
  151. background: rgb(200,200,200) url(images/texte_gradient.jpg) repeat-y top right;
  152. }
  154. .texte_page {
  155. font: normal 14px Verdana, sans-serif;
  156. margin: 10px 20px;
  157. text-align: left;
  158. color: black;
  159. }
  162. /* MENU GAUCHE 2 */
  165. #admin_cpl {
  166. border: 1px black solid;
  167. border-left: none;
  168. font: bold 12px Verdana, sans-serif;
  169. margin: 10px 0px;
  170. }
  172. #admin_cpl ul {
  173. list-style: none;
  174. border: none;
  175. margin: 0;
  176. padding: 0;
  177. }
  179. #admin_cpl li {
  180. margin: 0;
  181. text-indent: 15px;
  182. text-align: left;
  183. }
  185. #admin_cpl li a {
  186. display: block;
  187. vertical-align: middle;
  188. line-height: 32px;
  189. border-left: 15px solid rgb(38,75,113);
  190. background: rgb(220,220,220);
  191. color: rgb(130,130,130);
  192. text-decoration: none;
  193. width: 100%;
  194. }
  196. html>body #admin_cpl li a {
  197. width: auto;
  198. }
  200. #admin_cpl li a:hover {
  201. border-left: 15px rgb(23,115,253) solid;
  202. background: rgb(205,205,205);
  203. color: black;
  204. }
  207. /* BLOCS ANNEXES */
  210. #admin_cpl_header {
  211. text-align: left;
  212. text-indent: 30px;
  213. border: 1px black solid;
  214. border-left-style: none;
  215. font: bold 16px Verdana, sans-serif;
  216. margin: 10px 0px;
  217. background: rgb(190,190,190);
  218. }
  220. #astel_logo {
  221. text-align: center;
  222. border: 1px black solid;
  223. border-left-style: none;
  224. margin: 10px 0px;
  225. padding: 15px 0px;
  226. background: rgb(190,190,190);
  227. }

Reply

Marsh Posté le 28-09-2005 à 21:44:25    

gatsusat a écrit :

tu vires la merde que xtof t'a filé, c'est du bidouillage sans reflexion


 :cry:  :cry:  :cry:  :cry:  
 
:lol: je doute bien que ce truc est de la merde...mais j'avais vu ça sur un des sites des cadors...
 
Enfin n'étant pas accepter par xhtml1.1 je pense que je vais devoirt y remedier...
 
C'est quoi the Soluce...la même que tu viens d'éxposer.??
 


Message édité par xtof_83 le 28-09-2005 à 21:52:20
Reply

Marsh Posté le 28-09-2005 à 21:55:43    

Merci pour les explications.
 
Pour la technique de virer tous les padding / margin directement avec un * c'est pas mal, je n'y avait pas pensé.
 
Mais sinon, je ne saisi pas très bien la solution fournie (j'ai supprimé les margin & padding comme indiqué, et j'ai c/c le reste des modifications que tu avais effectué, mais le problème persiste sous IE, j'ai toujours la largeur non respectée par rapport aux autres blocs de gauche)
 
Les blocs flottants sont peut-être chiants, mais c'est tout ce que j'ai trouvé pour faire un design tel que celui là.

Reply

Marsh Posté le 28-09-2005 à 21:58:35    

Ben tu veux quoi sous IE, sa marche bien chez moi....???
 
EDIT : en petit taille c'est vrais que sa bugue..
 
Comme dis précédement menu, width:FIXE
 
C'est mieux, car parait il sous grosse résolution parfois ça fait des trucs affreux... :sarcastic:


Message édité par xtof_83 le 28-09-2005 à 22:00:35
Reply

Marsh Posté le 28-09-2005 à 22:02:28    

ANVIL as tu pensé au boxModel Microsoft ?
c'est à dire :  
 
BoxModel Microsoft :  
Quand tu fais un width, le width concerne le padding, le border et le contenu
 
BoxModel W3C, un width ne concerne que le contenu.
donc la largeur d'une boite sera Width+padding+border
 
http://openweb.eu.org/articles/dimensions_boites_css/

Reply

Marsh Posté le 28-09-2005 à 22:05:16    

Chez moi c'est toujours décalé par rapport aux autre boites tel que '.ADMIN'
 
http://img258.imageshack.us/img258 [...] est8ec.jpg
 
EDIT: gatsusat, je n'y avais pas songé, je vais regarder ça de suite


Message édité par ANViL le 28-09-2005 à 22:06:34
Reply

Marsh Posté le 28-09-2005 à 22:36:06    

Yeepee !
-> j'ai modifié le design de sorte que tous les navigateurs (et surtout IE) s'accorde sur la largeur.
 
(En gros j'ai utilisé un background pour reproduire les bordures - que le boxModel MS comptabilisait dans la largeur :gun:  - et les effets de hover, et là c'est good)
 
Vives les conventions du W3C non respectées  :sweat:

Reply

Marsh Posté le 29-09-2005 à 17:39:47    

tu aurais pu utilisé un hack ... plutot que des images pour les bordures :  
 
http://www.communitymx.com/content [...] 53B6F20B41
 
@+


---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 29-09-2005 à 19:22:08    

oué  
A {
border-left:15px;
width:85px; /*Pour tout le monde, 85+15=100*/
_width:100px; /*Pour cette grosse pute de IE*/
}

Reply

Sujets relatifs:

Leave a Replay

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