Aller au contenu

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

fragmonster

Par fragmonster
dans (X)HTML et CSS

 Partager

Sujets conseillés

fragmonster

fragmonster

Posté
Posté

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 :

pb.jpg

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:

Lien vers le commentaire
Partager sur d’autres sites
Fruge

Fruge

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
fragmonster

fragmonster

Posté
  • Auteur
Posté (modifié)

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é par fragmonster
Lien vers le commentaire
Partager sur d’autres sites
Fruge

Fruge

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
Fruge

Fruge

Posté
Posté
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

Lien vers le commentaire
Partager sur d’autres sites
Dinostrate

Dinostrate

Posté
Posté
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

Lien vers le commentaire
Partager sur d’autres sites
Dinostrate

Dinostrate

Posté
Posté
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

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...