[CSS] Problème de décalage sous Mozilla

fragmonster · 22 Février 2004

Bonjour, Je viens chercher conseils

J'ai un pb de décalage de calque sous mozilla et pas sous IE. Voici une image du décalage :

Comme vous pouvez lz voir le décalage se produit à droite. Sous IE je n'ai pas décalage. :nono:

Voici le source : D'abord le style

<style type="text/css">
body {
	margin: 0;
	text-align: center;
	background-color: #CCCCCC;
}
.center{
	margin-left: auto;
        margin-right: auto;
	width: 768px;
	text-align: left; /* on rétablit l'alignement normal du texte */
}
.content{
	background-color:#3C434D;
	padding: 5px 5px 5px 5px;
	margin-left: auto;
        margin-right: auto;
	width: 768px;
	text-align: left; /* on rétablit l'alignement normal du texte */
}
.txt10{
color:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;	
}
#left {
  background-color:#3C434D;
  float: left;
  width: 150px;
  padding: 5px 5px 5px 5px;
  border-width: 4px 1px 1px 1px;
  border-color: #cccccc;
  border-top-style:solid;
  border-right-style:dashed;
  border-left-style: dashed;
  border-bottom-style:dashed;

   }
</style>

Maintenant le corps de la page

<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<DIV class="center">
<!-- ImageReady Slices (twirl copie) -->
<TABLE WIDTH=768 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	... Barre du haut ...
</TABLE>
<DIV class="content">
	<DIV id="left" class="txt10">
  <li>menu</li>
  <li>menu</li>
  <li>menu</li>
	</DIV>

    <p> </p>
    <p> </p>
    <p> </p>

</DIV> 
</DIV>
</BODY>

Même en enlevant le DIV du menu j'ai toujours le problème. Mon site est centré dans le navigateur. Le tableau du haut qui contient mes images (logo ...etc) fait 768 px de large. Mon DIV "content" doit donc aussi faire 768px de large, mais sous mozilla il est plus large

:angry:

fragmonster · 22 Février 2004

Précision : Si je vire le padding: 5px 5px 5px 5px;, je n'ai plus le problème, mais c'est très laid car mon menu est alors collé en haut et à gauche :angry:

Fruge · 22 Février 2004

Salut,

Et bienvenue parmi nous !

J'allai justement te demander si le décalage n'était très exactement de 10 px, mais tu as entre temps posté ton second post !

Le problème doit provenir de la différence dans le calcul de la dimensions des boites chez IE et Mozilla. Tu trouveras des explications détaillées sur OpenWeb

Pour t'en sortir, tu devrais peut être faire un truc du genre :

.boite { 
  padding: 5px;
  voice-family: "\"}\"";
  voice-family:inherit;
  padding: 0;
}
html>body .boite {
  padding: 0;
}

Bref : tu fixes à 5px pour IE, et à 0px pour Mozilla

Tiens nous au courant,

Fruge.

fragmonster · 22 Février 2004

Merci je vais tester ça

fragmonster · 22 Février 2004

Ca marche!

J'ai cependant une autre question. Sous IE l'orsque le menu de gauche grandit (voir la capture plus haut), sous IE le <DIV> qui est derrière s'agrandit aussi mais pas sous mozilla :angry:

J'aimerais qu'il s'agrandiise aussi sous mozilla. En fait j'aimerais qu'il s'agrandisse en fonction des éléments qu'il va contenir.

Modifié 22 Février 2004 par fragmonster

Fruge · 22 Février 2004

Tu parles de quel div ? id="left", c'est ca ?

Sinon, une petite remarque sur ton code :

<DIV id="left" class="txt10">
  <li>menu</li>
  <li>menu</li>
  <li>menu</li>
	</DIV>

Il manque les balises < ul> encadrant les < li >

Par ailleurs, tu peux simplifier ton CSS :

#left {
 padding: 5px 5px 5px 5px;
  border-top-style:solid;
  border-right-style:dashed;
  border-left-style: dashed;
  border-bottom-style:dashed;
   }
</style>

en :

#left {
  padding: 5px;
  border-style:solid dashed dashed dashed;
   }
</style>

Fruge.

Fruge · 22 Février 2004

J'aimerais qu'il s'agrandisse aussi sous mozilla. En fait j'aimerais qu'il s'agrandisse en fonction des éléments qu'il va contenir.

Donc, si je te suis, tu veux fixer la taille minimum, la taille devant pouvoir augmenter : Tu devrais alors peut être remplacer le width: 150px; par un min-width: 150px; ... faut voir si ca marche

Référence : min-width et max-width en CSS2

Fruge

fragmonster · 22 Février 2004

Non, en fait, mon Div qui contient mon menu est encapsulé dans un autre DIV (class="content"). Or si mon menu s'allonge en hauteur, le "content" ne s'allonge pas sous mozilla.

Fruge · 22 Février 2004

Ha , ok !

En lisant ton post, j'avais pensé que c'était la largueur qui posait problème

Fruge.

fragmonster · 23 Février 2004

Et tu n'aurais pas la soluce?

Ce que j'ai du mal a cerner c'est que le DIV de mon menu est à "l'intérieur" de mon DIV "content". Normalement celui ci devrait s'allonger en conséquence non?

Dinostrate · 23 Février 2004

Tu devrais alors peut être remplacer le width: 150px; par un min-width: 150px; ... faut voir si ca marche

Si mes souvenirs sont exacts, le min ou max width ne fonctionnera pas sous ie mais il fonctionne bien sous nestcape et mozilla.

Dino

Dinostrate · 23 Février 2004

Et tu n'aurais pas la soluce?

Ce que j'ai du mal a cerner c'est que le DIV de mon menu est à "l'intérieur" de mon DIV "content". Normalement celui ci devrait s'allonger en conséquence non?

Salut

Tu trouveras ici une explication avec la nécessité de "remplir" le tableau vide pour éviter ton problème. Vois les exemples de boite jaune et de boite verte

http://openweb.eu.org/articles/initiation_float/

Dino

Connexion

[CSS] Problème de décalage sous Mozilla

Sujets conseillés

fragmonster

fragmonster

Fruge

fragmonster

fragmonster

Fruge

Fruge

fragmonster

Fruge

fragmonster

Dinostrate

Dinostrate

Veuillez vous connecter pour commenter

Parcourir

Activité