Compatibité ie7 et firefox2

aconitnapel Messages postés 4 Date d'inscription Statut Membre Dernière intervention -
Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention - 26 févr. 2007 à 01:18

Bonjour,
Je gère un site internet depuis peu de temps... et j'ai un problème d'affichage du site sous firefox.

Sous IE tout s'affiche correctement.

http://blogsperso.orange.fr/web/resizer?image=2459106&type=2

Et quand on affiche le site avec Firefox sa part en vrille!!
Le mot Edito reste à la même place que sur IE, par contre le cadre empiète sur le menu qui devient innaccessible!

http://blogsperso.orange.fr/web/resizer?image=2459115&type=2

Code Du fichier index.html concernant le cadre de l'Edito :

<div id="corps">
<p> <br /> <img src="Accueil/imgedito.jpg" class="Loïc" alt="" />
<img src="Accueil/Edito.png" class="Edito" title="" alt="" /></p>

<p><img src="Accueil/B.png" class="B" alt="" />ienvenue... ...
</div>

code du fichier css concernant la balise "corps" :

#corps
{
width: 480px;
margin-top: 0;
padding: 0;
background-image: url("neige.png");
background-repeat: repeat;
border: 2px inset black;
text-align: justify;
font-family: Garamond, "Times New Roman", Times, serif;
position: relative;
top: 80px;
left: 14px;
}

#corps p
{
text-indent: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 0px;
}

Je sais que je peux descendre le cadre de l'Edito pour que l'allignement soit bon sous firefox, mais sa me décale la mise en page sour IE7. Et en plus y'a toujours cet espace en haut qui viens se rajouter sous firefox et pas sous IE7!
Comment faire pour enlever l'espace que crée firefox dans le cadre de l'Edito ?
Cet espace on le retrouve dans chaques balises div de cette page, dans les carrés bleus sur la droite...

Afficher la suite

4 réponses

Réponse 1 / 4

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

Bonjour,

Le code que tu nous proposes n'est pas suffisant.
Le “corps” se place relativement à autre chose. Nous en avons besoin.
Le code entier de la page et de la feuille de styles est nécessaire (tu peux en enlever les données qu'on ne doit pas voir, mais pas le code).

On peut cependant te proposer ces pistes.

Pour éviter “cet espace en haut” dans Ff, tu peux essayer :

html , body {
  margin : 0;
  padding : 0;
  }

+ Évite les caractères “exotiques” dans tes noms :

  class="Loïc"

devrait être

  class="Loic"

Réponse 2 / 4

aconitnapel Messages postés 4 Date d'inscription Statut Membre Dernière intervention

Fichier html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>blablabla</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <meta name="keywords" content="gnagna" >       
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="Accueil/Accueil2.css" />
    <link rel="stylesheet" type="text/css" href="Menu/Menu_ac.css" />
     



<script type="text/javascript">
			<!--
				}
			}
			//-->
		</script>


<script type="text/javascript">
<!--
function decompte()
{
	
}
//-->
</script>

</head>
        

<body>

