Différence d'affichage entre firefox et IE

Question

23 Oct 2004 à 17:12

Bonjour,
Je craque un peu.
J'essaie de me mettre à l'xhtml. C'est pas simple.
Je commence par le début, la mise en page générale.
Je remplace les vilaines frames par des div. Jusque là ça va.
Je fais mon menu vertical tout simple en <ul><li> avec la css que je pense adéquat. (class="menu")
Dans le div data j'ai aussi une liste <ul> de lien vers des ancres dans la page.
Et voilà qu'ils apparaissent dans les mêmes box que le menu...
Les boules... Smiley eyecrazy

Si quelqu'un à une idée, je suis preneur...
La page icihttp://perso.wanadoo.fr/fbi/test/boite.html
et la feuille làhttp://perso.wanadoo.fr/fbi/test/fdsrecyclot.css
Merci d'avance

newbie en galere

23 Oct 2004 à 18:02

Je continue à chercher et j'en découvre d'autre.
Même sous firefox si j'active un lien de la page data et que je rafraichi la page, il apparait alors dans une boîte du "style menu".
Je ne suis pas sur d'être très clair dans mes explications mais bon...

newbie en galere

23 Oct 2004 à 18:40

J'ai déshabillé la page pour qu'elle soit plus claire...
Le code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="test2.css" rel="stylesheet" type="text/css">
<title>Recyclot - La bibliothèque</title>
</head>
<body>
<div class="haut" id="haut">div haut<br>
</div>
<div class="container" id="container">
<div class="menu" id="menu">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="presentation.html">Présentation</a></li>
<li><a href="conseil.html">Conseil</a></li>
<li><a href="formation.html">Formation </a></li>
<li><a href="gestion.html">Gestion des déchets</a></li>
<li><a href="references.html">Références</a></li>
</ul>
<p class ="intertitre">services</p>
<ul>
<li><a href="biblio.html">Bibliothèque</a></li>
<li><a href="boite.html">Boîte à conseils</a> </li>
<li><a href="diags.html">Testez-vous</a></li>
<li><a href="etsivous.html">Et si vous ?...</a></li>
<li><a href="news.html">Actus</a></li>
<li><a href="evenement.html">Evènements</a></li>
</ul>
<p class ="intertitre">liens</p>
<ul>
<li><a href="mailto:recyclot@wanadoo.fr?subject:%22Contact%20du%20site%22" target="_blank">Contact</a></li>
<li><a href="liens.html">Liens</a></li>
<li><a href="photo.html">Photo du mois</a></li>
</ul>
</div>
<div class="data" id="data">
<ul>
<li>lien 1</li>
<li>line 2</li>
<li>lien 3</li>
<li>lien 4</li>
<li>lien 5</li>
<li>lien 6</li>
</ul>

</div>
</div>
</body>
</html>

et la page css :
HTML
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}
BODY
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}

.haut {
background-color: #ff0000;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 100%;
height:80px;
}
.container {
background-color: #000FF0;
width: 100%;
}
.menu {
width: 150px;
float: left;
margin-left: 0px;
padding: 0px 0px 0px 0px;
background-color: #00FF00;
}
.menu ul {
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.menu li {
list-style-type: none;
font-weight: bold;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px 0px 0px 0px;
}
.menu a, .menu a:visited {
text-decoration: none;
width: 148px;
height: 15px;
color: #FFFFFF;
background-color: #0000FF;
display: block;
border-top-color: #0000CC;
border-top-style: outset;
border-top-width: 1px;
border-right-color: #0099FF;
border-right-style: outset;
border-right-width: 1px;
border-bottom-color: #0099FF;
border-bottom-style: outset;
border-bottom-width: 1px;
border-left-color: #0000CC;
border-left-style: outset;
border-left-width: 1px;
}
.menu a:hover{
width: 148px;
height: 15px;
color: #FFFF00;
border-top-color: #0000CC;
border-top-style: inset;
border-top-width: 1px;
border-right-color: #0099FF;
border-right-style: inset;
border-right-width: 1px;
border-bottom-color: #0099FF;
border-bottom-style: inset;
border-bottom-width: 1px;
border-left-color: #0000CC;
border-left-style: inset;
border-left-width: 1px;
background-color: #0099FF;
display: block;
text-decoration: none;
}
.intertitre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0000CC;
font-weight: bolder;
font-variant: small-caps;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
}

.data {
background-color: #0000FF;
position: absolute;
width: auto;
height: auto;
left: 150px;
top: 80px;
margin-left: 0px;
margin-right: 0px;
padding-left:10px;
}

bambi

23 Oct 2004 à 23:12

Proposition (mais je suis newbie aussi donc les pros corrigeront si necessaire)

Essaie de regrouper tes CCS chaque fois que possible et ne défini pas une div à la fois class et id.

Pour le reste, à voir par les pros.

