[Résolu] Différence IE et Mozilla : je n'y arrive pas !!!

Question

GuizBizet

5 Feb 2005 à 15:43

Bonjour à tous,

Je suis en train de préparer la nouvelle version de mon site tout en css j'en suis à la mise en page de la page index qui définiera le style de tout mon site et j'arrive déjà à des décalages en tre IE et mozilla et j'ai beau retourner le problème dans tous les sens je n'y arrive décidément pas !!!

voici le css de ma page

body {
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
	margin: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	}

#conteneur {
	position:absolute;
	left: 50%; 
	width: 1000px;
	height: 760px;
	margin-left: -500px; /* moitié de la largeur */
	margin-top: 10px;
	border: 2px solid #0099FF;
    }

#header {
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 5px;
	height: 140px;
	background-color: #99cccc;
	font-size: 0.6em;
	}

#centre {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	margin-right: 5px;
	height: 590px;
	margin-left: 205px;
	background-color: #9999CC;
	overflow: auto;
	font-size: 0.6em;
	}

#gauche {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
	padding-left: 5px;
	margin-left: 5px;
	left: 0px;
	height: 590px;
	width: 200px;
	position: absolute;
	background-color: #0099cc;
	}

#pied {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
	padding-left: 5px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	height: 15px;
	background-color: #99cc99;
	font-size: 0.6em;
	}

/* Les DIV du Header page */

.banniere {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
	padding-left: 5px;
	height: 110px;
	background-color: #FFFF66;
	}

.infos {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
	padding-left: 5px;
	height: 30px;
	background-color: #0099FF;
	}

/* Le menu */

dl {
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin: 0px;
	padding-top: 0px;
	list-style-type: none;
	}

dt {
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin: 0px;
	padding-top: 0px;
	list-style-type: none;
	}

dd {
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin: 0px;
	padding-top: 0px;
	list-style-type: none;
	}

ul {
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin: 0px;
	padding-top: 0px;
	list-style-type: none;
	}

li {
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin: 0px;
	padding-top: 0px;
	list-style-type: none;
	}

#menu {
	left: 2em;
	widtH: 10em;
	position: absolute;
	top: 3em;
	font-size: 0.8em;
	}

#menu dt {
	border-right: #0099FF 1px solid;
	border-top: #0099FF 1px solid;
	font-weight: bold;
	color: white;
	background: #0099FF;
	filter:alpha(opacity=70);
	margin: 2px 0px;
	border-left: #0099FF 1px solid;
	cursor: pointer;
	line-height: 20px;
	border-bottom: #0099FF 1px solid;
	height: 20px;
	text-align: center;
	}

#menu dd {
	border-right: #3399FF 1px solid;
	border-top: #3399FF 1px solid;
	margin-top: -1.9em;
	z-index: 100;
	background: #3399FF;
	filter:alpha(opacity=70);
	left: 10.1em;
	border-left: #3399FF 1px solid;
	width: 10em;
	border-bottom: #3399FF 1px solid;
	position: absolute;
	}

#menu ul {
	padding-right: 2px;
	padding-left: 2px;
	padding-bottom: 2px;
	padding-top: 2px;
	}

#menu li {
	font-size: 85%;
	line-height: 18px;
	height: 18px;
	text-align: center;
	}

#menu li a {
	display: block;
	color: white;
	text-decoration: none;
	}

#menu dt a {
	display: block;
	color: white;
	text-decoration: none;
	}

#menu li a:hover {
	text-decoration: none;
	display: block;
	background: #003399;
	color: white;
	font-weight: bold;
	}

/* Paragraphes et titres */

p {
	margin: 0px 0px 10px;
	}

div#centre h2	{
	margin-left: 15px;
	padding-left: 25px ;
	padding-right: 25px ;
	line-height: 25px ;
	font-size: 16 px ;
	font-weight: bold;
	color: #0099FF ;
	background: url(Images/PhareAnim_25px.gif) no-repeat left bottom ;
	border-bottom: 1px solid #0099FF ;
	}

Et voici mon code html

