28173 sujets

CSS et mise en forme, CSS3

[résolu] CSS catastrophique sous 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? Pliz???

Mon CSS :

@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 :

<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&eacute;s visuelles</a><br />
<a href="#" onClick="loadMenu('menu/imprime.txt'); loadContenu('contenu/intro-imprimes.txt');">Imprim&eacute;s</a><br />
<a href="#" onClick="loadMenu('menu/edition.txt'); loadContenu('contenu/intro-edition.txt');">&Eacute;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&eacute;finition
de projets</a><br />
<a href="#" onClick="loadMenu('menu/referencement.txt'); loadContenu('contenu/intro-referencement.txt');">R&eacute;f&eacute;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&eacute;mi Maynègre & Sandrine Garcia - Tél. : 04 91 47 48 05 - 06 60 92
71 59 - Mél : sandeedesign@gmail.com</a></div>
</div>
</div>

</div>
</body>
</html>

Modifié par sandee (25 Apr 2007 - 15:20)
Salut,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne
Salut.

Ton code n'est pas valide. Commence par le corriger (surtout les grosses erreurs comme des div ou des a pas fermés). Cela devrait déjà résoudre au moins une partie des problèmes.
Bonjour,

FF 2..0.0.3 C'est a peu près ok sauf un petit scroll horizontal en 1024x768.
IE7 et IE6 c'est le bronx ...

Voilou

<edit> l'ajax c'est pour faire mode web2? car je ne vois pas l'intérêt là ? </edit>
Modifié par ghost (24 Apr 2007 - 21:40)
Bonsoir,

l'ajax c'était pour éviter de recharger mes pages en entier et d'avoir l'effet "flash" sur mes deux bandeaux... Mais du coup je vais être obligée de faire une version php sans javascript... Bon... Mais le problème vient du css, pas de l'ajax... Enfin... Je pense...

Nicolas : as-tu vu beaucoup de "grosses erreurs"? Parce que j'en vois pas des div et a pas fermés... Bon, c'est tard, j'ai les yeux qui se croisent, mais bon.... Smiley smile

Mikachu : désolée, sur ce coup j'ai fait la newbie de base... Smiley ohwell

Parce que pour en arriver là, j'en suis pas à mon premier css... Et rien qu'à l'idée de tout reprendre du début... Smiley bawling

Au secours!
J'ai regardé rapidement le résultat du validateur. Il trouvait un div et un a pas fermés ou pas ouverts. Et il semble y avoir aussi un problème avec la DTD mais je ne suis vraiment pas spécialiste.
Et sinon :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//[#red][b]FR[/b][/#]" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ce doctype est erroné. Le doctype n'est pas le lieu approprié pour indiquer la langue de traitement du document.

Corriger ce doctype en le remplaçant par un doctype valide permettra déjà d'obtenir des erreurs plus cohérentes auprès du validateur du W3C.

http://validator.w3.org/check?uri=http%3A%2F%2Fsandeedesign.free.fr%2F
bonjour à tous!

Je suis passée par le validateur, j'ai corrigé les balises fermées non ouvertes (glups) et forcément, ça marche nettement mieux! Je dirai même plus : ça marche mieux! (désolée, je suis en train de relire mes vieux Tintin)

Mais il me reste des erreurs que je comprends pas trop, pouvez-vous éclairer ma lanterne :

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!

A priori ça marche sous IE6, donc toujours à priori, ça devrait également marcher sous IE7??? Quelqu'un(e) pourrait jeter un coup d'oeil? http://sandeedesign.free.fr

Florent, pourrais-tu me dire comment je pourrais corriger ce doctype pour qu'il devienne valide? Smiley lol

En tout cas merci à tous d'avoir pris un peu de temps pour m'aider même si je suis une newbie du css et que j'avais même pas pris le temps de valider... Promis, j'la ferais plus! Smiley smile
sandee a écrit :
Florent, pourrais-tu me dire comment je pourrais corriger ce doctype pour qu'il devienne valide? Smiley lol

Celui que tu as actuellement a l'air bon.
Sinon, se référer à l'article suivant :
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

Et le rendu a l'air très correct dans IE6. Même IE 5.x a l'air de s'en sortir à peu près correctement.

Sujet [Résolu] ? Si oui, merci de bien l'indiquer dans le titre de ton message (que tu peux modifier en éditant le tout premier message du sujet).
merci à tous de vos lumières! Il suffisait d'enlever deux balises et de mettre le bon doctype! Smiley smile


Je me sens plus légère tout d'un coup... Smiley lol
Sujet clos
Aller à