Problème Design sous IE7

Problème Design sous IE7 - HTML/CSS - Programmation

Marsh Posté le 08-01-2009 à 15:54:47    

Bonjour je réalise actuellement un site pour ma société et je rencontre un petit soucis,ou plutôt gros soucis .
 
Car le design ne s'adapte pas sous IE à ce que je fais donc je ne comprends vraiment pas .
 
Je précise que ma page fonctionne parfaitement sous ==>Mozilla,Safari,Chrome,Opéra sans aucun problème.
 
Mais sur IE il foire,je n'obtiens pas le résultat souhaité.
 
Donc si quelqu'un de calé en CSS peut m'aider ...Car vraiment je ne vois pas d'où cela peut provenir .
 
En gros pour résumé design centrer sur la page avec bords arrondi sur les 4 coins.
 
Sur IE le design ne se centre pas et les bords arrondi sont bien positionner sur 3 coins mais pas le quatrième,et il y a un décalage entre les coins et le contenu de la page .
 
 
 
 

Reply

Marsh Posté le 08-01-2009 à 15:54:47   

Reply

Marsh Posté le 08-01-2009 à 15:55:39    

Envoi du code ou un lien vers la page qu'on examine ça

Reply

Marsh Posté le 08-01-2009 à 16:06:24    

j'envoi le css ca peut aller avec screen des 2 situations,j'ai pas de lien vers page,je travail en local

Reply

Marsh Posté le 08-01-2009 à 16:08:39    

Reply

Marsh Posté le 08-01-2009 à 16:13:49    

FlorentG a écrit :

ouais vas-y


 
Sous IE sa donne =>
[img=http://img181.imageshack.us/img181/7072/92140343rz6.th.jpg]
 
Sous Opéra,mozilla,Chrome,safari sa donne ==>
[img=http://img179.imageshack.us/img179/4025/otherri7.th.jpg]
 
Mon css c'est ==>
 

Code :
  1. body {
  2.   background:url(../img/slice.jpg) repeat-x #145c59 ;
  3. }
  7. #super_container {
  8.   margin : auto;
  9.   width : 800px;
  10.   }
  13. #container
  14. {
  15.   width:100%;
  16.   margin-bottom:10px;
  17.   float:left;
  19. }
  21. #top {
  22.   background-color : #fff;
  23.   width : 780px;
  24. height : 10px;
  25.   float:left;
  26. }
  28. #top_left {
  29.   background:url("../img/coin_top_left.gif" ) no-repeat;
  30.   width : 10px;
  31.   height : 10px;
  32.   float:left;
  33. }
  35. #top_right {
  36.   background:url("../img/coin_top_right.gif" ) no-repeat;
  37.   width : 10px;
  38.   height : 10px;
  39.   float:left;
  40. }
  42. #container_small {
  43.   background-color : #fff;
  44.   float:left;
  45.   width : 760px;
  46.   padding-right:20px;
  47.   padding-left:20px;
  48.   padding-top:10px;
  50. }
  52. #baniere
  53. {
  54. background:url(../img/logolncr.jpg) no-repeat #fff;
  55. width:654px;
  56. height:130px;
  57. float:right;
  58. padding-left:106px;
  59. padding-top:20px;
  60. }
  62. #baniere_title
  63. {
  64. width:320px;
  65. font-size:32px;
  66. text-align:center;
  67. font-family : "Myriad pro","Trebuchet";
  68. font-style : italic;
  69. }
  71. #header_small
  72. {
  73.   float:right;
  74.    font-family : "Myriad pro","Trebuchet";
  75.  
  76.    font-size : 12px;
  77.    font-style : italic;
  78.    color:rgb(104,104,104);
  79. }
  81. #header_small a {
  82. color : rgb(104,104,104);
  83. text-decoration : none;
  85. }
  87. #menu
  88. {
  89. margin-top:20px;
  90. background:url(../img/barremenu.gif) no-repeat #fff;
  91. /*background:#dae;*/
  92. width:765px;
  93. float:right;
  94. height : 35px;
  95. margin-bottom:20px;
  96. }
  98. hr
  99. {
  100.   height:1px;
  101.   border:0px;
  102.   background:rgb(176,176,176);
  103.   width : 720px;
  104.  
  105. }
  107. #content
  108. {
  109. background:#fff;
  110. width:760px;
  111. float:right;
  112. margin: auto;
  113. /*height: 400px;*/
  114. text-align : center;
  115. }
  117. #illustration
  118. {
  119. background:url(../img/image.jpg);
  120. width:740px;
  121. height:130px;
  122. margin: auto;
  123. }
  126. #bottom_left {
  127.   background:url("../img/coin_bottom_left.gif" ) no-repeat;
  128.   width : 10px;
  129.   height : 10px;
  130.   float:left;
  131. }
  133. #tete_logo_lncr {
  134.   background:url("../img/logolncr.jpg" ) no-repeat;
  135.   margin-top : 20px;
  136.   margin-left : 20px;
  137. }
  140. #bottom {
  141.   background-color : white;
  142.   width : 780px;
  143.   height : 10px;
  144.   float:left;
  145. }
  147. #bottom_right {
  148.   background:url("../img/coin_bottom_right.gif" ) no-repeat;
  149.   width : 10px;
  150.   height : 10px;
  151.   float:left;
  152. }
  154. #footer {
  156. }
  158. .right {
  159. margin-top : 10px;
  160. float : right;
  161. color :rgb(104,104,104);
  162.    font-family : "Myriad pro","Trebuchet";
  163.    font-size : 13px;
  164. font-style : italic;
  165. }
  167. .left {
  168. margin-top:10px;
  169. float : left;
  170. color : rgb(104,104,104);
  171. font-family : "Myriad pro";
  172. font-size : 13px;
  173. font-style : italic;
  174. }
  176. .left a {
  177. color : rgb(104,104,104);
  178. text-decoration : none;
  179. font-family: "Myriad pro","Trebuchet";
  181. }
  183. #sub_foot
  184. {
  185. text-align :center;
  186. float : bottom;
  187. color : rgb(40,40,40);
  188. font-family: "Myriad pro","Trebuchet";
  189. font-size : 13px;
  190. }
  192. #sub_foot a {
  193. color : rgb(40,40,40);
  194. text-decoration : none;
  195. font-family: "Myriad pro","Trebuchet";
  196. font-size : 13px;
  197. }
  201. #index {
  202. }
  204. #index h1 {
  205. color : rgb(176,176,176);
  206. font-family : "Myriad Pro","Trebuchet MS";
  207. font-style: italic;
  208. }

