pb compatibilite pc/mac

pb compatibilite pc/mac - Web design - Graphisme

Marsh Posté le 24-11-2004 à 12:43:11    

Bonjour !  
 
Voila ma problematique,  
j'ai concu mon site avec une css.  
Sur pc, et quelque soit le navigateur, ca colle.  
En revanche, sur mac, c'est la cata.  
Hors, il me faut à tout prix resoudre ce problème...  
 
merci de votre aide...
 
voici la css :

Code :
  1. /* CSS melangeur d'images */
  2. body {
  3. font-family:Verdana, Arial, Helvetica, sans-serif;
  4. font-size: 0.8em;
  5. margin: 0;
  6. padding: 0;
  7. background-color: #FFFFFF;
  8. }
  9. #header {
  10. height: 100px;
  11. background-color: #FFFFFF;
  12. border-top-width: 1px;
  13. border-right-width: 1px;
  14. border-bottom-width: 1px;
  15. border-left-width: 1px;
  16. border-top-color: #000000;
  17. border-right-color: #000000;
  18. border-bottom-color: #000000;
  19. border-left-color: #000000;
  20. margin: 0px;
  21. }
  22. #conteneur {
  23. position: absolute;
  24. width: 100%;
  25. background-color:#FFFFFF;
  26. left: 0px;
  27. }
  28. #centre {
  29. background-color:#FFFFFF;
  30. margin-left: 150px;
  31. margin-right: 150px;
  32. border-top-width: 1px;
  33. border-right-width: 1px;
  34. border-bottom-width: 1px;
  35. border-left-width: 1px;
  36. border-right-style: solid;
  37. border-left-style: solid;
  38. border-top-color: #000000;
  39. border-right-color: #000000;
  40. border-bottom-color: #000000;
  41. border-left-color: #000000;
  42. border-top-style: solid;
  43. }
  44. #gauche {
  45. position: absolute;
  46. left:0;
  47. width: 150px;
  48. }
  49. #droite {
  50. position: absolute;
  51. right:-1px;
  52. width: 150px;
  53. }
  54. #pied {
  55. height: 40px;
  56. background-color: #cccc99;
  57. border-top-width: 1px;
  58. border-top-style: solid;
  59. border-top-color: #000000;
  60. }
  62. h1, h2, h3, h4, h5, h6, h7 {
  63. font-family: Verdana, Arial, Helvetica, sans-serif;
  64. margin: 0px;
  65. padding: 0px;
  66. }
  67. h1{
  68. font-size: 12px;
  69. text-align: right;
  70. color: #000000;
  71. padding: 0px 3px 0px 0px;
  72. line-height: 20px;
  73. white-space: normal;
  74. margin: 0px;
  75. font-weight: bold;
  76. background-image:  url("../images/interface/fond1.gif" );
  77. background-repeat: no-repeat;
  78. }
  79. h2{
  80. font-size: 12px;
  81. text-align: left;
  82. color: #000000;
  83. padding: 0px 0px 0px 3px;
  84. line-height: 20px;
  85. white-space: normal;
  86. margin: 0px;
  87. font-weight: bold;
  88. font-family: Verdana, Arial, Helvetica, sans-serif;
  89. background-image:  url("../images/interface/fond2.gif" );
  90. }
  91. h3{
  92. font-size: 10px;
  93. color: #333333;
  94. font-family: Verdana, Arial, Helvetica, sans-serif;
  95. padding: 2px;
  96. margin: 2px;
  97. width: 470px;
  98. left: auto;
  99. right: auto;
  100. border: 1px Aucune #999999;
  101. font-weight: normal;
  102. }
  103. h4{
  104. font-size: 10px;
  105. font-weight: normal;
  106. color: #333333;
  107. font-family: Verdana, Arial, Helvetica, sans-serif;
  108. text-align: left;
  109. margin: 2px;
  110. padding: 2px;
  111. width: 90%;
  112. display: block;
  113. }
  114. h5{
  115. font-size: 14px;
  116. color: #FF9933;
  117. padding: 5px;
  118. white-space: normal;
  119. margin: 5px;
  120. font-weight: bold;
  121. font-family: Verdana, Arial, Helvetica, sans-serif;
  122. text-align: center;
  123. }
  124. h6{
  125. font-size: 12px;
  126. text-align: justify;
  127. color: #333333;
  128. padding: 5px;
  129. white-space: normal;
  130. margin: 5px;
  131. font-weight: bold;
  132. font-family: Verdana, Arial, Helvetica, sans-serif;
  133. }
  134. p {
  135. font-family: Verdana, Arial, Helvetica, sans-serif;
  136. font-size: 9px;
  137. font-weight: normal;
  138. text-align: center;
  139. }
  141. .img {
  142. padding: 2px;
  143. border: 1px solid #000000;
  144. background-color: #999999;
  145. top: 5px;
  146. left: 5px;
  147. right: 5px;
  148. bottom: 5px;
  149. margin: 2px;
  150. float: Aucune;
  151. text-align: center;
  152. clip:      rect(5px 5px 5px 5px);
  153. position: static;
  154. }
  156. .imgnew {
  157. padding: 2px;
  158. border: 1px solid #666666;
  159. background-color: #CC3300;
  160. top: 5px;
  161. left: 5px;
  162. right: 5px;
  163. bottom: 5px;
  164. margin: 2px;
  165. clip:rect(5px 5px 5px 5px);
  166. text-align: center;
  167. }
  168. a:link {
  169. font-family:Verdana, Arial, Helvetica, sans-serif;
  170. font-size:10px;
  171. color:#CC3300;
  172. text-decoration:none;
  173. font-weight: bold;
  174. }
  175. a:visited {
  176. font-family:Verdana, Arial, Helvetica, sans-serif;
  177. font-size:10px;
  178. color:#993300;
  179. font-weight: bold;
  180. text-decoration:none;
  181. font-weight: bold;
  182. }
  183. a:hover {
  184. font-family:Verdana, Arial, Helvetica, sans-serif;
  185. font-size:10px;
  186. color:#FF9933;
  187. text-decoration:none;
  188. font-weight: bold;
  189. }
  191. /*definis le menu sur la gauche de la page*/
  192. ul {list-style-type: none;}
  194. li {
  195. margin-bottom:2px
  196. }
  198. .menu a {
  199. margin: 0px 0px 0px -41px;
  200. width: 150px;
  201. height: 15px;
  202. display: block;
  203. text-align:left;
  204. text-decoration: none;
  205. color: #000;
  206. background: #fff;
  207. border-top: 1px solid #CCCCCC;
  208. border-bottom: 1px solid #CCCCCC;
  209. top: -5px;
  210. text-indent: 10px;
  211. font-family: Verdana, Arial, Helvetica, sans-serif;
  212. font-size: 10px;
  213.  }
  215. .menu a:hover {
  216. background: #999999;
  217. font-family: Verdana, Arial, Helvetica, sans-serif;
  218. font-size: 10px;
  219. font-weight: bold;
  220. color: #FFFFFF;
  221. border-top: 1px solid gray;
  222. border-right: 1px solid gray;
  223. border-bottom: 1px solid #993300;
  224. border-left: 1px solid gray;
  225.      }
  227. .menu a:active {
  228. background: gray;
  229. border: 1px solid gray;
  230. color: #fff;
  231. font-family: Verdana, Arial, Helvetica, sans-serif;
  232. font-size: 10px;
  233.      }
  235. /*definis le menu sur la droite de la page*/
  236. .menu2 a {
  237. width: 150px;
  238. height: 15px;
  239. display: block;
  240. text-align:right;
  241. text-decoration: none;
  242. color: #000;
  243. border-top: 1px solid #CCCCCC;
  244. border-right: 1px #CCCCCC;
  245. border-bottom: 1px solid #CCCCCC;
  246. border-left: 1px #CCCCCC;
  247. top: -5px;
  248. font-family: Verdana, Arial, Helvetica, sans-serif;
  249. font-size: 10px;
  250. margin-top: 0px;
  251. margin-right: 0px;
  252. margin-bottom: 0px;
  253. margin-left: -40px;
  254.  }
  256. .menu2 a:hover {
  257. background: #999999;
  258. font-family: Verdana, Arial, Helvetica, sans-serif;
  259. font-size: 10px;
  260. font-weight: bold;
  261. color: #FFFFFF;
  262. border-top: 1px solid gray;
  263. border-right: 1px gray;
  264. border-bottom: 1px solid #FF9933;
  265. border-left: 1px gray;
  266.      }
  268. .menu2 a:active {
  269. background: gray;
  270. color: #fff;
  271. font-family: Verdana, Arial, Helvetica, sans-serif;
  272. font-size: 10px;
  273. border-top: 1px solid gray;
  274. border-right: 1px gray;
  275. border-bottom: 1px solid gray;
  276. border-left: 1px gray;
  277.      }
  278. /*---------------------*/
  280. .table {
  281. border-right: 1px solid #999999;
  282. border-left: 1px solid #999999;
  283. border-top-width: 1px;
  284. border-bottom-width: 1px;
  285. border-top-style: solid;
  286. }
  288. /*definis le cadre des bannieres de pub*/
  289. .pub {
  290. font-family: Verdana, Arial, Helvetica, sans-serif;
  291. font-size: 10px;
  292. font-style: oblique;
  293. font-weight: bold;
  294. font-variant: normal;
  295. color: #666666;
  296. text-align: left;
  297. border: 1px Aucune #999999;
  298. width: 468px;
  299. margin: 2px;
  300. padding: 2px;
  301. }
  302. /*definis le texte de l'image du jour*/
  303. .imgjour {
  304. font-family: Verdana, Arial, Helvetica, sans-serif;
  305. font-size: 9px;
  306. font-weight: normal;
  307. font-variant: small-caps;
  308. text-transform: uppercase;
  309. color: #666666;
  310. text-align: left;
  311. border: 1px Aucune #999999;
  312. width: 468px;
  313. margin: 2px;
  314. padding: 2px;
  315. clear: Aucune;
  316. float: Aucune;
  317. height: auto;
  318. position: static;
  319. }
  320. /*definis le fond de la fenetre gd format */
  321. #gdft {
  322. position: absolute;
  323. height: 618px;
  324. width: 800px;
  325. border: 1px solid #333333;
  326. background: #999999;
  327. font-family: Verdana, Arial, Helvetica, sans-serif;
  328. font-size: 14px;
  329. font-style: normal;
  330. font-weight: bold;
  331. font-variant: normal;
  332. text-transform: uppercase;
  333. }
  334. /*Balise de l'image en gd format*/
  335. .img3 {
  336. margin: 5px 5px;
  337. border: 1px solid #FFFFFF;
  338. background-color: #CCCC99;
  339. top: 5px;
  340. left: 5px;
  341. right: 5px;
  342. bottom: 5px;
  343. }
  344. .table2 {
  345. border: 1px solid #999999;
  346. }
  347. .entete3souligne {
  348. font-size: 10px;
  349. color: #333333;
  350. font-family: Verdana, Arial, Helvetica, sans-serif;
  351. padding: 2px;
  352. margin: 2px;
  353. width: 470px;
  354. left: auto;
  355. right: auto;
  356. font-weight: normal;
  357. border-top: 1px #666666;
  358. border-right: 1px #666666;
  359. border-bottom: 1px solid #666666;
  360. border-left: 1px #666666;
  361. }
  362. #vignette {
  363. background-color:#FFFFFF;
  364. width: 490px;
  365. border: 1px Aucune #000000;
  366. padding-left: 20px;
  367. padding-top: 10px;
  368. }
  369. .img4 {
  370. padding: 2px;
  371. border: 1px solid #000000;
  372. background-color: #999999;
  373. top: 5px;
  374. left: 5px;
  375. right: 5px;
  376. bottom: 5px;
  377. margin: 5px;
  378. float: Aucune;
  379. text-align: left;
  380. clip:      rect(5px 5px 5px 5px);
  381. position: static;
  382. }
  383. .portrait {
  384. padding: 5px;
  385. border: 1px solid #000000;
  386. background-color: #999999;
  387. top: 5px;
  388. left: 5px;
  389. right: 5px;
  390. bottom: 5px;
  391. margin: 0px 10px 10px;
  392. float: left;
  393. text-align: left;
  394. clip:      rect(5px,5px,5px,5px);
  395. position: static;
  396. clear: left;
  397. }