<div id="en_tete" onmouseover="javascript:cache('smenu1');">
<a href="index.html"><img src="Menu/Banniere.png" title=""/></a>
			</div>


		<div id="Menu">
		
			<div id="Menu1" onmouseover="javascript:montre('smenu1');">
				<img src="Menu/new/Menu1.png" title=""/>
			</div>
			<div id="Menu2" onmouseover="javascript:montre('smenu2');">
				<img src="Menu/new/Menu2.png" title=""/>
			</div>
			<div id="Menu3" onmouseover="javascript:cache('smenu1');">
				<a href="fichier.html"><img src="Menu/new/Menu3.png" title=""/></a>
			</div>
			<div id="Menu4" onmouseover="javascript:cache('smenu1');" >
				<a href="fichier.html"><img src="Menu/new/Menu4.png" title=""/></a>
			</div>
			<div id="Menu5" onmouseover="javascript:cache('smenu1');" >
				<a href="fichier.html"><img src="Menu/new/Menu5.png" title=""/></a>
			</div>
			<div id="Menu6" onmouseover="javascript:cache('smenu1');" >
				<a href="archives.html"><img src="Menu/new/Menu6.png" title=""/></a>
			</div>
			<div id="Sous-Menu">
				<div id="smenu1">
					<div id="Sous-Menu1" title="">
						<a href="fichier.html"><img src="Menu/new/Sous-Menu1.png" title=""/></a>
					</div>
					<div id="Sous-Menu2" title="">
						<a href="fichier.html"><img src="Menu/new/Sous-Menu2.png" title=""/></a>
					</div>
				</div>
				<div id="smenu2">
					<div id="Sous-Menu3" title="">
						<a href="fichier.html"><img src="Menu/new/Sous-Menu3.png" title=""/></a>
					</div>
					<div id="Sous-Menu4" title="">
						<a href="fichier.html"><img src="Menu/new/Sous-Menu4.png" title=""/></a>
					</div>
					
				</div>
			</div>			
		</div>

<div id="Rdv">
			<h3>Dernières nouvelles :</h3>
			<center>blablablabla<br />
blablablabla</center>
		</div>




		<div id="New">
			<center>blablablabla
 mercredi 28 février.<br \><br \>
                 bblablalabla
<br /></center>
		</div>



              <div id="liens">
<h3> Liens utiles :</h3>
blablabla
              </div>
			  
              <div id="newsletter">

<h3>Contacts :</h3>
<center><a href="contacts.php" target="_blank">Nous contacter.</a></center>
	          </div>
			  
              <div id="decompte">
<p><center>Sa approche !<br />
<script type="text/javascript">decompte();</script>
</center></p>
	          </div>
			  
			  <div id="fb">
			  <a href='http://www..fr' title='' /> <img width='160' height='300' border='0' alt='' src='http://www..fr/img/.jpg' /></a>
			  </div>

			  
			  
       <div id="corps">
          <p> <br /> <img src="Accueil/imgedito.jpg" class="Loïc" alt="" />		   
			<img src="Accueil/Edito.png" class="Edito" title="" alt="" /></p>
       
			<p><img src="Accueil/B.png" class="B" alt="" />ienvenue sur le site.</p>
<p>
blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
</p>


<p class="signature"><b>blablabla</b><br />

</p>
       
       </div>




 <div id="Pied_de_page">
	   <table border="1">
				<tr>
					<td class="milieu">
						
<h5>site optimisé pour Internet Explorer.</h5>
</td>
				</tr>
			</table>
       </div>
	
	    
   </body>
</html>

Réponse 3 / 4

aconitnapel Messages postés 4 Date d'inscription Statut Membre Dernière intervention

Fichier CSS accueil2.css

body
{
	width: 790px;
    height: 560px;
	
	
	margin-top: 0px;
	margin-left: 10px;
	
	padding-top: 0px;
	
	background-image: url("fond.png");
	background-repeat: repeat-y; 
}

#en_tete
{
	position: absolute;
    top: 10px;
    left: 10px;
}

#Rdv
{
    margin-top: 3px;
    line-height: 15px;
	width: 247px;
    height: 90px;
	position: absolute;
	top: 164px;
	left: 517px;
	border: 2px dotted blue;
	padding: 3px;
	background-color: #B5E1F5;
	color: #EB717D;
       	
}

#Rdv h3, #Rdv p
{
	text-indent: 5px;
	text-align: center;
	font-family: Garamond, Tahoma, Serif;
}

#New
{
    line-height: 15px;
	width: 247px;
	height: 120px;
	position: absolute;
	top: 275px;
	left: 517px;
	border: 2px dotted blue;
	padding: 3px;
	background-color: #B5E1F5;
	color: #EB717D;
	
}

#New h3, #Rdv p
{
	text-indent: 5px;
	text-align: center;
	font-family: Garamond, Tahoma, Serif;
}

#New h3
{
	text-decoration: underline;
}

