IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Firefox VS Internet explorer - la guerre des marges


Sujet :

CSS

  1. #1
    Membre à l'essai
    Inscrit en
    novembre 2005
    Messages
    27
    Détails du profil
    Informations forums :
    Inscription : novembre 2005
    Messages : 27
    Points : 19
    Points
    19
    Par défaut Firefox VS Internet explorer - la guerre des marges
    Bonjour,

    J'espère que vous pourrez m'éclairer.

    Voici mon code :
    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
    <div id="page">
    	<div id="top">
    		Ajouter aux favoris | Contact
    	</div>
     
    	<div id="header">
    		<div id="titre">
    			// TITRE
    		</div>
    		<div id="banner">
    			// PUB
    		</div>
    	</div>
    ...
    </div>
    Et là le 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
    #page{
    	width: 815px !important;
    	width: 808px;
    	border: 1px solid #333399;
    	border-top:0px;
    	padding: 2px;
    	padding-top:0px;
    	margin-top:-3px; //pour que ce soit collé en haut de page
    	background: #ffffff;
    }
     
     
    #top {
    	border: 1px solid #333399;
    	padding: 0px;
    	background: #3b60b8;
    }
     
    #header {
    	text-align: left;
    	border: 0px;
    	margin: 0px;
    	background-color : #3b60b8; 
    }
     
    #titre {
    	float: left;
    	padding: 0px;
    	margin: 0px;
    	width: 334px;
    	height: 62px;
    	background : url(../images/title.gif);
    	background-repeat:no-repeat;
    	background-color : #3b60b8;
    }
     
    #banner {
    	float: right;
    	padding: 0px;
    	margin: 0px;
    	height: 62px;
    	background-color : #3b60b8; 
    }
    Voici ce que j'ai sous IE :


    Et voici ce que j'ai sous firefox :


    Pour une fois c'est sous IE que ça s'affiche correctement (la pub fait 468px de largeur et le titre est sur 334px, le total faisant bien 802px, la largeur de ma page).

    Pourquoi sous firefox y-a-t-il ce pixel d'écart ?

    Comment puis-je y remédier ?

    Quelqu'un peut-il m'aider ?

    Je vous remercie d'avance

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 868
    Points : 16 258
    Points
    16 258
    Par défaut
    Je pense que ton soucis est un soucis de bordures.

    En effet, si tu définis un élément div de 100px de large avec une bordure de 1px tout autour, sur Firefox il fera 100px + 1px à gauche + 1px à droite = 102px et sur IE ça fera 100px étant donné que la bordure est inclue dans l'élément.

  3. #3
    Membre à l'essai
    Inscrit en
    novembre 2005
    Messages
    27
    Détails du profil
    Informations forums :
    Inscription : novembre 2005
    Messages : 27
    Points : 19
    Points
    19
    Par défaut
    Merci beaucoup de ta réponse Bisounours. Mais ce serait pas plutôt l'inverse ? En virant les bordures sous firefox le contenu s'élargit.

    En tous cas, j'ai orienté mon debuggage vers les bordures comme tu me l'as conseillé.

    Je faisais un peu au pif et...

    Ca a marché !

    J'ai agrandi la div page de 1px et j'ai mis la bordure extérieure à 2px :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    	width: 816px !important; //avant : 815px
    	width: 808px;
    	border: 2px solid #333399; //avant : 1px
    C'est pas forcément moche une bordure extérieure à 2px, mais c'est vrai que c'est pas ce que je cherchais au départ.

    Je ne mets pas le sujet à résolé, si quelqu'un a une explication au pixel mystère ce serait chouette

    Merci

Discussions similaires

  1. Firefox OK, Internet Explorer KO !
    Par Thoumai dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 19/03/2008, 17h05
  2. FireFox et Internet explorer
    Par safiy dans le forum Débuter
    Réponses: 1
    Dernier message: 14/02/2008, 21h46
  3. Décalage entre Firefox et Internet Explorer 6
    Par guimotri dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 02/10/2007, 15h41
  4. Bug d'affichage ancienne version de firefox ou internet explorer
    Par ipeteivince dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 03/07/2007, 17h07
  5. [W3C] firefox et internet explorer
    Par ph_anrys dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 20/02/2006, 11h53

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo