FireFox oui, IE non... par Ed - page 1

voilà, je viens de créer ma première page Web en suivant scrupuleusement le pas-à-pas du site du zero. au final, ça donne en effet ce que je souhaitais sous FireFox, mais alors sous Iinternet Explorer, les menus sons complètement désaxés. Je sais que certaines choses ne sont pas pris en compte par IE, mais je n'ai utilisé que des codes de base, je crois... ou alors c'est parceque j'ai mis mes tailles en % ? Je vous montre :

<!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>Bienvenue chez Ed</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design_Ed_beige" href="chez_ed_beige.css" />
</head>
<body>

<div id="menu">

<div class="element_menu">
<h3>Bienvenue</h3>
<ul>
<li><a href="news">news</a></li>
<li><a href="presentation_site">présentation<br/>du site</a></li>
<li><a href="lexique">lexique</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Galerie</h3>
<ul>
<li><a href="dao">D.A.O.</a></li>
<li><a href="traditionnel">traditionnel</a></li>
<li><a href="scraps">scraps</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Bandes Dessinées</h3>
<ul>
<li><a href="terminees">terminées</a></li>
<li><a href="en_travaux">en travaux</a></li>
<li><a href="idees">idées</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Projet "Prisonniers"</h3>
<ul>
<li><a href="histoire">histoire</a></li>
<li><a href="recherches_graphiques">recherches graphiques</a></li>
<li><a href="planches">planches</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Multimédia</h3>
<ul>
<li><a href="video">Vidéo</a></li>
<li><a href="audio">Audio</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Souvenirs</h3>
<ul>
<li><a href="dessins">dessins</a></li>
<li><a href="bd">BD</a></li>
<li><a href="litterature">Littérature</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Profil et Liens</h3>
<ul>
<li><a href="votre_serviteur">votre serviteur</a></li>
<li><a href="liens">liens</a></li>
</ul>
</div>

</div>

<div id="en_tete">

</div>

<div id="corps">

<h1> News du 27/07/06</h1>

<p>
Voilà, la première page est faite en gros, c'est basique, mais au moins ça fonctionne... sous FireFox ! Parce que sous Internet Explorer, c'est une véritable catastrophe, tout est décalé et pas à sa place, et je sais pas comment corriger ça.
</p>
<br/>
<br/>

<h1> News du 26/07/06</h1>

<p>
Bon, j'ai vu trop grand avec un essai de site à double menu, un peu trop sophistiqué... et ça buggait dans tous les coins, des décalages partout, je pense que j'ai sauté des étapes ! alors je recommence avec ce design simple mais efficace, un classique qui a fait ses preuves.
<br/>
Reste à voir si cette fois, je vais m'en sortir... Let's see !
</p>

</div>

</body>
</html>

body
{
width: 800px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: rgb(251,248,241);
background-image: url("../images/cle_champs.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom right;
}

#en_tete
{
width: 600px;
height: 100px;
background-image: url("../images/banniere_croquis.jpg");
margin-left: 175px;
}

#menu
{
float: left;
width: 150px;
}

.element_menu
{
background-color: rgb(249,235,202);
border: 2px solid rgb(159,110,70);
margin-bottom: 15px;
}

.element_menu h3
{
color: rgb(128,0,0);
font-family: Arial, "Arial Black", "Times New Roman", serif;
text-align: center;
text-decoration: underline;
}

.element_menu ul
{
list-style-type: square;
padding: 0px;
padding-left: 27px;
font-size: 110%;
font-weight: bold;
margin-top: 5px;
}

.element_menu a
{
color: rgb(131,41,0);
text-decoration: none;
}

.element_menu a:hover
{
color: rgb(184,129,71);
}

#corps
{
margin-left: 175px;
margin-top: 85px;
color: rgb(107,59,0);
}

#corps h1
{
font-size: 120%;
font-weight: bold;
}

Si vous voyez une solution, merci par avance...

28 juillet 2006 à 0:18:20

chriskirknielsen

28 juillet 2006 à 0:35:31

Les balises <code>, c'est pour qui ?

Et au lieu de nous balancer un code, cherches l'erreur :-°

28 juillet 2006 à 12:21:03

le code, c'était juste à titre informatif, pour que mon explication soit moins abstraite, c'est tout. Et si je me suis permis de demander, c'était juste pour savoir dans quel genre de modification me lancer, je demande pas à ce qu'on me corrige mon CSS... Savoir si ça vient des %, de balises ou d'autres choses me permet de cibler mon problème. Et c'est pas pour autant que je continue pas de mon côté à chercher.

Vincent-Tim

28 juillet 2006 à 12:36:46

Ce qu'il voulait dire, c'est qu'il existe des balises <code> qui colorent automatiquement ton code.
Tu devrais éditer ton premier message en mettant ton code dans ces balises, parce que c'est pas très clair :-°

28 juillet 2006 à 14:54:07

ah d'accord, j'avais pas vu le système de codes.

Et pour mon problème, ça fait deux heures que je joue avec le code. Résultat : le fait de marquer les tailles en px plutôt qu'en % a limité les dégats sous Internet explorer, mais les éléments du menu sont quand même à des tailles aléatoires, je vois pas pourquoi.

djedie

28 juillet 2006 à 14:56:21

donne une taille a tes titres
ex :

h3 { font-size : 20px; }

donne des margin et padding a tes ul et li

Sinon c est pas interpreté pareil par IE et FF, car la size par defaurt n est pas la même.

FireFox oui, IE non...

FireFox oui, IE non...

Supprimer

Modérer

Signaler le message aux modérateurs