Problème précis de compatibilité Firefox et IE7.

Question

BassT4ken

5 Mar 2009 à 14:18

Bonjour,

Dans le but d'un projet, je rencontre un problème de compatibilité entre FF et IE7. Le site s'affiche très bien sur IE7 alors que sur firefox, il y a un retrait sur le titre et suite à ça, j'ai d'énorme problème de placement avec firefox.

Voici les images du problème (je n'ai pas mis de margin-top pour mieux voir le problème) :

Sous FF :
http://www.pixenli.com/images/mini/1236257893056368100.jpg
Voir l'image en grand

Sous IE7 :
http://www.pixenli.com/images/mini/1236258459085139100.jpg
Voir l'image en grand

Et voici mon code :

CSS

#page{
	overflow:auto;
	margin: 0 30px 0 30px;
	height:auto;
	}


#text_page h1{
	font-size:large;
	margin-left:49px;
	margin-bottom:30px;
	}
	
#text_page{
	display:block;
	}


#text_page p{
	font-size:small;
	text-align:justify;
}

	
#cadre_page{
	display:block;
	overflow:auto;
	margin-left:20px;
	margin-bottom:20px;
	background-color:#e1e6df;
	border:2px solid #b5bab3;
	height:310px;
	width:250px;
	float:right;
	
}

#cadre_page img{
	margin:0 5px 5px 5px;
	width:240px;
	height:180px;
	}

#cadre2_page{
	margin: 5px;
	background:url(../Images/banarticle1.png);
	width:240px;
	height:20px;

.titre_article{
	font-weight:bold;
	font-size:small;
	color:black;
	}

PHP

<?php 

// Titre de la page affichée
$page_title = 'Bienvenue ';

// Header de la page
include ROOT.'Common/header.php';


?>
	
<div id="page">
	<div id="cadre_page">
		<div id="cadre2_page">
			<span class="titre_article">Caractéristiques
			</span>
		</div>
		<img src="photos/photo1.jpg"/>
		
		
		
	</div>
	
	<div id="text_page">
		<h1>Camsim</h1>
		<p>
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
v
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]

		</p>

	</div>
	
</div>

merci

BassT4ken

5 Mar 2009 à 14:58

J'ai modifié un peu partout et testé quelques possibilités et j'ai enfin trouvé le problème.

Avant :

#page{
overflow:auto;
margin: 0 30px 0 30px;
height:auto;
}

Après :

#page{
margin: 0 30px 0 30px;
}

J'ai donc retiré l'overflow et height:auto.

Je vais continuer et je vous préviendrai dans ce topic au cas où j'aurais un autre problème de ce type.

Si vous voyez quelque chose de louche, prevenez moi Smiley lol

merci.

BassT4ken

9 Mar 2009 à 13:55

Bon, comme je le disais, j'allais me retrouver avec un autre problème dont je ne trouve pas la solution ^^^

IE7 :
http://www.pixenli.com/images/mini/1236602239081392200.jpg
Voir l'image en grand

Firefox :
http://www.pixenli.com/images/mini/1236602517084851000.jpg
Voir l'image en grand

Codes :

page_test.css

#page{
margin-left:30px;
margin-right:30px;
margin-top:30px;
}


#text_page h1{
	font-size:large;
	margin-left:49px;
	margin-bottom:30px;
	}


#text_page p{
	font-size:small;
	text-align:justify;
}

#text_page{
	display:block;
	height:auto;
	}
	
#cadre_page{
	display:block;
	margin-left:20px;
	margin-bottom:20px;
	background-color:#e1e6df;
	border:2px solid #b5bab3;
	height:auto;
	width:250px;
	float:right;
	
}

#cadre_page img{
	margin:0 5px 5px 5px;
	width:240px;
	height:180px;
	}

#cadre2_page{
	margin: 5px;
	background:url(../Images/banarticle1.png);
	width:240px;
	height:20px;
}

.titre_article{
	font-weight:bold;
	font-size:small;
	color:black;
	}
	
.cadre_texte_caract1{
	margin: 0 5px 5px 5px;
	background:url(../Images/banarticle2.png);
	width:240px;
	height:20px;
	text-align:center;
	float:none;
	}
	
.cadre_texte_caract2{
	margin-left:5px;
	margin-bottom:5px;
	width:120px;
	height:15px;
	float:left;
	text-align:left;
	}
	
.cadre_texte_caract3{
	margin-left:5px;
	margin-bottom:5px;
	width:120px;
	height:15px;
	float:right;
	text-align:left;
	}
		
.texte_caract1{
	font-size:small;
	color:black;
	}
	
.texte_caract2{
	font-size:x-small;
	color:black;
	font-weight:bold;
	}
	
.texte_caract3{
	font-size:x-small;
	color:black;
	}

page_test.php


?>
	
<div id="page">	
	<div id="cadre_page">
		<div id="cadre2_page">
			<span class="titre_article">Caractéristiques
			</span>
		</div>
		<img src="photos/photo1.jpg"/>
		
		<div class="cadre_texte_caract1"><span class="texte_caract1">Géographie</span></div>
		<div class="cadre_texte_caract2"><span class="texte_caract2">Pays</span></div>
		<div class="cadre_texte_caract3"><span class="texte_caract3">Belgique</span></div>
		<div class="cadre_texte_caract2"><span class="texte_caract2">Climat</span></div>
		<div class="cadre_texte_caract3"><span class="texte_caract3">Tempéré</span></div>
		<div class="cadre_texte_caract2"><span class="texte_caract2">Superficie</span></div>
		<div class="cadre_texte_caract3"><span class="texte_caract3">50000 km²</span></div>
		

		
		<div class="cadre_texte_caract2"><span class="texte_caract2">Religion</span></div>
		<div class="cadre_texte_caract3"><span class="texte_caract3">Bouddhiste</span></div>
		<div class="cadre_texte_caract2"><span class="texte_caract2">Langue</span></div>
		<div class="cadre_texte_caract3"><span class="texte_caract3">Belge</span></div>
		<div class="cadre_texte_caract1"><span class="texte_caract1">Culture</span></div>
	</div>
	
	<div id="text_page">
		<h1>Camsim</h1>
		<p>
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
v
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]

		</p>

	</div>
	
</div>

Si vous avez besoin d'autre chose, prévenez moi Smiley smile

Merci

Sujet clos

CSS et mise en forme, CSS3

Problème précis de compatibilité Firefox et IE7.