#Rdv h3
{
	text-decoration: underline;
}


#menu
{
	margin-top: 10px;
	position: absolute;
	top: 10px;
	left: 10px;
}

ul, li
{
	margin: 0px;
	padding-left: 0px;
}

ul
{
	width: 255px;
	height: 340px;
	background: transparent url("Fond_menu.png") top left no-repeat;
	list-style-type: none;
	padding-top: 70px;
	font-size: 14px;
	font-family: "Book Antiqua", Garamond, "Times New Roman", Times, serif;
}

li
{
	display: inline;
}

li a
{
	display: block;
	width: 255px;
	height: 21px;
	color: #3339AD;
	text-decoration: none;
	text-align: center;
	line-height: 21px;
}

strong
{
	font-size: 12px;
	font-weight: bold;
	color: black;
}

li a:hover 
{
	color: #000000;
	font-weight: bold;
	background: transparent url("Fond_menu.png") top left no-repeat;
}

#corps
 {
	width: 480px;
	margin-top: 10px;
	padding: 0;
    padding-top: none;	
	background-image: url("neige.png");
	background-repeat: repeat;
 	border: 2px inset black;
	text-align: justify;
	font-family: Garamond, "Times New Roman", Times, serif;
	position: relative;
    top: 80px;
	left: 14px;
 }

#corps p
{	
	text-indent: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: none;
}

.arnaud
{
	float: left;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
}

.Edito
{
	margin-top: 10px;
	margin-left: 80px;
}

.signature
{
	font-family: Tahoma, Arial, serif;
	text-align: right;
	padding-right: 10px;
	padding-bottom: 10px;
}

#Pied_de_page
{
	width: 756px;
	height: 50px;
	position: relative;
	top: 90px;
	background-image: url("Fond_pied_de_page.png");
	border: 2px solid black;
	text-align: center;
}

table
{
	border: none;
}

.milieu 
{
	width: 760px;
	height: 50px;
	vertical-align: middle;
	border: none;
}


#liens
{
    margin-top: 3px;
    line-height: 15px;
	width: 247px;
    height: 280px;
	position: absolute;
	top: 410px;
	left: 517px;
	border: 2px dotted blue;
	padding: 3px;
	background-color: #B5E1F5;
	color: #EB717D;
       	
}

#liens h3, #liens p
{
	text-indent: 5px;
	text-align: center;
	font-family: Garamond, Tahoma, Serif;
}

#liens h3
{
	text-decoration: underline;
}

#newsletter
{
    margin-top: 3px;
    line-height: 15px;
	width: 247px;
    height: 80px;
	position: absolute;
	top: 717px;
	left: 517px;
	border: 2px dotted blue;
	padding: 3px;
	background-color: #B5E1F5;
	color: #EB717D;
       	
}

#newsletter h3, #liens p
{
	text-indent: 5px;
	text-align: center;
	font-family: Garamond, Tahoma, Serif;
}

#newsletter h3
{
	text-decoration: underline;
}

#decompte
{
    margin-top: 3px;
    line-height: 15px;
	width: 247px;
    height: 80px;
	position: absolute;
	top: 815px;
	left: 517px;
	border: 2px dotted blue;
	padding: 3px;
	background-color: #B5E1F5;
	color: #EB717D;
       	
}

#decompte h3, #liens p
{
	text-indent: 5px;
	text-align: center;
	font-family: Garamond, Tahoma, Serif;
}

#decompte h3
{
	text-decoration: underline;
}

#fb
{
    height: 305px;
    width: 165px;
   	position: absolute;
	top: 950px;
	left: 557px;
	padding: 3px;
}

Réponse 4 / 4

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

Ah, c'est déjà mieux. Merci.
Est-ce qu'on peut avoir les tailles de toutes les images ?

Discussions similaires

Version IE portable ou standalone

plantage IE7 avec RTL.FR

impossible suprimer historique sous IE7

IE7 "sans modules complémentaires" ???

Votre réponse

Discussions similaires