Affichage css div / IE FF

30 sept. 2006, 02:55

Bonsoir,

je suis en train de m'amuser avec les div et css afin d'arrêter d'utiliser les tableaux cependant j'ai un ... soucis !

l'affichage est correct sous IE mais différent sous FF...
Voici mon code :

fichier HTML

Code : Tout sélectionner

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="s.css">
<title>ICommerce</title>
</head>
<body>
<div id="gauche">
		<ul class="tableauNavigation">
	  		<span class="titreBoite">Navigation</span>
			<li class="navigationMenu">> Bienvenue </li>
			<li class="navigationMenu">> Bienvenue </li>
			<li class="navigationMenu">> Bienvenue </li>
		</ul>
	</div>
</body>
</html>

Fichier CSS

Code : Tout sélectionner

div#gauche {
    float: left;
    width: 17%;
    background-color: #FFFFFF;
	border:0px solid #3E536A;
}

.tableauNavigation {
	list-style-type: none;	
	background-color: #F7F7F7;
	color:#3E536A;
	font-weight:bold;
	margin-left:10; 
    margin-top:0;
	margin-right:10px;
	border:1px solid #3E536A;
}

.navigationMenu {
	background-color: #F7F7F7;
	color:#3E536A;
	font-weight:normal;	
	padding-left:15;
}

.titreBoite {
	background-color: #3E536A;
	color:#FFFFFF;
	font-weight:bold;
	width:100%;
	padding-left:10px;
}

Une idée ? Merci !

30 sept. 2006, 09:41

En dehors d'une erreur dans le code, (du texte à l'intérieur de la liste non encadré par des balises <li></li>), je n'ai pas noté de différences flagrantes.

Je te propose quand même une modification et une conversion en XHTML 1.0 Strict plutôt que HTML 4.01 transitional. Ça donne ce qui suit :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>ICommerce</title>
<style type="text/css">
/* <![CDATA[ */
div#gauche {
    float: left;
    width: 200px;
    background-color: #FFFFFF;
    border:0px solid #3E536A;
    padding: 0;
    margin: 0 10px;
    font-size: 12px;
}

.tableauNavigation {
   list-style-type: none;   
   background-color: #F7F7F7;
   color:#3E536A;
   font-weight:bold;
   margin:0;
   border:1px solid #3E536A;
}

.navigationMenu {
   background-color: #F7F7F7;
   color:#3E536A;
   font-weight:normal;   
   padding-left:15;
}

.titreBoite {
   background-color: #3E536A;
   color:#FFFFFF;
   font-weight:bold;
   padding-left:10px;
   margin: 0;
}
/* ]]> */
</style>
</head>
<body>
  <div id="gauche">
    <p class="titreBoite">Navigation</p>
    <ul class="tableauNavigation">
      <li class="navigationMenu">> Bienvenue 1</li>
      <li class="navigationMenu">> Bienvenue 2</li>
      <li class="navigationMenu">> Bienvenue 3</li>
    </ul>
  </div>
</body>
</html>

Là, tu auras le même affichage partout, IE, Firefox ou Opera dans les versions Windows, j'ai pas testé sous Linux et j'ai pas de Mac.

J'ai mis le style directement dans la page pour me simplifier la vie lors des tests, mais en déplaçant le code dans la feuille de style externe et en remettant la balise <link .. /> tu auras la même chose. attention à fermer cette balise en XHTML avec le "/".

30 sept. 2006, 12:44

Je te remercie Cyrano une partie du problème a été arrangé mais les bienvenue sont encore trop décalé sous Firefox par rapport à IE

30 sept. 2006, 13:06

Alors positionne-les :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>ICommerce</title>
<style type="text/css">
/* <![CDATA[ */
div#gauche {
    float: left;
    width: 200px;
    background-color: #FFFFFF;
    border:0px solid #3E536A;
    padding: 0;
    margin: 0 10px;
    font-size: 12px;
}

.tableauNavigation {
   list-style-type: none;
   list-style-position: outside;
   background-color: #F7F7F7;
   color:#3E536A;
   font-weight:bold;
   margin:0;
   padding: 0;
   border:1px solid #3E536A;
   position: relative;
   top: 0;
   left: 0;
}

.navigationMenu {
   background-color: #F7F7F7;
   color:#3E536A;
   font-weight:normal;   
   padding-left: 15px;
   margin: 0;
   position: relative;
   top: 0;
   left: 0;
}

.titreBoite {
   background-color: #3E536A;
   color:#FFFFFF;
   font-weight:bold;
   padding-left:10px;
   margin: 0;
}
/* ]]> */
</style>
</head>
<body>
  <div id="gauche">
    <p class="titreBoite">Navigation</p>
    <ul class="tableauNavigation">
      <li class="navigationMenu">> Bienvenue 1</li>
      <li class="navigationMenu">> Bienvenue 2</li>
      <li class="navigationMenu">> Bienvenue 3</li>
    </ul>
  </div>
</body>
</html>

De cette manière, j'ai exactement le même positionnement sur mes trois navigateurs; un détail, quand tu mets un padding, précise l'unité, ce n'est pas du html qui mettra en px par défaut, donc, on ne fait pas padding: 15 mais padding: 15px

30 sept. 2006, 13:18

J'ai noté !

Impeccable merci

Affichage css div / IE FF

Qui est en ligne