Reply

Marsh Posté le 24-11-2004 à 12:43:11   

Reply

Marsh Posté le 24-11-2004 à 13:31:22    

et si t'expliquais plutôt la problématique exactement ?

Reply

Marsh Posté le 24-11-2004 à 13:40:20    

Je te dis ce qui m'as été rapporté au tel par un utilisateur mac :  
toutes les images sont absentes.
 
Si des utilisateurs Mac passe par mon site, je veux un rapport plus précis...

Reply

Marsh Posté le 24-11-2004 à 14:00:24    

en effet, tout est blanc concernant la partie image, ya bien les liens... je passe la main... bon courage :)

Reply

Marsh Posté le 24-11-2004 à 14:06:37    

Merci tout de même :)

Reply

Marsh Posté le 24-11-2004 à 15:57:58    

Code :
  1. float: Aucune;


 
c'est censé fonctionner ça ? [:mlc]

Reply

Marsh Posté le 24-11-2004 à 16:03:47    

faut que je vire la ligne ou que je change la valeur ?

Reply

Marsh Posté le 24-11-2004 à 16:16:01    

ben ça dépends comment tu veux la positionner, mais "aucune" je ne crois pas que ça fasse partie des standards du w3c :D

Reply

Marsh Posté le 24-11-2004 à 16:34:28    

voui, en effet.... c'est pas vraiment dans les standards...  
bin, je vais viré, ont va ce que cela dis...  

Reply

Marsh Posté le 24-11-2004 à 22:03:13    

passe ton css au validateur du w3c, il va te sortir tout ce qui n'est pas standard, déjà :)

Reply

Sujets relatifs:

Leave a Replay

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