Reply

Marsh Posté le 08-01-2009 à 16:22:16    

Les coins, ne les mets pas en float, mais utilise la position absolute.
 
Au niveau du code HTML, attention de ne pas avoir de prologue xml, et d'avoir un bon DOCTYPE, ça peut venir de là

Reply

Marsh Posté le 08-01-2009 à 16:34:25    

ok,merci,je vais essayer  
pour le doctype j'ai bien ca ==>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
dans mon header.tpl

Reply

Marsh Posté le 08-01-2009 à 16:37:55    

Ouais ça c'est pas très bon, remplace-le par :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Ca sera déjà un bon début

Reply

Marsh Posté le 08-01-2009 à 16:42:18    

C bon ca fonctionne lol merci,mais le soucis c'est que je ne comprends pas trop pourquoi

Reply

Marsh Posté le 08-01-2009 à 16:43:44    

C'est une interprétation différente ?

Reply

Marsh Posté le 08-01-2009 à 16:43:44   

Reply

Marsh Posté le 08-01-2009 à 16:48:04    

En gros, si tu ne mets pas un doctype comme ça (ça sert à préciser quel "grammaire" utiliser), les navigateurs basculent dans un mode de compatibilité, et s'amusent à simuler plein de vieux bugs.
 
Ainsi quand ils ont sorti IE6, ils avaient fait plein de modifs au niveau du rendu des CSS. Du coup plein de site ne se serait pas affiché bien.  
 
Mais ça aurait été fort dommage de se priver des nouveaux trucs CSS, donc fallait trouver un moyen de ne pas casser les sites existants, tout en permettant au développeur d'activer les nouvelles fonctionnalités et correction de bugs et tout.
 
Et quasiment tous les sites n'avait pas ce doctype. Donc ils se sont dit, aller hop, ceux qui mettent un vrai doctype propre doivent connaître leur métier, ça activera le nouveau mode de rendu.
 

Reply

Marsh Posté le 12-01-2009 à 17:47:38    

Salut FlorentG,
 
Vas sur www.w3schools.com >> XHTML >> Doctype.
 
Prends le doctype de type XHTML Transitional. En gros, le doctype définit les règles d'interprétation de ta page. En utilisant ce doctype, tu auras "presque" le même rendu sous tous les navigateurs modernes (IE6 (parfois) et 7 (presque toujours), Firefox, Opera, Safari et Chrome).
 
Cela te fera gagner en temps et en effort ;)


---------------
Jeu de foot
Reply

Marsh Posté le 12-01-2009 à 18:23:14    

C'est pas à moi qu'il faut dire ça, hein [:pingouino]

Reply

Marsh Posté le 12-01-2009 à 18:29:21    

Et il à l'air d'utiliser de l'HTML, pas de l'XHTML :)
 
Et pis moi j'utilise un doctype strict, et je le connaît par cœur, pas besoin de w3schools :o

Reply

Sujets relatifs:

Leave a Replay

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