CSS pb IE 5.5

Marsh Posté le 31-08-2004 à 11:25:25

bonjour,

J'ai passé le code ci-dessous aux validators w3c html et css.
La page affiche bien ce que je veux sous mozilla et ie6.
Mais sous ie 5.5, c'est une autre histoire...

Voici les problèmes que je rencontre:

1) le bloc 'divContenu' n'utilise pas toute la largeur restante, c'est comme si le width:80% était interprété d'une autre façon...

2) dans le menu, les liens apparaissent décaler... j'ai pourtant défini tous mes margin et mes padding à 0.

Merci beaucoup pour votre aide

Voici le html:

Citation :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<title>Mon site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="_Acceuil.css" rel="stylesheet" type="text/css">

</HEAD>

<BODY>

<div class="divConteneur">

<ul class="menu">
<li class="menuTitre">PARTIE 1</li>
<li><a href="index.htm">Acceuil</a></li>
<li><a href="_Acceuil.css">Voir la feuille de style</a></li>
<li class="menuTitre">PARTIE 2</li>
<li><a href="_Page.htm">Partie2 menu1</a></li>
<li><a href="_Page.htm">Partie2 menu2</a></li>
<li><a href="_Page.htm">Partie2 menu3</a></li>
<li><a href="_Page.htm">Partie2 menu4</a></li>
<li class="menuTitre">PARTIE 3</li>
<li><a href="_Page.htm">----- Partie3 menu1 -----</a></li>
<li><a href="_Page.htm">----- Partie3 menu2 -----</a></li>
<li><a href="_Page.htm">----- Partie3 menu3 -----</a></li>
<li><a href="_Page.htm">----- Partie3 menu4 -----</a></li>
</ul>

<div class="divContenu">
<h1>contenu de la page</h1>
</div>

</div>

</BODY>
</HTML>

Et la CSS:

Citation :

/**********************************************/
/************ BLOCS DE LA PAGE **************/
/**********************************************/

html, body {
margin:0;
padding:0;
height : 100%;
}

body {
background-color: black;
}

.divConteneur {
position:absolute;
width:100%;
height:100%;
background-color: #336699;
}

.divContenu {
margin:0;
padding:0;
margin-left:20%;
width:80%;
height:100%;
background-color:white;
}

.divContenu h1 {
margin-top:0;
font-weight:bold;
font-size:14pt;
text-align:center;
color:black;
}

/**********************************************/
/********* MENU VERTICAL DE GAUCHE **********/
/**********************************************/

ul.menu {
margin:0;
padding:0;
position:absolute;
left:0;
width:20%;
list-style-type:none;
}

ul.menu a {
display:block;
height:20px;
text-decoration:none;
font-family:"Times New Roman", sans-serif;
font-weight:bold;
font-size:10pt;
text-align:left;
color:white;
background-color: #336699;
}
ul.menu a:hover {
background:gray;
}

ul.menu li.menuTitre {
font-family:"Times New Roman", sans-serif;
font-weight:bold;
font-size:12pt;
text-align:center;
color: black;
background-color: yellow;
}

Reply

Marsh Posté le 31-08-2004 à 11:25:25

Reply

Marsh Posté le 31-08-2004 à 20:32:24

bonsoir,

le 1) est résolu, en s'appuyant sur l'article http://openweb.eu.org/articles/dimensions_boites_css/

.divContenu {
margin:0;
padding:0;
margin-left:20%;
width:100%;
height:100%;
background-color:white;
voice-family:"\"}\"";
voice-family:inherit;
width:80%;
}

le 1er width sert pour ie5.5,
le 2ième sert pour mozilla, ie6...

Mon problème 2) reste toujours entier...

Merci.

Reply

CSS pb IE 5.5

Sujets relatifs:

Leave a Replay