Doctype chamboule le css et solution trouvée non compatible avec IE

Voilà, je vais essayer d'exposer de façon claire le problème :

1- Je me décide à donner un coup de lifting à mon site, c'est à dire passage au CSS (principalement)

->Après avoir déjà fait un premier design, je parcoure le site du Zero pour me clarifier les idées et pour aller un peu plus loin, mais je tombre sur la page qui me dit que "position:fixed" ne fonctionne pas sur IE... Argh, mon premier design est à refaire puisqu'utilisant cette fonction pour avoir un menu fixe en haut et en bas avec le milieu scrollable.

2- J'apprends donc pas mal de chose sur les tutos officiels (c'est parti pour un peu de PHP et une migration vers du xhtml, et je me tourne vers l'option overflow

->je fais ma page avec en gros un div "header" + un div "scrollcont" (qui contient un div "actus" avec un "float:left" + un div "main" avec le contenu) + un div "footer"

Je n'utilise pas l'option "position" et les blocs se placent les uns par rapport aux autres correctement (avec Opera (que j'utilise) Firefox 1.5 et IE6)

3- Seulement voilà, je teste la validation XHtml sur le site W3c, et il me dit que j'ai oublié le document type, je le rajoute.... et c'est là que tout commence à partir en vrille.

----> l'ascenceur sur la partie centrale disparait et c'est toute la page qui se déplace (sauf le pied de page o_O

)

4- En consultant ce forum je finis par mettre un "position:absolute" et placer manuellement mon bloc "scrollcont" avec l'option "overflow:auto"

---->Maintenant cela fonctionne avec Opera et Firefox, mais avec IE, l'option "float:left" du bloc actu semble ne rien faire (j'ai mon bloc actu sur la gauche et le bloc main ne commence qu'après)

---->si je supprime la balise doctype, ca va mieux avec IE et ca change quelques marge (par défaut ?) sur Opera et Firefox.

Seulement voilà, le doctype est à priori nécéssaire et j'aimerai bien pouvoir le mettre sans péter les plomb.

Je joins la dernière version des fichiers (le fichier généré par PHP + le CSS

<!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="fr">

<head>
<title>Photonoxx.fr - photographies et poésies... accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles/origine.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="header">
<p></p>
<ul id="menu">
<li><a href="index.php">Accueil</a></li>
<li><a href="index.php?page=presentation">Présentation</a></li>
<li><a href="index.php?page=galerie&news=n">Galeries</a></li>
<li><a href="catalog/index.php">Catalogue</a></li>
<li><a href="index.php?page=tarifs">Tarifs</a></li>
<li><a href="index.php?page=mailing" >mailing-list</a></li>
<li><a href="index.php?page=contact">contact</a></li>
<li><a href="index.php?lng=en&page=accueil&news=y"><img src="styles/eng-ver.png" alt="drapeaux anglais" /></a></li>
</ul>
</div><div id="scrollcont">
<div id="actus">
<h2>Actualité !</h2>

<p>- Gisors (27) -</p>
<p class="oldred">Du 30 Septembre au 28 Octobre 2006,</p>
<p> <a href="galerie.php?page=vag01">
<img src="galeries/vaguesalame/desvaguesalamegalerie.jpg" width="150" alt="vignette de la galerie des Vagues à l'âme" />
</a>
</p>
<p>"Des Vagues à l'âme"
<br />
une exposition d'inspiration marine
</p>

<h4>Deux lieux accueillent cette exposition :</h4>

<h4>La Librairie "Les Templiers"</h4>

<p> rue de Vienne - 27140 GISORS<br />
de 9h à 12h et de 14h à 19h
</p>
<p>pour 2 photographies en format 30x45<br />
et 12 photographies en format 20x30</p>

<h4>La Bibliothèque Guy de Maupassant</h4> <p>
5, rue Baléchoux - 27140 GISORS<br />
<a href="http://ville-gisors.fr/Ou--Quoi--Quand-,69,92,349.html">(voir
les informations sur le site de la ville de Gisors)</a></p>
<p>pour 11 photographies en format 30x45 <br />
</p>
<p>Si vous n'avez pas la possibilité de vous rendre à Gisors,
vous pouvez toujours voir la <a href="galerie.php?page=vag01">"galerie
des Vagues à l'âme"</a></p>
</div><div id="main">

<h1>Bienvenue</h1>
<p>Vous trouverez principalement sur ce site, un petit échantillon
de mes "activités" poètiques et photographiques
en allant dans les <a href="index.php?page=galerie">galeries</a>.
Ce site et mes travaux évoluant avec le temps, les changements
s'y feront au grès des saisons.</p>
<p>Si vous vouliez en savoir un peu plus sur moi, le menu
<a href="index.php?page=presentation">"Présentation"</a>
est fait pour vous !</p>
<p>Si vous souhaitez être tenu informé des évolutions
de ce site ou de futures expositions, je vous invite à vous rendre
sur la page <a href="index.php?page=mailing">"mailing-list"</a>
pour me laisser vos coordonnées.</p>
<p>Vous pouvez aussi me <a href="index.php?page=contact">contacter</a>,
que ce soit pour plus d'information ou tout simplement pour partager
vos impressions ou tout autres choses...</p></div>
</div>
<p id="footer">Copyright(c) 2003-2006 Nicolas Boulesteix - tous droit réservés pour les textes et les photographies</p></body>
</html>

body {
background-color: #0a1a25;
color: #66ccff;
font-family: Verdana, Arial, sans-serif;
height: 100%;
left: 0px;
margin: 0px;
overflow: hidden;
padding: 0px;
text-align: justify;
top: 0px;
width: 100%;
}

a {
color: #00cc66;
}

img {
border-style: none;
}

a:visited, #menu a:visited {
color: #9ec8de;
}

a:hover, #menu a:hover {
color: #ffcc00;
text-decoration: underline;
}

h3, h4 {
color: #d97979;
font-weight: bold;
}

#header {
background-color: black;
background-repeat: no-repeat;
left: 0px;
margin: 0px;
top: 0px;
width: 100%;
}