Le html

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="test2.css" rel="stylesheet" type="text/css" />
<title>Recyclot - La biblioth&egrave;que</title>
</head>
<body>
<div class="haut">div haut<br />
</div>
<div class="container"> 
  <div class="menu"> 
    <ul>
      <li><a href="index.html">Accueil</a></li>
      <li><a href="presentation.html">Pr&eacute;sentation</a></li>
      <li><a href="conseil.html">Conseil</a></li>
      <li><a href="formation.html">Formation </a></li>
      <li><a href="gestion.html">Gestion des d&eacute;chets</a></li>
      <li><a href="references.html">R&eacute;f&eacute;rences</a></li>
    </ul>
    <p class="intertitre">services</p>
    <ul>
      <li><a href="biblio.html">Biblioth&egrave;que</a></li>
      <li><a href="boite.html">Bo&icirc;te &agrave; conseils</a> </li>
      <li><a href="diags.html">Testez-vous</a></li>
      <li><a href="etsivous.html">Et si vous ?...</a></li>
      <li><a href="news.html">Actus</a></li>
      <li><a href="evenement.html">Ev&egrave;nements</a></li>
    </ul>
    <p class="intertitre">liens</p>
    <ul>
      <li><a href="mailto:recyclot@wanadoo.fr?subject:%22Contact%20du%20site%22" target="_blank">Contact</a></li>
      <li><a href="liens.html">Liens</a></li>
      <li><a href="photo.html">Photo du mois</a></li>
    </ul>
  </div>
  <div id="data"> <ul> 
    <li><a href="#">Liens 1</a></li>
    <li><a href="#">Liens 2</a></li>
    <li><a href="#">Liens 3</a></li>
    <li><a href="#">Liens 4</a></li>
    <li><a href="#">Liens 5</a></li>
    <li><a href="#">Liens 6</a></li>
  </div>
</div>
</body>
</html>

La feuille CSS

html {
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
}
.haut {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 80px;
	background: #f00;
}

.container {
	width: 100%;
	background: #FFF;
}
.menu {
	width: 150px;
	float: left;
	margin-left: 0;
	padding: 0;
	background: #0F0;
}

.menu ul {
	display: block;
	margin: 0;
	padding: 0;
}
.menu li {
	list-style-type: none;
	margin: 0;
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
}

.menu a, .menu a:visited {
	text-decoration: none;
	width: 148px;
	height: 15px;
	color: #FFF;
	display: block;
	border-top-color: #00C;
	border-top-style: outset;
	border-top-width: 1px;
	border-right-color: #09F;
	border-right-style: outset;
	border-right-width: 1px;
	border-bottom-color: #09F;
	border-bottom-style: outset;
	border-bottom-width: 1px;
	border-left-color: #00C;
	border-left-style: outset;
	border-left-width: 1px;
	background: #00F;
}

.menu a:hover {
	width: 148px;
	height: 15px;
	color: #FF0;
	border-top-color: #00C;
	border-top-style: inset;
	border-top-width: 1px;
	border-right-color: #09F;
	border-right-style: inset;
	border-right-width: 1px;
	border-bottom-color: #09F;
	border-bottom-style: inset;
	border-bottom-width: 1px;
	border-left-color: #00C;
	border-left-style: inset;
	border-left-width: 1px;
	display: block;
	text-decoration: none;
	background: #09F;
}

.intertitre {
	color: #00C;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
	font: small-caps bolder 14px Verdana, Arial, Helvetica, sans-serif;
}

#data {
	position: absolute;
	width: auto;
	height: auto;
	left: 150px;
	top: 90px;
	margin-left: 0;
	margin-right: 0;
	padding-left: 10px;
	background: #FFF;
}

J'ai un résultat à peu près identique entre IE et FF mais les marges sont toujours un point délicat entre ces deux là Smiley eyecrazy

Modifié le 23 Oct 2004 - 23:20

bambi

23 Oct 2004 à 23:18

En regardant de plus près , je suis sûre qu'il y a encore plus propre et plus simple.
Mais comme je te le dis, je débute aussi, donc ça peut déjà te mettre sur la voie.
Si j'ai le temps, je regarderais à nouveau plus longuement Smiley cligne

Modifié le 23 Oct 2004 - 23:20

newbie en galere

24 Oct 2004 à 10:21

Merci Bambi,
Effectivement, en mettant les css dans l'ordre, ça va mieux.
L'idée, c'est de refaire toutes les pages en partant de zéro, et de coller les bouts de code existant dans la structure.
Je vais m'attaquer aux tableux maintenant..
De belles insomnies en perspectives.
En tout cas, merci encore. Ca fait du bien un peu de soutient.
Smiley cligne

Olivier

24 Oct 2004 à 11:42

Si tu veux un petit conseil dans ta démarche :
Plutot que de faire petit bouts par petits bouts, et de les recoller ensemble ensuite, tu devrais plutot reprendre tout à zéro et tout faire d'un coup, ce sera peut être un peu plus long, ou plutot tu verras des resultat après un peu plus de temps, mais le travail sera facilité et plus efficace.

Là c'est très difficile de localiser les problème, entre le mélange de tableaux, de font, de ul, de div, ... on a du mal à s'y retrouver.

La démarche de création sans table est totalement différente de celle avec, on ne remplace pas les cellules de tableau par des div par exemple, c'est une démarche en terme de contenu, on utilise les balises adéquates en rapport avec le contenu, (un hN pour un titre, un p pour un paragraphe, ....) et le travail est généralement fait, avec l'ajout de quelques divisions (très minim) pour faciliter la mise en forme. Il ne reste alors plus qu'a gérer le tout via les CSS.

Un récent article anglophone montre un peu cette façon de faire dans l'exemple de la refonte du site blogger :
http://www.elmoustikoblog.net/read_article.php?id=34
http://www.stopdesign.com/present/2004/sydney/limits/

C'est en anglais, mais très imagé et facilement compréhensible.

Y a t il ce genre d'exemple de refonte de site "table=>css" ?
Tu as ceci : http://www.openweb.eu.org/articles/html_au_xhtml/ Mais ca n'explique pas le passage de la mise en page par tableau vers la mise en page CSS (ce n'est d'ailleur pas son but).

Voilà @++

Sujet clos