[CSS] Pb d'affichage des cadres sous mozilla firefox

**nais_** · 31/08/2006, 09h36

Bonjour à tous...

J'ai developpé un site et pour le visualiser j'utilisais IE. Et quand j'ai essayé de le visualiser avec Mozilla j'ai constaté qu'aucun de mes cadres ne conservaient sa mise en forme

Voila la déclaration de mes cadres dans ma page css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/* En-tête de page*/
div#entete {
  width:87%;
	height:40px;
	text-align:left;
	background-color:#0066CC;
}
  div#entete_left {
    float:left;
    text-align:left;
  }
  div#entete_right {
    float:right;
    text-align:right;
  }
/* Corps de page */
div#corps {
  width:87%;
	margin:10px;
}
  /* En tête du corps de page */
  div#bandeau {
  	width:100%;
  	background-color:#9EBFE3;
  }
    div#bandeau_left {
      float:left;
      text-align:left;
    }
    div#bandeau_right {
      float:right;
      text-align:right;
    }
  /* Contenu du corps de page */
  div#contenu {
    text-align:justify;
    border-right: solid 1px #99CCFF;
    border-left: solid 1px #99CCFF;
  	width:100%;
  	height:600px;
  	background-color:#FFFFFF;
  	overflow:auto;
  }
    #table {
      text-align:center;
    }
  /* Pied de page du corps de page */
  div#pied_page {
  	clear:both;
  	width:100%;
  }

Et voila comment ils sont déclarés et utilisés dans mes différentes pages :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
  <!-- Cadre d'en-tête -->
  <div id="entete">
    <div id="entete_left">
  	   <img src="./images/image_top_left.jpg">
  	 </div>
  	 <div id="entete_right">
  	   <img src="./images/image_top_right.jpg">
  	 </div>
  </div>
 
  <!-- Cadre du corps -->
  <div id="corps">
 
    <!-- Cadre du bandeau -->
    <div id="bandeau">
      <div id="bandeau_left">
    	   <img src="./images/corner_top_left.jpg">
    	 </div>
    	 <div id="bandeau_right">
    	   <img src="./images/corner_top_right2.jpg">
    	 </div>
    </div>
 
    <!-- Cadre du contenu -->
    <div id="contenu">
        <br/><br/><br/>
 
        <!-- Cadre table (permet de centrer le tableau) -->
        <div id="table">
          <table>
            <tr>
              <td>
                <img src="./boutons/button_logout.jpg" onclick="javascript:self.close();"/>
              </td>
            </tr> 
          </table> 
        </div>
 
    </div>
 
  	<!-- Cadre du pied de page -->
  	<div id="pied_page">
  	   <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
    	     <td width="1" height="100%"><img src="./images/bottom_bar_left_corner.gif" /></td>
            <td bgcolor="#0066CC" align="middle">
              <font color="#FFFFFF">
               [ <a class="mylink" title="<?php echo _NAME_WEB_SITE_VOGEL_FR ?>" href="<?php echo _WEB_SITE_VOGEL_FR ?>" target="_blank">VOGEL France</a> ]
                 -  [ <a class="mylink" title="<?php echo _NAME_WEB_SITE_SKF_FR ?>" href="<?php echo _WEB_SITE_SKF_FR ?>" target="_blank">SKF France</a> ]
               </font>           
            </td>
            <td width="1" align="right"><img src="./images/bottom_bar_right_corner.gif"/></td>
        </tr>
      </table>
    </div>
  </div>

Est-ce que quelqu'un pourrait me dire d'où vient ce problème d'affichage sous Mozilla ?

Merci d'avance

Oo°ups ! j'ai oublié de préciser :

Je travaille en :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Avec la version 1.5.0.6 de Mozilla et avec la version 6 de IE.

En espérant que cela pourra vs aider

**blueice** · 05/09/2006, 09h37

Tu devrais mettre tes fichiers en pièces jointes avec les images également, que l'on puisse tester, on ne voit rien sinon...

**MasterOfChakhaL** · 05/09/2006, 09h50

J'aurais tendance à dire qu'il s'agit d'un problème classique du à la différence du modèle de boite qu'utilisent les différents navigateurs

IE, considère que le padding et le margin font parti de la largeur total de la boite alors que mozilla (ainsi que le w3c...) considère que juste le margin fait parti de la largeur de la boite

Une bonne technique pour éviter ce problème est de commencer ta feuille de style par:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
* {
  margin:0;
  padding:0;
}

puis de traiter au cas par cas tes différents éléments. Personnellement, j'évite d'utiliser les margin pour les conteneurs, et je me débrouille avec ce que je mets dedans...

**nais_** · 05/09/2006, 11h24

Voila j'ai mis en pièces jointe une feuille de style, une page php et les images...
Si quelqu'un a envie d'y jeter un oeil

Merci !

**blueice** · 05/09/2006, 11h47

Je pense que ta page est mal construite.

Pourquoi :

•utiliser un tableau pour Bienvenue et Se déconnecter
•utiliser une image rien que pour écrire Bienvenue
il te suffit de faire un fond bleu, une image gif/png transparente pour SKF
et d'écrire bienvenue normalement
...
...
trop long à tout décortiquer, je pense que tu devrais dessiner sur un papier ton design et réfléchir comment construire ta page le plus simplement possible, tu n'aurais plus de problème ou beaucoup moins par la suite.
Voici ce que donne Safari en pièce jointe...

**nais_** · 05/09/2006, 11h54

Merci pour tes conseils Blueice.

Sous Firefox j'obtiens le même résultat que celui que tu as obtenu avec Safari

Le problème c'est que je suis en stage (il me reste plus qu'une semaine et demi) et ici ils n'ont que IE... et jme suis dit j'vais quand même voir si ça fonctionne bien sous Firefox...

JBon, j'vais essayer faire au mieux !

Merci.

**blueice** · 05/09/2006, 12h02

Si tu penses bien la construction de ta page, ca te prend une heure maxi...

Tu peux donner une capture en pièce jointe du résultat que tu souhaites ?

**nais_** · 05/09/2006, 13h12

Une heure maxi ?? Mouais.... mais parce que toi tu es un as alors

Enfin ça me rassure.... ça veut dire que j'aurai quand même le temps de refaire ça proprement dans la semaine et demi qu'il me reste.

J't'ai mis un aperçu de ce que je veux obtenir en pièce jointe.

**nais_** · 05/09/2006, 16h15

J'ai essayé de refaire ma mise en forme ^^
Mais euh.... c'est pas trop ça

En fait, de IE à Mozilla, l'interprétation des pourcentages (pour la taille de mes DIV parce que je veux qu'elles se redimensionnent selon l'écran sur lequel on regarde) n'est pas vraiment identique

J'ai mis des impr' écran pr que vs vs rendiez cpte....

Est-ce quelqu'un aura une solution pour pallier à ce problème ?

Merci d'avance !

**MasterOfChakhaL** · 05/09/2006, 16h53

A part convaincre bill de respecter les recommandations w3c (dont microsoft fait parti....), je ne vois pas trop.

Tes design sont quand même très proches. Je te recommande donc d'accepter un peu de souplesse dans l'interprétation.

**nais_** · 06/09/2006, 10h01

J'ai suivi ton conseil MasterOfChakhaL.... les designs ne rendent pas tt @ fait la même visu mais c'est mieux que rien

[CSS] Pb d'affichage des cadres sous mozilla firefox

CSS

Discussions similaires

Partager

Partager