#header p {
background-image: url(ban-1.jpg);
background-repeat: no-repeat;
height: 120px;
left: 0px;
margin: 0px;
top: 0px;
}

#menu {
background-color: #006699;
border-color: #1b4f72;
border-style: ridge;
border-width: thin;
height: 26px;
left: 0px;
margin: 0px;
padding: 0px;
top: 0px;
width: 100%;
}

#menu a {
color: #10f89b;
font-weight: bold;
}

#menu li {
float: left;
height: 24px;
list-style-type: none;
padding-top: 2px;
text-align: center;
width: 120px;
}

#menu li:hover {
background-color: #4e7dad;
}

#scrollcont {
background-color: #0c2232;
border-bottom-color: #153d59;
border-bottom-style: dotted;
border-width: medium;
clear: both;
height: 65%;
left: 0px;
margin: 0px;
overflow: auto;
position: absolute;
top: 146px;
width: 100%;
}

#actus {
background-color: #153d59;
float: left;
font-size: 0.75em;
left: 0px;
margin-bottom: 15px;
margin-left: 0px;
margin-right: 30px;
margin-top: 0px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
text-align: left;
width: 160px;
}

#main {
border-color: #006699;
border-style: groove;
border-width: thin;
left: 0px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
padding-bottom: 50px;
padding-left: 10px;
padding-right: 10px;
top: 0px;
width: 90%;
}

.imgf {
float: left;
margin-bottom: 10px;
margin-right: 20px;
}

.oldred {
color: #d97979;
}

.right {
text-align: right;
}

.center, .center td {
text-align: center;
}

#footer {
background-color: #0a1a25;
bottom: 0px;
font-size: 0.9em;
left: 0px;
margin: 0px;
padding: 10px;
position: absolute;
text-indent: 10px;
width: 100%;
}

Pour l'instant j'ai enlevé le doctype sur le site.
Par ailleurs, l'avantage que je trouvais à faire sans l'option "position:absolute" pour scrollcont est que en réduisant la largeur de fenêtre, le menu se mettait sur plusieurs lignes en repoussant la partie centrale.

Donc si quelqu'un avait des conseils je serais preneur, car là je perd un peu les pédales...

ici je mets le CSS que j'avais avant de rajouter le doctype la première fois et que je préférerai garder si possible :

body {
background-color: #0a1a25;
color: #66ccff;
font-family: Verdana, Arial, sans-serif;
left: 0px;
margin: 0px;
overflow: auto;
padding: 0px;
text-align: justify;
top: 0px;
width: 100%;
}

a {
color: #00cc66;
}

img {
border-style: none;
}

a:visited, #menu a:visited {
color: #9ec8de;
}

a:hover, #menu a:hover {
color: #ffcc00;
text-decoration: underline;
}

h3, h4 {
color: #d97979;
font-weight: bold;
}

#header {
background-color: black;
background-repeat: no-repeat;
left: 0px;
margin: 0px;
top: 0px;
width: 100%;
}

#header p {
background-image: url(ban-1.jpg);
background-repeat: no-repeat;
height: 120px;
}

#menu {
background-color: #006699;
border-color: #1b4f72;
border-style: ridge;
border-width: thin;
height: 26px;
left: 0px;
margin: 0px;
padding: 0px;
top: 0px;
width: 100%;
}

#menu a {
color: #10f89b;
font-weight: bold;
}

#menu li {
float: left;
height: 24px;
list-style-type: none;
padding-top: 2px;
text-align: center;
width: 120px;
}

#menu li:hover {
background-color: #4e7dad;
}

#scrollcont {
background-color: #0c2232;
border-bottom-color: #153d59;
border-bottom-style: dotted;
border-width: medium;
clear: both;
height: 65%;
left: 0px;
margin: 0px;
overflow: auto;
top: 0px;
width: 100%;
}

#actus {
background-color: #153d59;
float: left;
font-size: 0.75em;
left: 0px;
margin-bottom: 15px;
margin-left: 0px;
margin-right: 30px;
margin-top: 0px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
text-align: left;
width: 160px;
}

#main {
border-color: #006699;
border-style: groove;
border-width: thin;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
padding-bottom: 50px;
padding-left: 10px;
padding-right: 10px;
width: 90%;
}

.imgf {
float: left;
margin-bottom: 10px;
margin-right: 20px;
}

.oldred {
color: #d97979;
}

.right {
text-align: right;
}

.center, .center td {
text-align: center;
}

#footer {
background-color: #0a1a25;
bottom: 0px;
font-size: 0.9em;
left: 0px;
margin: 0px;
padding: 10px;
position: fixed;
text-indent: 10px;
width: 100%;
}

Merci

Nicolas

ou comment devenir fou en trois étapes...

Doctype chamboule le css et solution trouvée non compatible avec IE

Supprimer

Modérer

Signaler le message aux modérateurs