Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2491 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème Design sous IE7

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème Design sous IE7

n°1835648
noote
Posté le 08-01-2009 à 15:54:47  profilanswer
 

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 .
 
 
 
 

mood
Publicité
Posté le 08-01-2009 à 15:54:47  profilanswer
 

n°1835649
FlorentG
Posté le 08-01-2009 à 15:55:39  profilanswer
 

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

n°1835661
noote
Posté le 08-01-2009 à 16:06:24  profilanswer
 

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

n°1835663
FlorentG
Posté le 08-01-2009 à 16:08:39  profilanswer
 
n°1835667
noote
Posté le 08-01-2009 à 16:13:49  profilanswer
 

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. }

n°1835675
FlorentG
Posté le 08-01-2009 à 16:22:16  profilanswer
 

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à

n°1835685
noote
Posté le 08-01-2009 à 16:34:25  profilanswer
 

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

n°1835690
FlorentG
Posté le 08-01-2009 à 16:37:55  profilanswer
 

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

n°1835694
noote
Posté le 08-01-2009 à 16:42:18  profilanswer
 

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

n°1835696
noote
Posté le 08-01-2009 à 16:43:44  profilanswer
 

C'est une interprétation différente ?

mood
Publicité
Posté le 08-01-2009 à 16:43:44  profilanswer
 

n°1835697
FlorentG
Posté le 08-01-2009 à 16:48:04  profilanswer
 

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.
 

n°1837005
cuby
Posté le 12-01-2009 à 17:47:38  profilanswer
 

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
n°1837031
FlorentG
Posté le 12-01-2009 à 18:23:14  profilanswer
 

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

n°1837033
FlorentG
Posté le 12-01-2009 à 18:29:21  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème Design sous IE7

 

Sujets relatifs
probleme xsl[RESOLU] Probleme synchro thread
[Résolu][C] probleme avec une macroProblème à centrer une image [RESOLU]
Balise Object probleme IE[SGBD/SQL] probleme d'espace oracle8i
probleme avec un combobox[ACCESS] Problème requête et valeur par défaut
Probleme avec DATE_FORMAT au changement d'annéeprobleme c++ installation qt
Plus de sujets relatifs à : Problème Design sous IE7

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.070 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)