[Résolu] Bug de compatibilité FF/IE :( par orousseau - page 1

Bonsoir à tous, j'ai un petit bug : affichage correct sous FF, mais pas bon sous IE. J'ai épluché mon code à la recherche de l'erreur (et notamment grâce à vos précédents conseils

), mais je ne vois vraiment pas où est le pb. Vous verrez, le bug se situe en bas du #conteneur où j'ai une grosse marge blanche sous IE.
Je vous remercie par avance de l'aide que vous m'apporterez.
PS : Désolé pour la longueur o_O

, à mon avis les plus importants sont #header, #menuhaut, #menu, #global et #pied puisque ce sont mes "conteneurs"

<!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" lang="fr">
<head>
<title>TITRE DE LA PAGE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

<div id="conteneur">


<div class="cache">
<img class="index1" src="" title="" />
<img class="index2" src="" title="" />
<img class="services1" src="" />
<p>Si vous voyez ces images, c'est que votre navigateur ne prend pas en charge les feuilles de styles CSS. Ne vous en préoccupez pas, elles sont destinées à accéler l'affichage des pages.</p>
</div>


<div id="header">
<h1>TITRE</h1>
<p>SOUS-TITRE</p>
</div>


<div id="menuhaut">
<ul>
<li><a href="" accesskey="">LIEN 1</a> |</li>
<li><a href="" accesskey="">LIEN 2</a></li>
</ul>
</div>


<div id="menu">
<ul>
<li><a href="" accesskey="">LIEN 1</a></li>
<li><a href="" accesskey="" class="active">LIEN 2</a></li>
<li><a href="" accesskey="">LIEN 3</a></li>
<li><a href="" accesskey="">LIEN 4</a></li>
</ul>
</div>


<div id="global">
<h1>TITRE</h1>
<p>TEXTE</p>
<ul>
<li>PUCE 1</li>
<li>PUCE 2</li>
<li>PUCE 3</li>
<li>PUCE 4</li>
</ul>
</div>


<div id="pied">
<p>Copyright © NOM DE L'ENTREPRISE</p>
</div>

</div>

</body>

</html>

/* Tests */
#header, #menuhaut, #menu, #global, #global form, #pied {}
* {}

/* Tous les margin et padding prennent la valeur 0 */
* {
margin: 0;
padding: 0;
}

/* On précise la zone de mémoire cache */
.cache {
position: absolute;
left: 0;
top: -5000px;
}

/* On détermine l'allure générale de la page */
body {
background-color: black;
text-align: center;
font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
font-size: 0.8em;
}

/* L'ensemble du site est contenu dans cet élément */
#conteneur {
position: absolute;
top: 50%;
left: 50%;
width: 780px;
height: 560px;
margin-left: -390px ; /* Pour centrer, on prend la moitié de la largeur que l'on passe en négative */
margin-top: -280px; /* Pour centrer, on prend la moitié de la hauteur que l'on passe en négative */
background-color: white;
color: black;
}

/* Bandeau du haut */
#header {
width: 780px;
height: 70px;
background-color: #80c000;
color: white;
text-align: left;
font-weight: bold;
}

#header h1 {
padding-left: 15px;
padding-top: 4px;
font-size: 2.2em;
}

#header p {
margin: 3px 0 0 15px;
font-size: 1.4em
}

/* Menu horizontal */
#menuhaut {
width: 780px;
height: 25px;
background-color: #80c000;
color: white;
}

#menuhaut ul {
text-align: right;
font-weight: bold;
font-size: 1em;
margin: 0 5px 0 0;
padding-top: 3px;
list-style-type: none;
}

#menuhaut li {
display: inline;
}

#menuhaut a {
color: white;
text-decoration: none
}

#menuhaut a:hover {
text-decoration: underline;
}

/* Menu principal */
#menu {
float: left;
width: 150px;
height: 440px;
background-color: #80c000;
color: white;
}

#menu ul {
text-align: left;
font-weight: bold;
font-size: 1.3em;
margin: 0 0 0 5px;
margin-top: 5px;
list-style-type: none;
}

#menu li {
display: block;

line-height: 40px;
}

#menu a {
color: white;
text-decoration: none
}

#menu a:hover {
color: #006600;
}

#menu a.active {
color: #006600;
}

/* Contenu principal */
#global {
float: right;
width: 630px;
height: 440px;
background-color: white;
color: black;
text-align: left;
overflow: scroll;
}

#global h1 {
width: 600px;
margin: 5px 5px 10px 5px;
border-bottom: 7px #006600 solid;
color: #006600;
font-weight: bold;
font-size: 2.1em;
text-align: center;
}

#global p {
color: black;
font-weight: none;
font-size: 1em;
margin: 7px 5px 0 5px;
text-align: justify;
}

#global ul {
margin: 4px 0 0 40px;
list-style-type: disc;
}

#global li {
display: list-item;
}

#global img.index1 {
float: right;
margin: 5px 5px 0px 10px;
width: 280px;
height: 190px;
clear: both;
}

#global img.index2 {
float: left;
margin: 5px 5px 0 5px;
width: 276px;
height: 109px;
clear: both;
}

#global img.services1 {
position: relative;
bottom: 60px;
left: 280px;
margin: 10px 5px 0 5px;
width: 317px;
height: 139px;
clear: both;
}

/* Pied de page */

#pied {
float: left;
width: 780px;
height: 25px;
background-color: #80c000;
color: white;
}

#pied p {
font-weight: bold;
margin: 3px 0 0 0;
}

orousseau

24 juillet 2006 à 22:35:07

Riko

24 juillet 2006 à 23:49:14

Salut, je pense que c'est ton bloc #global qui fout la pagaille.

Supprimes ces deux lignes de ton css dans l'id #global

float: right;
width: 630px;

De plus pour supprimer la barre de scroll horizontale en bas de ton bloc central, mets :

overflow: auto; /*a la place scroll*/

Donc ton nouveau css complet pour l'id global sera :

#global {
height: 440px;
background-color: white;
color: black;
text-align: left;
overflow: auto;
}

25 juillet 2006 à 20:29:57

J'ai le droit d'être jaloux :lol:

?
J'aimerai bien pouvoir trouver aussi facilement la réponse à mes questions concernant les bugs

Je te remercie, ça fonctionne parfaitement !

25 juillet 2006 à 23:49:15

Mais non pas de quoi être jaloux, tu m'aideras peut être sur un autre sujet.

Je suis bien content de t'avoir rendu service.

Bug de compatibilité FF/IE :(

Bug de compatibilité FF/IE :(

Supprimer

Modérer

Signaler le message aux modérateurs