<body>
<div id=conteneur>
	<div id=header>
		<div class="banniere">une bannière montage sur photoshop avec bateau à gauche - nom du site à droite et date du jour en bas à droite</div>
		<div class="infos">cadre en 3D avec à gauche date de dernière connection et à droite boutons en 3D enfoncés ajout favoris et mettre en page de démarrage</div>
	</div>
	<div id=gauche> 
	<dl id=menu>
	<dt onmouseover="javascript:montre('smenu1');"onmouseout="javascript:montre();">Accueil</dt>
		
      <dd id=smenu1 onmouseover="javascript:montre('smenu1');"onmouseout="javascript:montre();"> 
        <ul>
          <li><a href="">Accueil</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </dd>
	<dt onmouseover="javascript:montre('smenu2');"onmouseout="javascript:montre();">Sixtine</dt>
		
      <dd id=smenu2 onmouseover="javascript:montre('smenu2');"onmouseout="javascript:montre();"> 
        <ul>
          <li><a href="">Nouvelles</a></li>
          <li><a href="">Graphiques</a></li>
          <li><a href="">Albums Photos</a></li>
        </ul>
      </dd>
	<dt onmouseover="javascript:montre('smenu3');"onmouseout="javascript:montre();">Albums Photos</dt>
		
      <dd id=smenu3 onmouseover="javascript:montre('smenu3');"onmouseout="javascript:montre();"> 
        <ul>
          <li><a href="">Sixtine</a></li>
          <li><a href="">Notre mariage</a></li>
          <li><a href="">Autres albums</a></li>
        </ul>
      </dd>
	<dt onmouseover="javascript:montre('smenu4');"onmouseout="javascript:montre();">Liens Divers</dt>
		
      <dd id=smenu4 onmouseover="javascript:montre('smenu4');"onmouseout="javascript:montre();"> 
        <ul>
          <li><a href="">Informatique</a></li>
          <li><a href="">Chants</a></li>
          <li><a href="">Voile</a></li>
          <li><a href="">Chasse à courre</a></li>
        </ul>
      </dd>
	<dt onmouseover="javascript:montre('smenu5');"onmouseout="javascript:montre();">Lieux préférés</dt>
		
      <dd id=smenu5 onmouseover="javascript:montre('smenu5');"onmouseout="javascript:montre();"> 
        <ul>
          <li><a href="">Val-André</a></li>
          <li><a href="">St Quay Portrieux</a></li>
          <li><a href="">La Croslaie</a></li>
        </ul>
      </dd>
	<dt onmouseover="javascript:montre('smenu6');"onmouseout="javascript:montre();">Nos voyages</dt>
		
      <dd id=smenu6 onmouseover="javascript:montre('smenu6');"onmouseout="javascript:montre();"> 
        <ul>
          <li><a href="">La Crête - Juil 02</a></li>
          <li><a href="">La Tunisie - Mars 03</a></li>
        </ul>
      </dd>
	<dt><a href="">Téléchargements</a></dt>
	<dt><a href="">CV</a></dt>
	</dl>
	</div>
	<div id=centre>dans un cadre carré de couleur bleue comme la brodure du site, en haut : information "Vous êtes ici : Accueil > Photos > Sixtine et en dessous contenu du site
		<h2>Test titre article</h2>
	</div>
	<div id=pied>A droite date de dernière modif de la page et à droite liens webmaster avec copyright
	</div>
</div>	
</body>

Voila les décalages
IE :

Mozilla :

Quelqu'un pourrait il m'aider ?

Merci d'avance
Modifié le 10 Feb 2005 - 13:13

Julien L

5 Feb 2005 à 16:00

Tu peux mettre correctement ta version IE, car là on va pas trop pouvoir t'aider sauf en se tapant de refaire ta page avec ton code.

Merci

knarf

5 Feb 2005 à 16:06

lut

je ne sais pas si cela reglera tout tes problèmes mais essaye d'utiliser le selecteur universel

*{
margin: 0;
padding: 0;
}

cela te mets tout à zéro et evite des problèmes du entre les différences d'interpretation des marges et padding des navigateurs par défaut aprés tu définit pour chaque bloc individuellement ton margin et padding .

@+

GuizBizet

5 Feb 2005 à 16:09

Excusez moi voici un lien ce sera peut être plus facile

Par ici

J'espère que ce sera mieux

Rodolphe

Administrateur

5 Feb 2005 à 16:14

la feuille de style serait plus courte et plus facilement lisible en utilisant les raccourcis CSS (padding, background, margin au lieu de -right, -left, -bottom, -top, -color...)

GuizBizet

5 Feb 2005 à 16:19

Désolé mais je débute tout juste et j'y vais pas à pas. Comme je démarre de 0 j'y vais petit à petit pour comprendre tout

pierreandre

5 Feb 2005 à 17:38

Je te comprends GuiszBizet. Je suis pas mal comme toi.

Alors pour reprendre la même chose que mes prédécesseurs avec un exemple (sauf erreur de ma part ! ah ah ah !) :

