Css catastrophique sur IE 6
Bonjour à tous!
Tout est dans le titre... Je suis sous mac, j'ai donc testé mon site sous firefox et safari, pas de problème. Je viens de le regarder sur IE 6 pc et c'est n'importe quoi...
L'adresse de mon site c'est http://sandeedesign.free.fr et et j'ai mis une saisie d'écran de mon essai ie à http://sandeedesign.free.fr/ie/ie.jpg.
C'est mon premier site en CSS, ceux que je faisais avant étaient en tableaux, donc là, je suis un peu perdue... Si de bonnes âmes pouvaient me donner un coup de main, ça serait vraiment gentil. :)
Donc ci-dessous je vous mets le css et la page d'index (la seule page en html, j'utilise AJAX - développé par un ami cela va sans dire - je vais aussi faire une version php -toujours développée par le même ami )
Merci d'avance! :)
Pépéte
ps : est-ce que ceux qui ont IE PC 6.5 et 7 peuvent tester le site? :D
Mon CSS :
Code:
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
| @charset "UTF-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666 url(img/motif.gif);
margin: 0;
padding: 10px;
text-align: center;
color: #000000;
font-family: verdana, arial, courier, sans-serif;
font-size: xx-small;
}
.page #container {
width: 980px;
background: #fff;
margin: 0 auto;
// border: 1px solid #000000;
text-align: left;
}
.page #header {
background: #fff url(img/bandeau-haut.jpg) bottom center no-repeat;
height: 170px;
padding: 0 0px;
}
.page #header h1 {
margin: 0;
padding: 10px 0;
}
.page #header span, .page #header img {
float: left;
margin-left: 5px;
margin-right: 5px;
padding-top: 5px;
}
.page #header div {
float: right;
}
.page #menu {
float: left;
width: 20%;
background: #fff;
// padding: 15px 0;
padding: 20px 20px 0px 0px;
font-size: x-small;
}
.page #menu h3, .page #menu p {
margin-left: 10px;
margin-right: 10px;
}
.page #contenu {
margin: 0 20px 0 20%;
padding: 20px 20px 0px 0px;
height: 340px;
font-size: x-small;
}
/* Mise en page des introductions */
.page #present{
width: 600px;
}
.page #present h2{
font-size: medium;
font-family: georgia, times new roman, times, serif;
color: #339933;
}
/* Mise en page des pages de contenu */
.page #info {
padding-top: 23px;
width: 25%;
float: left;
}
.page #info h1{
font-size: small;
font-family: georgia, times new roman, times, serif;
color: #339933;
padding-top: 10px;
}
.page #visuel {
float: right;
}
.page #footer {
padding: 0 10px;
height: 116px;
background: #fff url(img/bandeau-bas.gif) bottom center no-repeat;
text-align: right:
}
.page #footer div {
margin: 0;
padding: 100px 0 0 0;
text-align: right;
color: #fff;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/* Lien du header */
.page a:link {
color: #000000;
text-decoration: none;
}
.page a:visited {
color: #666666;
text-decoration: none;
}
.page a:hover {
color: #339933;
border-bottom: 1px dotted #000000;
}
.page a:active {
color: #339933;
}
/* Lien de la signature */
.page #footer a:link {
color: #FFFFFF;
text-decoration: none;
}
.page #footer a:visited {
color: #FFFFFF;
text-decoration: none;
}
.page #footer a:hover {
color: #FFFF66;
border-bottom: 1px dotted #FFFFFF;
}
.page #footer a:active {
color: #339933;
}
/* Divers */
.page h2 {
color: #339933;
font-family: georgia, times new roman, times, serif;
}
.page ul, li {
list-style-type: none;
line-height: 150%;
font-family: georgia, times new roman, times, serif;
}
.page .bold {
color: #FF0099 ;
}
a img {border:none; } /* pas de bordure sur les images qui servent de lien*/ |
Ma page html :
Code:
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
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Sandee Design, votre communication gagnante clés en main</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" media="screen, projection" href="screen.css"/>
</head>
<body onload="loadMenu('menu/intro.txt'); loadContenu('contenu/intro.txt');" class="page">
<div id="container">
<div id="header">
<img src="img/portfolio.gif">
<span>
<a href="#" onClick="loadMenu('menu/idvisuelle.txt'); loadContenu('contenu/intro-idvi.txt');">Identités visuelles</a><br />
<a href="#" onClick="loadMenu('menu/imprime.txt'); loadContenu('contenu/intro-imprimes.txt');">Imprimés</a><br />
<a href="#" onClick="loadMenu('menu/edition.txt'); loadContenu('contenu/intro-edition.txt');">Édition</a><br />
<a href="#" onClick="loadMenu('menu/pack.txt'); loadContenu('contenu/intro-packaging.txt');">Packaging</a><br />
<a href="#" onClick="loadMenu('menu/web.txt'); loadContenu('contenu/intro-sites.txt');">Sites internet</a><br />
</span>
<span>
<a href="#" onClick="loadMenu('menu/illustrations.txt'); loadContenu('contenu/intro-illustrations.txt');">Illustrations</a><br />
<a href="#" onClick="loadMenu('menu/rought.txt'); loadContenu('contenu/intro-rought.txt');">Roughts</a><br /
</span>
<img src="img/services.gif"> <span> <a href="#" onClick="loadMenu('menu/defprojets.txt'); loadContenu('contenu/intro-definitions.txt');">Définition
de projets</a><br />
<a href="#" onClick="loadMenu('menu/referencement.txt'); loadContenu('contenu/intro-referencement.txt');">Référencement</a><br />
</span>
<a href="#" onClick="loadMenu('menu/contact.txt'); loadContenu('contenu/intro-contacts.txt');"><img src="img/contact.gif"></a>
<!-- logo -->
<div>
<a href="#" onClick="loadMenu('menu/intro.txt'); loadContenu('contenu/intro.txt');"><img src="img/logo.gif"></a>
</div>
</div>
<div id="menu"></div>
<div id="contenu"></div>
<br class="clearfloat" />
<div id="footer">
<div>
<!--<a href="#" onClick="loadMenu('menu/plan.txt'); loadContenu('contenu/intro-plan.txt');">Plan du site</a> <br />-->
Rémi Maynègre & Sandrine Garcia - Tél. : 04 91 47 48 05 - 06 60 92
71 59 - Mél : <a href="mailto:sandeedesign@gmail.com">sandeedesign@gmail.com</a></a></div>
</div>
</div>
</div>
</body>
</html> |
Edit : bon, je crois avoir résolu une partie du problème (une div non fermée...). Il me reste deux erreurs au validateur auxquelles je ne comprends rien... si quelqu'un a une idée... :
Unknown Parse Mode!
The MIME Media Type (text/html) for this document is used to serve both SGML and XML based documents, and it is not possible to disambiguate it based on the DOCTYPE Declaration in your document. Parsing will continue in SGML mode.
Namespace Found in non-XML Document
Namespace "" found, but document type is not XML!
