28172 sujets

CSS et mise en forme, CSS3

Problème de compatibilité IE

Bonjour,

J'ai un soucis que je n'arrive pas à régler. J'ai fait un menu horizontal en utilisant des balises <ul> et <li>. Tout va bien avec firefox, mais avec IE il y a un problème sur le menu, je vous mets une image des différences entre les deux.
upload/16000-apercu.JPG

Je vous mets l'adresse de la page ( http://www.corambe.com/menutherapies.html ) et le code. Je pense que ça vient du fait que j'ai mis des <br> entre les deux lignes du menu au lieu de jouer sur les marges en utilisant le css mais je n'y suis pas arrivée.... Smiley confused

En bref j'aurais besoin d'aide

ul {
  margin: 0px 0;
  padding: 0;
  list-style-type: none;
  top: 0px;
}
li {
  margin: 0px 0px 0px 25px;
  display: inline;
  padding-left: 0px;
  padding-top: 0;
  padding-bottom: 0px;
  right: 0px;
  bottom: 0px;
  top: 0px;
}
ul li a {
  border-style: solid;
  border-color: #ffffcc #d7d7ac #d7d7ac #ffffcc;
  border-width: 1px;
  padding: 5px;
  width: 110px;
  height: 30px;
  background-color: #500000;
  color: #ffffcc;
  text-decoration: none;
  text-align: center;
  display: inline;
  margin-top: 0px;
  margin-bottom: 0px;
}
ul li a:hover {
  border-color: #000000;
  color: #660000;
  background-color: #ffffcc;
}


Et le code html : 

<div id="navigation">
<ul>
  <br>
  <li><a href="http://www.corambe.com">Accueil</a></li>
  <li><a href="http://www.corambe.com/presentation.html">Qui
suis-je ?</a></li>
  <li><a href="http://www.corambe.com/association.html">L'association
Corambé</a></li>
  <li><a href="http://www.corambe.com/bach.html">Les
Fleurs de Bach</a></li>
  <li><a href="http://www.corambe.com/conseils.html">Conseils
en Fleurs de Bach</a></li>
  <br>
  <br>
  <br>
  <li><a href="http://www.corambe.com/animaux.html">Fleurs
de Bach pour animaux</a></li>
  <li><a href="http://www.corambe.com/education.html">Education
des chevaux</a></li>
  <li><a href="http://www.corambe.com/therapie.html">Thérapie
par le cheval</a></li>
  <li><a href="http://corambe.aceboard.fr">Forum</a></li>
</ul>
</div>


D'avance merci ...
bonsoir,

Ta page comporte plein de défaut au niveau du code html Smiley smile .

en particulier dans ce menu ou des ; 
<br>
sont inséré .
C'est interdit mÔsieur Smiley smile , d'ou en partie tes soucis d'affichage.

test ceci (reprise rapide de ton menu et ses couleurs ); j'ai mis quelque commentaires , je te laisse analyser et comprendre les css. (Plein de réponses dans la faq surement) :

<!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>test liste centrée</title>
<style type='text/css'>
<!--
 div#navigation { 
 background:#660000; 
 padding: 0;margin:0;/* reset */

 } 
 #navigation ul { 
 text-align:center; 
 padding:0;margin:0;/* reset */ 
 } 
 #navigation li { 
 display:inline; 
 padding:3px 1em; 
 line-height:3em;/* FF2 */ 
 } 
 #navigation a { 
 display:inline-block;/* principalement pour IE */ 
 color:#fff ; 
 text-decoration:none; 
 white-space:nowrap; /* sur une seule ligne S.V.P. des fois que ... */ 
 line-height:1.2em; 
 border:1px solid ; 
 padding:5px;/* pourquoi pas [smile] */ 
 background:#570301; 
 margin:0.5em 0;/* IE 6  'to fix' & complete le line-height de li non pris en compte , 
 ... puis ameliore un peu le rendu visuel en fusionnant les marges */ 
 } 
-->
 </style> 
 </head> 
 <body>
<div id="navigation"> 
 <ul> 
 <li><a href="http://www.corambe.com">Accueil</a></li> 
 <li><a href="http://www.corambe.com/presentation.html">Qui  suis-je ?</a></li> 
 <li><a href="http://www.corambe.com/association.html">L'association  Corambé</a></li> 
 <li><a href="http://www.corambe.com/bach.html">Les  Fleurs de Bach</a></li> 
 <li><a href="http://www.corambe.com/conseils.html">Conseils en Fleurs de Bach</a></li> 
 <li><a href="http://www.corambe.com/animaux.html">Fleurs  de Bach pour animaux</a></li> 
 <li><a href="http://www.corambe.com/education.html">Education des chevaux</a></li> 
 <li><a href="http://www.corambe.com/therapie.html">Thérapie par le cheval</a></li> 
 <li><a href="http://corambe.aceboard.fr">Forum</a></li> 
 </ul> 
 </div> 
 </body>
 </html>


bon courage Smiley smile ( je vois que tu as viré le prologue xml et opté pour un html 4.01 ,:) )
Bonsoir,

En passant: placer les styles CSS dans une feuille de styles externe permettrait de diminuer sensiblement le poids des pages, les styles étant alors chargés une fois et mis en cache par le navigateur.
Merci beaucoup (mais ce n'est pas mÔsieur mais mÂdame !)

alors par contre j'ai essayé de l'intégrer et en fait il y a un petit détail que je n'arrive pas à régler :
avec mon ancien code j'avais ça pour le menu : http://www.corambe.com/menutherapies.html
et là j'ai réussi à avoir ça : http://www.corambe.com/menutherapies2.html
Donc c'est super parce qu'il n'y a plus de problèmes avec IE mais par contre je n'arrive pas à avoir plus d'espace entre les deux lignes, et je trouve ça moins aéré, alors est ce que vous savez comment je pourrais régler ça...?

et sinon là j'ai pas tout compris :
a écrit :
je vois que tu as viré le prologue xml et opté pour un html 4.01 ,:)
d'accord florent v., mais alors comment dois-je les enregistrer, ce n'est pas des .html...?
(excusez ma newbitude !)
Les feuilles de style devraient à mon avis pouvoir être enregistré avec n'importe quelle extension, puisque c'est un fichier texte. Mais il est générallement admis qu'une feuille de style CSS porte l'extension .css

Pour la lier à ta page, il faut ajouter entre les balises head :
<link rel="stylesheet" type="text/css" href="style.css" />

style.css est ta feuille de style, à remplacer par un chemin dans le genre /repertoire/style.css si nécessaire Smiley cligne
Salut,

Avant tout ça, je pense qu'il faudrait revoir les "fondamentaux", ici sur les tutoriaux ou un ptit passage sur le site du zero car (désolé Smiley cligne ) pour l'instant ça ressemble à du "frontpage".
Bonne continuation
Sujet clos
Aller à