body       { 
           font           		  : 10pt/12pt "Trebuchet MS", Verdana, Arial, Sans-serif;
           color                          : #660000;
           background               : #EEEEEE url(oiseaux.jpg) no-repeat top left;
           margin                      : 0;
	  padding                     : 0;
          width                         : 100%;
          }

.li *
		 {
          float				      : left;
	  width				    : 20em;
	  border		           : 0;
	  padding			  : 0;
	  margin		           : 0;
          list-style-type		  : none;
		 }

Essaie et dis-nous si ça marche mieux.
Amitiés, pierreandre
Modifié le 05 Feb 2005 - 23:25

pierreandre

5 Feb 2005 à 23:32

MODIFICATION

Stephan et Igor m'ont fait remarquer qu'il valait mieux mettre pour toute la feuille CSS : * {margin:0; padding:0;}
en début de feuille CSS,
plutôt que de l'écrire dans un ou plusieurs codage dans la feuille de style, comme j'ai voulu te le montrer précédemment.

amitiés, pierreandre

Raphael

Administrateur

5 Feb 2005 à 23:54

pierreandre a écrit :
MODIFICATION

Stephan et Igor m'ont fait remarquer qu'il valait mieux mettre pour toute la feuille CSS : * {margin:0; padding:0;}

Explications :

http://forum.alsacreations.com/topic.php?fid=14&tid=631 Smiley cligne

pierreandre

6 Feb 2005 à 13:07

Ah ah ah ! ça m'est difficile d'être clair...
Après l'aide reçu, j'ai interprété que le code * {margin:0; padding:0;} s'insérait dans un code particulier pour agir. ex :


li *
         {
          float				  : left;
          width				  : 20em;
          border		          : 0;

	  padding			  : 0;
          margin		          : 0;

          list-style-type		  : none;
         }

et ça marche...

Mais il est plus pratique de l'écrire en début de feuille CSS pour obtenir à peu près le même comportement des navigateurs et, ensuite, travailler comme on l'entend.
Voilà. Peut-être ai-je encore mal compris.
Amitiés, pierreandre

knarf

7 Feb 2005 à 17:40

et knarf il sent du bec c'est pas lui qui en parle en premier du selecteur universel?

dominique

7 Feb 2005 à 18:11

knarf a écrit :
et knarf il sent du bec c'est pas lui qui en parle en premier du selecteur universel?

Bonsoir Knarf Smiley smile

... A mon avis, ton post est passé inaperçu, plusieurs raisons à ça :

- le post qui suit le tiens était en cours de rédaction lorsque tu as posté, et l'auteur de ce post n'a pas vu le tien.

- tu aurais dû utiliser la balise "code" ton post aurait été plus visible.

Mais justice te sera rendue Smiley cligne

Une tite astuce qui permet de rappeler que tu avais donné la réponse sans pour autant nous parler de ton bec Smiley cligne

Tu peux faire un lien direct vers ton premier post comme ça :
http://forum.alsacreations.com/topic.php?fid=4&tid=1748&p=1#p17363
Modifié le 07 Feb 2005 - 18:13

Igor

7 Feb 2005 à 18:57

knarf a écrit :
et knarf il sent du bec c'est pas lui qui en parle en premier du selecteur universel?

Je crois que Pierre-André citais un autre post où cette question était soulevée:
http://forum.alsacreations.com/topic.php?fid=4&tid=1744&p=1#copy

pierreandre

8 Feb 2005 à 04:15

Ah ah ah ! tu as bien raison knarf...
Je ne parle pas de grand chose en premier, mais je rigole bien (pas de toi !)

Et puis, j'ai beaucoup de difficultés à retrouver les posts qui m'intéressent...

Alors tout le merite, s'il y en a, te revient... aucun problème.

amitiés, pierreandre Smiley biggrin

knarf

8 Feb 2005 à 12:58

lut la foule Smiley cligne

Je me suis trouvé un peu sec dans le post qui concerne mon bec.

un petit smiley's comme celui ci ceci Smiley cligne

aurait été le bienvenue à la fin de mon post.

Et il est vrai que j'aurais pu utiliser la balise code dans un souci de clareté.

@ + Smiley cligne

dominique

8 Feb 2005 à 13:16

Hello knarf Smiley smile

Je te l'avais dit que justice te serais rendu Smiley cligne

C'est vrai que la balise code est importante pour la lecture des posts Smiley smile

Bah ! ça s'appelle l'expérience, tu feras mieux la prochaine fois Smiley cligne

Sujet clos