28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de mise en page avec IE et Firefox.

Bonjour à tous

Je commence depuis peu à vouloir faire mon site et je suis d'emblée confronté à un problème entre l'affichage de IE et Firefox.

Ci-dessous le code basic de ma page. On voit bien que d'un navigateur à l'autre la hauteur des titres n'est pas la même. Que faire ?!

Merci d'avance pour vos réponses.


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

   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 	 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">



<style type="text/css">	 

body { 			  		 
	margin: 5px;
	padding: 0px;
	font: 15px Tahoma, Verdana;
        color: white; 
	background-color: black;
	text-align: center;	
        letter-spacing: 1px;
	}
	  
h1 {
	font: 17px Arial;
        font-weight: bold;
       }
	  
h2 {
	font: 11px Arial;
       font-weight: bold;
      } 

#pageScreen {
	margin-left: auto; 
	margin-right: auto;	 
	text-align : left; 
	width: 900px;
	height: 800px; 
	background-color: blue;
	}	  

#pageHeader { 
	position: relative;
	height: 166px;
	background-color: orange;
	}
	
#pageHeader h1 { 
	position: absolute;
	right: 100px;
	top: 90px;
	}

#pageHeader h2 { 
	position:absolute;
	bottom:0px;
	left:385px;
	}
	
</style>
  
  
</head>
<body> 

	<div id="pageScreen">	 

		<div id="pageHeader">
		 	<h1>Titre H1</h1> 
	  		<h2>Titre H2</h2>
	   
		</div> 
	</div>			 

</body>
</html>

Modifié par jmk-photos (25 Jun 2009 - 08:57)
En effet, je l'ai oublié dans mon copié/collé pour poster mon message, voilà le doctype que j'ai mis sur ma page :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Complété de la façon suivante : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd>

Cela ne change rien au problème !

Ce problème est flagrant sur la balise <h2> qui est bottom: 0; et qui est vraiment "bottom" sur IE, mais qui est décalé d'une vingtaine de px vers le haut sur Firefox.
Modifié par jmk-photos (25 Jun 2009 - 07:55)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif



Pour ce qui est de ton problème, ton doctype n'est toujours pas correct. Il doit être parfaitement "orthographe" :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
Bonjour Laurie-Anne,

Désolé pour ma maladresse !

Je viens de corriger mon premier post avec le code.

J'ai également testé ton doctype, le problème persiste !
Bonjour à tous.

Ton problème est très simple en fait. Les balises de titre ne sont pas interprétées de la même façon par défaut par les deux explorateurs. Lorsqu'il rencontre une balise <h2> sans styles renseignés, Firefox lui applique un margin (bottom pour celui qui te gène dans ton cas) tandis que IE ne lui applique pas de margin. Il te suffit de définir un margin de façon à ce que les deux explorateurs s'en servent et n'utilisent pas leur interpretation par défaut. De cette façon :


#pageHeader h2 { 
	position:absolute;
	bottom:0px;
	left:385px;
	margin: 0px;
}


Ton souci disparait Smiley cligne
Sujet clos
Aller à