Dimensions différentes entre Firefox et IE

Question

swan49

26 Oct 2006 à 17:12

Bonjour,

Je rencontre une différence d'affichage entre Firefox et IE6.

J'ai un bloc DIV contenant une image de 155 pixels de large qui apparaît normalement sur Firefox mais sur IE il manque environ 2 pixels en largeur.

Voici le CSS correspondant :

#gauche {
position : absolute;
left : 0;
width : 155px;
background-image: url(barregauche.gif);
height: 800px;
top: 192px;
}

Quelqu'un aurait-il une idée ?

Merci d'avance Smiley smile

Thomas D.

26 Oct 2006 à 18:01

Salut

Hors contexte, c'est un peu difficile de trouver la cause de ton problème ... Tu n'as pas une page en ligne ? A défaut, on se débrouillera avec le code complet de la page (CSS & html) Smiley cligne

swan49

26 Oct 2006 à 18:15

Merci beaucoup pour la réponse ! Smiley cligne

La page n'est pas en ligne donc voici le code html :

<body>



<div id="conteneur">

	  <div id="header">
	    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="780" height="192">
          <param name="movie" value="banniere_OrthoMaine.swf" />
          <param name="quality" value="high" />
          <embed src="banniere_OrthoMaine.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="192"></embed>
        </object>
</div>

	  <div id="gauche">
  </div>
	  <div id="espacemedecin">
	  <table>
	  <tr>
	  <td class="medecinheader"></td>
	  </tr>
	  <tr>
	  <td class="medecindefaut"><b>Login :</b> </td>
	  </tr>
	  <tr>
	  <td class="medecindefaut"><input name="login" type="text" size="12" /></td>
	  </tr>
	  <tr>
	  <td class="medecindefaut"><b>Password :</b></td>
	  </tr>
	  <tr>
	  <td class="medecindefaut"><input name="password" type="text" size="12" /></td>
	  </tr>
	  <tr>
	  <td class="boutonok"><input name="bt_espacemedein" type="button" value="OK" />	  </td>
	  </tr>
	  <tr>
	  <td class="medecinfooter"></td>
	  </tr>
	  
	  </table>
  	  </div>
	  <div id="centre">
  	  <img src="titre.gif" width="459" height="25" /><p> </p> 	
	  <p>Notre catalogue est régulièrement mis à jour, n'hésitez pas à le consulter.	  </p>
	  
	  
	  <table>
	  <form action="" method="get">
	  <tr>
	  <td><b>Pathologie :</b></td><td> <select name="pathologie" size="1">
	    <option>Post-chirurgie du canal carpien</option>
	    <option>Immobilisation Post-traumatique</option>
	    <option>Arthrose</option>
	    <option>Tendinite</option>
	    <option>Entorse</option>
	    <option>Kyste</option>
	  </select></td>
	  <tr>
	  <td><b>Membre :</b></td>
	  <td><select name="membre">
	    <option>Le poignet</option>
	    <option>La main</option>
	    <option>Le coude</option>
	    <option>L'épaule</option>
	    <option>Le pied</option>
	    <option>La cheville</option>
	    <option>Le genou</option>
	    <option>La hanche</option>
	    <option>Le rachis cervical</option>
	    <option>Le rachis dorso-lombaire et l'abdomen</option>
	  </select></td>
	  <tr>
	    <td> </td>
	    <td> </td>
	  </tr>
	  <tr>
	  <td></td><td align="right"><input name="bt_recherche" type="button" value="Rechercher" /></td>
	  </tr>
	  </form>
		</table>
	  <p>
	  <img src="Instantané_02-03.png" />	  </p>
	  </div>

	  
	  <div id="pied"><p></p> </div>
</div>
	  



</body>

et le CSS :


body {
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size : 0.6em;
    margin : 0;
     padding : 0;
      }
    select {
     width : 300px;
     font-family : Verdana, Arial, Helvetica, sans-serif;
     font-size : 10px;
      }
    #header {
    height : 192px;
    margin : 0;
    padding : 0;
      }
    
	#conteneur {
    position : relative;
    margin : 0 auto;
    width : 780px;
	  }
	  
    #centre {
	margin-left : 155px;
	padding-left: 10px;
      }
	 
    #gauche {
	position : absolute;
	left : 0;
	width : 155px;
	background-image: url(barregauche.gif);
	height: 800px;
	top: 192px;
	overflow: visible;
      }
	  
    #pied {
    height : 30px;
    margin-left : 155px;
      }
	  
	  
    #pied p {
    margin-right : 0;
    margin-bottom : 10px;
    padding-left : 10px;
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    font-weight : bold;
      }
	  
    #espacemedecin {
    position : absolute;
    left : 28px;
    top : 360px;
    margin : 0;
    padding : 0;
    width : 124px;
      }
	  
    .medecindefaut {
    background-image : url(espace_medecin_02.gif);
    width : 119px;
    padding-left : 10px;
    background-repeat : repeat-y;
    color : #333333;
      }
	  
    .boutonok {
    background-image : url(espace_medecin_02.gif);
    width : 119px;
    padding-left : 68px;
    background-repeat : repeat-y;
      }
	  
    .medecinfooter {
     background-image : url(espace_medecin_03-04.gif);
     height : 53px;
     width : 119px;
     background-repeat : no-repeat;
      }
	  
    table {
    border-collapse : collapse;
     }
	 
    .medecinheader {
    background-image : url(espace_medecin_01.gif);
    height : 38px;
    width : 119px;
    background-repeat : no-repeat;
      }

