[Résolu] Parfait dans IE, beaucoup moins dans FF

Bonjour

J'ai un p'tit soucis sur la page d'accueil (page tunnel, sic) de mon site, que j'ai modifié samedi sans la tester ailleurs que dans IE

Voir ici : -http://www.aube-nature.com

Dans IE c'est "parfait", mais dans FF c'est disons... décalé et je comprends pas trop pourquoi !!!



Le code de ma page :

<div class="page"><br />&nbsp;
	<div class="image">
		<a href="http://www.aube-nature.com/photo_nature.php">
			<img id=photo src="images/design/photo-nature.jpg" alt="Photo nature du d&eacute;partement de l'Aube par C&eacute;dric Girard" border="0" />
        </a>
	</div>
	<div class="texte">
        <h1>Photo nature et animali&egrave;re</h1>
        <h2>Auteur Photographe animalier dans l'Aube</h2>
			<p>C&eacute;dric Girard, sp&eacute;cialis&eacute; en photo d'animaux domestiques en milieu naturel (<strong>chats</strong>, <strong>chiens</strong>, <strong>chevaux</strong>), vous propose ses photographies de <strong>sanglier</strong>, chevreuil, oiseau, renard, lynx, loup, ours...			  Nombreux mammif&egrave;res et oiseaux, mais aussi insectes, amphibiens et batraciens</p>
		<h2>R&eacute;alisation de reportages, vente d'images, illustration</h2>
			<p>Commande de reportages animaliers (faune sauvage ou domestique) ou en relation avec la nature - pour illustration ou publicit&eacute;. &Eacute;leveurs et clubs, n'h&eacute;sitez pas &agrave; me contacter pour vos manifestations ! </p>
			<p class="hautpage"><a href="photo_nature.php" title="Photo nature et animali&egrave;re">=== Cliquez ici pour entrer sur le site ===</a></p>
	</div>
</div>

(j'ai mis uniquement le code présent entre les balises BODY)


Et la feuille CSS :

/*   Définition du layout  */

body{
 	text-align: center;
	background: #ffffff;
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 12px; 
	color: #666666; 
	margin-top:0px; 
}

.page{
 	position: relative;
 	width: 680px;
 	margin: 50px auto;
 	background: #FFF;
 	color: inherit;
 	
 	text-align: left;
 }

.image {
	float: left;
	position: relative;
	text-align: left;
	width: 380;
}

.texte {
	float: right;
	position: relative;
	text-align: left;
	width: 300;
	padding-top: 15px;
}


/*  Définition des styles  */

a {  color: #999999; text-decoration: none}
a:hover {  color: #333333; text-decoration: none}

.hautpage {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #999999;
	text-decoration: none;
	padding-top: 2.2em;
	text-align: center;
}

h1 {
	font-size: 16px;
	color: #E0E0E0;
	margin-bottom: 0.2em;
}

h2 {
	clear: both;
	text-align: left;
	font-size: 0.8em;
	border: 1px solid #E0E0E0;
	background: #FFF url('postinfo.png') repeat-x;
	color: #BBBBBB;

	margin-top: 0.5em;
	margin-bottom: -1.7em;
	padding: 0.5ex;
	/* -moz-border-radius connu pour ne pas etre valide */
	-moz-border-radius: 5px
}

p {
	font-size: 10px;
	text-align: justify;
	color: #CCCCCC;
}

Je ne vois pas trop ce qui cloche ??? Pour la disposition des blocs je pensais que tous les browsers "réagissaient" pareil , par contre pour ma balise H2, sur IE la marge du bas est carrément immense est c'est la raison pour laquelle j'ai mis une marge négative pour aligner correctement mon paragraphe... Mais FF ne l'interprête pas aussi bien


Edit : question en passant... Est-ce bien raisonnable de "mixer" des px et des em au niveau des CSS ? Et si ça venait de ça l'histoire de la balise H2 ?
Modifié par cedric_g (12 Jun 2006 - 16:28)

Salut,

Ton problème vient du fait que tu as mis un clear: both; dans ton h2. Ainsi ton titre, et tous le contenu qui suit, se positionne automatiquement sous ton image qui est postionnée en flottant. Pour positionner ton texte à droite de ton image, il suffit de supprimer la propriété clear. Tu peux également enlevé float: right et position: absolute du bloc texte. Tu laisses ainsi ton bloc se postionner naturellement à droite de ton image.

Pour ton titre h2, tu peux mettre à 0 sa marge inférieure. Tu constateras ensuite qu'il y a toujours une marge entre ton titre et ton texte. Cette marge est celle de ton paragraphe. Ainsi si tu souhaites que le texte soit collé au titre, il faut mettre à 0 la marge inférieur du titre et la marge supérieure du paragraphe.

Juste pour finir, je pense que tu devrais mettre une autre couleur à ta police car ce n'est pas très lisible du fait que le texte est très petit. Il faut utiliser la technique du JMMPP (Je me met plus près) pour lire le texte .

J'éspère que cela t'aidera .
Modifié par ymhotepa (12 Jun 2006 - 14:15)

Super merci

Faut vraiment que je me mettes à ces histoires de clear et de position car c'est un poil confu dans ma tête (je n'ai pas honte de dire que j'y vais à tâton)

Pour les marges, OKI, j'avais pas pensé à ça !


Enfin, pour la couleur disons que c'est plus par esthétisme et... pour le référencement que j'ai choisi cette présentation, que pour l'internaute (j'avoue...)

Arrrghhh ça marche pô


Si je fais exactement ce que tu dis, mes titres H2 s'étendent jusqu'au bord gauche de ma zone "page" !

J'ai donc modifié légèrement en remettant "float:right" à mon calque "texte" mais ça recommence (sous IE, nickel, sous FF ça passe plus !)

Je crois que j'ai trouvé pourquoi ca ne marchais pas. Tu as oublié de mettre px dans .text { width: 300px; } et .image { width: 380px; }.

En les rajoutant, tous redevient normal à priori. Par contre, contrairement à ce que j'ai dis au début, il faut laisser float: right ou left dans le bloc .texte .

J'aurais omis les px ??....

Honte à moi... Pfff comme quoi IE sait "deviner" mes pensées (lol je suis développeur spécialisé en technos Microsoft... Pas du tout web je précise)

Edit : MERCI ça marche ! Génial !
Modifié par cedric_g (12 Jun 2006 - 16:03)

Si ton problème est réglé, n'oublie pas de mettre le petit [Résolu] qui va bien dans ton sujet.

Oups pardon