rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

Compatibité ie7 et firefox2

Posté par aconitnapel, le dimanche 25 février 2007 à 13:11:50
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...
Configuration: Windows XP
Firefox
Répondre à aconitnapel  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Gihef, le dimanche 25 février 2007 à 16:18:52
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épondre à Gihef

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
aconitnapel, le dimanche 25 février 2007 à 19:16:51
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&g­t;
</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>
blablablablablablablablablablablablablablablablablablablabla­blablablablablablablablablablablablablablablabla
</p>


<p class="signature"><b>blablabla</b>&­lt;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épondre à aconitnapel

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
aconitnapel, le dimanche 25 février 2007 à 19:22:37
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épondre à aconitnapel

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 Gihef, le lundi 26 février 2007 à 01:18:16
Ah, c'est déjà mieux. Merci.
Est-ce qu'on peut avoir les tailles de toutes les images ?
 
   
Répondre à Gihef
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger Pack de compatibilité Microsoft Office 2007 3Pack de compatibilité Microsoft Office 2007 - En installant le pack de compatibilité pour Microsoft Office 2000, Office XP ou Office 2003, vous pouvez ouvrir, modifier et...Catégorie: Bureautique
Licence: Freeware/gratuit
Télécharger IE7 open last closed tab 3.5.0.0IE7 open last closed tab - Quoi de plus énervant lorsqu'on utilise un navigateur que de fermer accidentellement un onglet ! Mozilla Firefox et Opera...Catégorie: Navigateurs
Licence: Freeware/gratuit
Télécharger eChanblard 15.0eChanblard - Ce logiciel est une modification de eMule. Il permet d'obtenir des taux de transfert plus importants qu'avec eMule et il est...Catégorie: Internet
Licence: Freeware/gratuit
Télécharger Beneton Movie GIF 1.1.2Beneton Movie GIF - Exigences minimales : Une carte graphique compatible DirectX 8 ou plus récente (avec un minimum de 32 MB de mémoire...Catégorie: Animation
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « compatibité ie7 et firefox2 »