Compatibilité avec IE [Résolu]

deicide · 01/05/2011, 22h42

Bonjour,
j'ai un soucis de marges comme d'habitude FF OK / IE à la ramasse
j'ai cherché mais sans succès dans le code j'ai mis mes marges à 0 rien n'y fait
en désespoir de cause je poste ici en espérant etre dans le bon forum

cordialement

pour visualiser mon soucis voici le lien http://www.testnews.0fees.net/

le code CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
html {height:100%;} 
body {margin:0; padding:0;background:url(images/body.gif); height:100%} 
table, td {border-collapse:collapse; width:100%; height:100%} 
table, td, img {border:0; padding:0; vertical-align:top} 
form, td{margin:0; padding:0;} 
td, select{font:11px tahoma, arial, helvetica, sans-serif; color:#959677; vertical-align:top;  text-align:left; line-height:14px} 
.table{ height:100%; } 
 
img{ vertical-align:top}  
/*in_line_style*/ 
 
.main_table{ width:100%;} 
.site_center{text-align:center; width:100%;} 
.site_center1{margin:0 auto; text-align:left; width:766px;} 
 
p{ margin:0; padding:0} 
 
a{ color:#959677; text-decoration:underline} 
a:hover{ text-decoration:none} 
 
strong a{ color:#959677; text-decoration: none; background:url(images/marker.gif) no-repeat 0 5px; padding-left:12px} 
strong a:hover{ text-decoration:underline} 
 
.separate{ background: url(images/separate.gif) repeat-x; width:auto; height:12px} 
 
 
ul { margin:0; padding:0; list-style:none;} 
ul li { background:url(images/list_bg.gif) no-repeat 0 9px; margin:0; padding:0 0 0 12px;} 
ul li a {line-height:19px; color:#918a81; text-decoration:underline; text-transform:uppercase} 
ul li a:hover{ text-decoration:none} 
 
.title, .title_top, .title_bot, .title_left, .title_right, .img, .img1 {display:block} 
 
.bottom{ background: url(images/bottom.gif) repeat-y} 
 
.main{ height:800px} 
 
 
/*header*/ 
#header{ height:130px} 
#header .col1{ width:179px; background:url(images/head_left.gif) no-repeat} 
#header .col1 img{ display:block; margin:55px 0 0 61px} 
#header .col2{ width:409px; background:url(images/logo_bg.jpg) no-repeat; text-align:center} 
#header .col3{ width:178px; background:url(images/head_right.gif) no-repeat} 
 
/*content*/ 
#content{ height:611px}  
#content .col1{ width:159px; padding-top:192px; background:url(images/shape_left.gif) repeat-y right top} 
#content .col1 img{ display:block; margin:0 0 4px 16px} 
#content .col2{ width:449px; background:#fbfce6} 
#content .col3{ width:158px; padding-top:192px; background:url(images/shape_right.gif) repeat-y} 
#content .col3 img{ display:block; margin:0 0 4px 18px} 
 
#content .wrapper{ margin:0 13px 0 13px; width:423px} 
#content .wrapper .row1{ height:13px} 
#content .wrapper .row2{ background:#e7e8cf; height:585px;} 
#content .wrapper .row3{ height:13px} 
 
 
/*footer*/ 
#footer{ height:59px; background: url(images/bottom.gif) repeat-y; vertical-align:middle} 
#footer .foot{ background:url(images/foot_shape.gif) no-repeat center top; color:#b1b28f; text-align:center; height:59px; vertical-align:middle} 
#footer .foot a{ color:#b1b28f; text-decoration:underline} 
#footer .foot a:hover{ text-decoration:none} 
 
 
/*index.html*/ 
#page1 #content .col2 { text-align:center; vertical-align:middle} 
/*index-1.html*/

et HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title></title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body id="page1"> 
<table class="main_table"> 
    <tr> 
        <td class="site_center"> 
            <table  class="site_center1"> 
                <tr> 
                    <td class="main"> 
                        <table> 
                            <tr> 
                                <td> 
                                    <table id="header"> 
                                        <tr> 
                                            <td class="col1"><a href="index-6.html"><img src="images/contact.gif" alt="" /></a></td> 
                                            <td class="col2"><a href="index.html"><img src="images/logo.jpg" alt="" /></a></td> 
                                            <td class="col3"></td> 
                                        </tr> 
                                    </table> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td> 
                                    <table id="content"> 
                                        <tr> 
                                            <td class="col1"><a href="index-1.html"><img src="images/m1.gif" alt="" /></a><a href="index-2.html"><img src="images/m2.gif" alt="" /></a><a href="index-3.html"><img src="images/m3.gif" alt="" /></a></td> 
                                            <td class="col2"><img src="images/splash_picture.jpg" alt="" /></td> 
                                            <td class="col3"> 
                                                <a href="index-4.html"><img src="images/m4.gif" alt="" /></a><a href="index-5.html"><img src="images/m5.gif" alt="" /></a><a href="index-6.html"><img src="images/m6.gif" alt="" /></a>                                            </td> 
                                        </tr> 
                                    </table> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td id="footer"> 
                                    <table> 
                                        <tr> 
                                            <td class="foot"></td> 
                                        </tr> 
                                    </table> 
                                </td> 
                            </tr> 
                        </table> 
                    </td> 
                </tr> 
                <tr> 
                    <td class="bottom"></td> 
                </tr> 
            </table> 
        </td> 
    </tr> 
</table> 
</body> 
</html>

Bisûnûrs · 02/05/2011, 09h43

Il y a actuellement 4 versions de IE sur le marché, donc il serait pas inutile de dire sur quelle version tu vois ton problème.
En regardant ton code vite fait, je pense qu'il s'agit juste d'un passage en mode Quirks à cause de la déclaration XML en début de document. Supprime-la et dis-nous si tu as encore le problème.

deicide · 02/05/2011, 10h52

Bien vu en effet IE passerai en mode quirks pour une page avec un DOCTYPE XHTML précédé de la déclaration XML
j'ai donc supprimé la déclaration XML mais c'est sans effet...

pour info mon probleme apparait au moins sous IE 9
pas testé les autres version ni opéra

(et encore merci car là je suis ~~un peu~~ perdu)

Bisûnûrs · 02/05/2011, 11h17

C'est à cause des height:100% sur les td.

A mon avis, tu devrais revoir toute ta mise en page et éviter les tableaux.

deicide · 02/05/2011, 11h35

Je suis de ton avis les tableau, c'est mal
un tableau c'est pour mettre des données

sauf que je suis un noob et que j'utilise un template qui comporte certaines erreurs (xhtml strict avec de attributs)

je ne suis pas graphiste dans l'âme donc ca me facilite vraiment la vie de reprendre le travail de qq1 d'autre (psd -> html)

j'ai pas les moyens de payer une boite pour réaliser mon projet donc je me tire de balles toutes les nuits dessus et je viens pleurer ici apres...

deicide · 03/05/2011, 14h41

Citation:

Envoyé par Bisûnûrs

Il y a actuellement 4 versions de IE sur le marché, donc il serait pas inutile de dire sur quelle version tu vois ton problème.

Mon probleme survient sur IE 9 mais je n'ai pas testé sur d'autres versions

Bisûnûrs · 03/05/2011, 14h52

Citation:

Envoyé par Bisûnûrs

C'est à cause des height:100% sur les td.

deicide · 03/05/2011, 15h01

Citation:

Envoyé par Bisûnûrs

Citation:
Envoyé par Bisûnûrs Voir le message
C'est à cause des height:100% sur les td.

DESOLé

je ne sais pas comment j'ai pu passer à coté et répondre au reste!

MERCI pour la réponse
ET MERCI pour me l'avoir répété

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
html {height:100%;} 
body {margin:0; padding:0;background:url(images/body.gif); height:100%} 
table, td {border-collapse:collapse; width:100%; height:100%}

02/05/2011, 09h43	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Il y a actuellement 4 versions de IE sur le marché, donc il serait pas inutile de dire sur quelle version tu vois ton problème. En regardant ton code vite fait, je pense qu'il s'agit juste d'un passage en mode Quirks à cause de la déclaration XML en début de document. Supprime-la et dis-nous si tu as encore le problème.
	00

02/05/2011, 10h52	#3
deicide Invité de passage Inscription : mai 2011 Messages : 5 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : mai 2011 Messages : 5 Points : 1 Points : 1	Bien vu en effet IE passerai en mode quirks pour une page avec un DOCTYPE XHTML précédé de la déclaration XML j'ai donc supprimé la déclaration XML mais c'est sans effet... pour info mon probleme apparait au moins sous IE 9 pas testé les autres version ni opéra (et encore merci car là je suis ~~un peu~~ perdu)
	00

02/05/2011, 11h17	#4
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	C'est à cause des height:100% sur les td. A mon avis, tu devrais revoir toute ta mise en page et éviter les tableaux.
	00

02/05/2011, 11h35	#5
deicide Invité de passage Inscription : mai 2011 Messages : 5 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : mai 2011 Messages : 5 Points : 1 Points : 1	Je suis de ton avis les tableau, c'est mal un tableau c'est pour mettre des données sauf que je suis un noob et que j'utilise un template qui comporte certaines erreurs (xhtml strict avec de attributs) je ne suis pas graphiste dans l'âme donc ca me facilite vraiment la vie de reprendre le travail de qq1 d'autre (psd -> html) j'ai pas les moyens de payer une boite pour réaliser mon projet donc je me tire de balles toutes les nuits dessus et je viens pleurer ici apres...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email