18041 sujets

Questions générales et questions de débutants

Css affichage sous ie correct mais pas sous firefox

Bonjour,

voici brièvement mon problème :
j'ai créé une page htm et une feuille de style css

J'ai une "bannière" qui est centrée correctement
vient ensuite un menu centré sous la bannière correctement centré également
devrait venir juste en dessous le Titre du sujet traité sur la page et c'est là que le problème se situe.

En fait, sous IE le titre vient bien juste en dessous du menu par contre sous Firefox, il y a comme une ligne vide qui sépare le menu du titre du sujet.

Voici les codes des pages

pour le html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mon titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="http://radservebeer.free.fr">
<meta name="generator" content="PSPad editor,  www.pspad.com">
 
<link href="site4FA3.css" rel="stylesheet" type="text/css" media="screen" /></head>

<div id="header"><img src="images\ban1.jpg"><img src="images\ban2.jpg"><img src="images\ban3.jpg"><img src="images\ban4.jpg"></div>

<div id="MenuCentre"><div class="horizontal"><a href="accueil.htm" class="horizontal">Accueil<a href="menu1.htm" class="horizontal">Menu 1<a href=""menu2.htm" class="horizontal">Menu 2<a href="menu3.htm" class="horizontal">Menu 3</a><a href="menu4.htm" class="horizontal">Menu 4<a href="menu5.htm" class="horizontal">Menu 5<a href="liens.htm" class="horizontal">Liens<a href="href="contact.htm" class="horizontal">Contact</a></div></div>
<div id="left1"><img src="images\ill1.jpg" align="left"/></div>
<div id="left2"><img src="images\ill2.jpg" align="left"/></div>

<div id="titre1" div class="titre1"><h1>Le titre du premier sujet...</h1></div>
<div id="contenutitre1" class="contenutitre1"><br><h2>Le texte sous le titre 1.</h2></br></div>


<script language="JavaScript" type="text/javascript">

src = ["images/mariage/mariagediap1.jpg","images/mariage/mariage1.jpg", "images/mariage/mariage2.jpg", "images/mariage/mariage3.jpg","images/mariage/mariage4.jpg","images/mariage/mariage5.jpg", "images/mariage/mariage6.jpg"]


url = ["lienimage1.htm", "lienimage2.htm"]

duration = 5;
 
ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document["Ajout_Image"].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout("switchAd()",duration*1000);
}
function liens(){
location.href = url[ct];
} onload = function(){
if (document.images)
switchAd();
}

</script>

<div id="diaporama">
	<a href="javascript:liens();" onmouseover="status=url[ct];return true;" onmouseout="status=''">
	<img name="Ajout_Image" src="images/mariage/mariagediap1.jpg" border="0" id="Ajout_Image"></a>
</div>



<div id="right1" div class="right1"><h1>Titre droit</h1>
<h3>Contenu texte sous le titre droit
<br><br>saut de ligne et texte qui suit
<br><br>saut de ligne et suite texte
<br> Texte...</br></h3>
</div>


</body>
</html>


et le code css


body {
	width: 100%;
	margin-top: 0px;
	margin-left:0px;
	overflow:hidden;
	background-color:#99FF66;
}

#header,#MenuCentre, #horizontal,#titre1,#titre2,#contenutitre1,#contenutitre2,
#left1,#left2,#contenutitre1,#diaporama,#right1, #right2,
#h1, #h2, #h3 {


}

/* safari and opera need this */

#header, #horizontal,#footer {width:100%}

/* safari and opera need this */


#header {
	text-align:center;
}

#MenuCentre {
	text-align:center;
}

#left1 {
	
	position: absolute; top: 40%;
	width: 20%;
}

#left2 {
	
	position: absolute; top: 70%;
	width: 20%;
}
#right1 {
	
	position: absolute; left:70%; top: 220px;
	width:30%;
	float:left;
}

#right2 {
	
	position: absolute;left:70%; top: 410px;
	width: 30%;
	float:left;
}


#diaporama {
	position: absolute; top: 240px; left:20%;
	width:50%;
	float:left;	
}


#titre1 {
	margin-top: 0;
	padding-top: 0;
	position: absolute; left: 20%;
	width:50%;
	float:left;
	

}

#titre2 {
	position: absolute; top: 450px; left: 20%;
	width:50%;
	float:left;

}


#contenutitre1 {
	position: absolute; left: 20%;
	width:50%;
	float:left;
		
}

#contenutitre2 {
	position: absolute; top: 40%;left: 20%;
	width:50%;
	float:left;
	
}

a.horizontal {
	color: white;
	height:100%;
	padding: 10px;
	margin-bottom: 0px;
	font-size: 14px;
	font-display:bold;
	background-color: green;
	text-decoration: none;
	font-family:arial;
	font-weight: bold;
	text-align: center;
	display: inline;
}

a:hover{

	background-color:#99FF66 ;
}


#h1 {
	font-family: Arial, Helvetica, sans-serif;
	color: #009900;
	font-size:110%;
	background-color:#F4F29C;
	font-weight: bold;
	text-align: left;

}

#h2 {
	font-family: Arial, Helvetica, sans-serif;
	color: black;
	font-size: 100%;
	text-align: left;
	font-weight: normal;
	margin-top : 0px;

}

#h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	font-style: normal;
	font-weight: normal;
	text-align: left;
	
}


/* -------------------- */
/* CLASSES */
/* -------------------- */

.titre1{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	
}

a.horizontal {
	color: white;
	height:10px;
	padding:5px;
	font-size: 14px;
	font-display:bold;
	background-color: green;
	text-decoration: none;
	font-family:arial;
	font-weight: bold;
	text-align: center;
	display: inline-block;
	width:110px;
}

a:hover{

	background-color:#99FF66 ;
}


h1 {
	font-family: Arial, Helvetica, sans-serif;
	color: #009900;
	font-size:80%;
	background-width:50%;
	background-color:#F4F29C;
	font-weight: bold;
	text-align: left;


}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	color: black;
	font-size: 80%;
	text-align: left;
	font-weight: normal;

}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-style: normal;
	font-weight: normal;
	text-align: left;
	
}


Je pense que le code peut être amélioré et j'y travaille mais je voudrais vraiment comprendre comment faire pour que l'affichage des différents blocs se fassent à l'identique sous I.E. et sous Firefox.

Merci pour votre aide,

Fabrice
Modifié par pg59180 (25 May 2009 - 19:30)
Sujet clos
Aller à