Thomas D.

26 Oct 2006 à 18:37

Désolé, mais sans les images, je n'arrive pas à visualiser le problème Smiley ohwell

swan49

26 Oct 2006 à 19:47

Désolé, ça sera peut-être plus clair comme ça :

Merci pour ta réponse.

http://forum.alsacreations.com/preview.php?file=9160-probIE.gif&size=150
preview

http://forum.alsacreations.com/preview.php?file=9160-probMozilla.gif&size=150
preview

Une idée ?

Thomas D.

26 Oct 2006 à 20:10

Ce genre de décalage me fait généralement crier au "three pixels jog", mais c'est un bug associé aux flottants, et je n'en vois pas dans ta page.

Est-ce que tu as correctement déclaré le doctype de ta page, sans prologue xml, etc ?

swan49

27 Oct 2006 à 09:44

Oui à priori c'est déclaré correctement, à moins que je me trompe :


[b]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/b]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Orthomaine</title>
<link href="orthomaine.css" rel="stylesheet" type="text/css" />
</head>

Merci pour ton aide !

Thomas D.

27 Oct 2006 à 12:16

Salut.

Pourquoi utiliser un padding & un margin sur le #centre ? Tu en as besoin pour un arrière-plan ?

Sinon, qu'est ce que ça donne en utilisant seulement

#centre {
   margin-left: 165px;
}

Par ailleurs, j'ai noté qu'il y a une image de 459px de largeur dans #centre. Ce qui nous fait 459px + 165px (marge & padding) + 155px (col gauche) = 779px sur 780px. C'est un peu serré, tout ça Smiley smile

Est-ce que ça va mieux en réduisant soit la marge, soit la taille de l'image ?

Edit : je confirme, ton doctype semble correct Smiley cligne

Modifié par Sopo (27 Oct 2006 - 12:17)

swan49

27 Oct 2006 à 14:19

Salut ! Merci pour ton aide.

J'utilise un margin sur #centre car le bloc #gauche est en absolute, même si je n'y suis pas obligé, j'aime autant que les blocs ne se chevauchent pas, et le padding quant à lui serrre à décaler le contenu de #centre pour qu'il ne soit pas collé au bloc #gauche. J'espère que ce sera aussi clair pour toi que ça l'est pour moi Smiley cligne

De toute manière en indiquant pour #centre :

margin-left: 165px;
ou
padding-left : 10px;
margin-left : 155px;
ou
padding-left : 165 px;

j'ai le même symptome.

En revanche, je crois qu'une erreur s'est glissé dans ton calcul :
459px + 165px (marge & padding) + 155px (col gauche) = 779px sur 780px.

en fait on a uniquement d'après moi :

459px + 165px (marge & padding)

puisque la col gauche est en absolute et ne rentre pas dans le flux normal, donc logiquement il y a largement la place. Même en supprimant l'image on de toute façon le même symptome.

Pour info dans le div #header placé juste au dessus de la col gauche, il y a une anim flash, je sais pas si ça peut aider, je me demande s'il n'y a pas un bug ou des marges par défaut pour ce type d'image, car à l'arrivée il est possible que #gauche soit bien placé et que #header soit décalé de 2 px environ vers la gauche ce qui pourrait donner cet effet visuel.

Merci, si tu as d'autres idées je suis preneur. Smiley smile

Thomas D.

27 Oct 2006 à 14:46

a écrit :
en fait on a uniquement d'après moi :

459px + 165px (marge & padding)

C'est juste ... au temps pour moi Smiley cligne

à force de chercher des sources d'erreurs possible, je finis par les inventer Smiley lol

Je ne vois toujours pas d'où ça peut venir ...

Voici comment j'aurais structuré la page (sans position absolue), en dernier recours :

<body>
    <div id="global">
        <div id=header">
            Bannière en Flash
        </div>
        <div id="wrapper">
            <div id="sidebar">
                Contenu de la colonne de gauche
            </div>
            <div id="content">
                Contenu de la colonne de droite
            </div>
        </div>
        <div id="footer">
            Contenu du pied de page
        </div>
    </div>
</body>

body {
   font: 80% Verdana, Arial, sans-serif;
   margin: 0;
   padding: 0;
}
#global {
   width: 780px;
   margin: 0 auto;
}
#header {
   height: 192px;
   overflow: auto;
}
#wrapper {
   overflow: auto;
   background: url(barre-gauche.gif) repeat-y left;
}
#sidebar {
   float: left;
   width: 155px;
   background: green url(barre-gauche.gif) repeat-y left;
}
#content {
   margin-left: 165px;
   margin-right: 10px;
}
#footer {
   height: 30px;
}

Corrections pour IE < 6 (à confirmer pour IE7)

#header {
   overflow: visible;
}
#wrapper {
   overflow: visible;
   height: 1%;
}

Modifié par Sopo (27 Oct 2006 - 14:47)

Sujet clos

CSS et mise en forme, CSS3

Dimensions différentes entre Firefox et IE