[Résolu, bidouille corp.] Mise en page FF/IE

Salut,
j'ai un probleme de positionnement de mes blocs. Enfin j'dirais que c'est Firefox qui pose le plus de problemes, mais bon même si le public cible (des profs) ont bien plus de chance d'utiliser IE que Firefox j'aimerais bien que mon site soit compatible sur ces 2 navigateurs.

Bref voici 2 screenshots :

IE :

Firefox :

Voici le lien vers la page web
Désolé pour l'hebergement lycos/multimania mais bon.

le lien vers mon css

Et donc ce que j'aimerais, c'est que :

1 - Le titre et sous titre qui sont en haut à droite soient affichés comme sur Firefox (c'est à dire dans le petit bloc jaune pale et que le texte soit pas coupé lol).

2 - que les 2 blocs de textes principaux de gauche et de droite soient comme dans IE.

Voilà si quelqu'un pouvait me sauver
Modifié par Foonaz (21 Apr 2006 - 16:04)

Bonjour,

a écrit :
1 - Le titre et sous titre qui sont en haut à droite soient affichés comme sur Firefox (c'est à dire dans le petit bloc jaune pale et que le texte soit pas coupé lol).

Il n'est pas coupé chez moi : Firefox 1.5. Tu as dû trouver la solution et modifier quelque chose, car je vois que la police affichée n'est pas la même que celle des captures d'écrans.

a écrit :
2 - que les 2 blocs de textes principaux de gauche et de droite soient comme dans IE.

La mise en page me semble identique. Il n'y a que la colonne de droite sous Firefox qui semble placée plus haut que la version Internet Explorer. C'est de ça qu'il s'agit ?
Modifié par (21 Apr 2006 - 11:48)

Bah normalement sur IE 6 les caracteres des titres et sous titres sont "coupés" puisqu'il comprend que les mots sortent du bloc qui leur est attribué alors que sous Firefox il ne les coupe pas. (voir les screenshots)

Et pour les blocs de gauche et droite, c'est normal qu'ils ne soient pas alignés en haut pareil, mais sous Firefox les 2 blocs remontent trop haut (voir les screenshots).

La chez toi l'affichage sur IE et Firefox est exactement pareil ?

Parce que le but est que le site soit optimisé pour IE puisque les gens qui iront dessus utilisent plus IE que Firefox.
Modifié par Foonaz (21 Apr 2006 - 12:05)

Pour la hauteur des blocs, c'est IE qui deconne Foon, tes marges sont plus grande qu'elle ne le devrait, donc en fait, FF a les bonnes valeurs, mais pour régler le problémes, tu mets des un margin-top plus grand pour firefox avec un hack :

#textegche {
	float:left;
	font-family: Rockwell, Arial, sans-serif;
	margin-left: 20px;
        margin-top: 130px !important;
	margin-top: 100px;
	width: 360px;
	height: 430px;
	text-align: justify;
	
}


#textedrte {
	
	font-family: Rockwell, Arial, sans-serif;
	margin-left: 415px;
        margin-top: 90px !important;
	margin-top: 60px;
	width: 360px;
	height: 454px;
	text-align: justify;
}

Aprés, le mieux, c'est un commentaire conditionnel pour definir une feuille de style dédié a IE, ca evite d'avoir une CSS bourré de hack.

Logiquement, ca devrait fonctionner.
Normalement, lorsque dans un classe, deux attribut identique sont définie, c'est le deuxième qui est pris en compte.
Mais lorsque tu mets !important, les navigateurs conventionnels comme FF prenne celui marqué en compte et ignore le second.
Mais IE n'étant pas conventionnel...il prend le second en compte. ^^

Aprés pour les titres/sous-titres, j'ai fini ma journée, je rentre chez moi, je regarderais plus tard.

Bon bah ça, ça marche nickel c'est cool, heureusement que IE ne sait pas lire les css ^^

Reste plus qu'à réussir à bien positionner le titre et sous titre.

Bon bah j'ai reussi en fait, c'est de la vieille bidouille mais bon ...

J'ai fait une feuille de style juste pour IE et une autre pour Firefox, avec les commentaires conditionnels d'IE (enfin un truc "positif" sur ce navigateur) pour éviter de mettre les !important pour les blocs de gauche et de droite.

Et pour les titre et sous-titre du haut j'ai mis en commentaire conditionnel une ligne fictive de type

<!--[if lte  IE 6]><p>&nbsp;</p><![endif]-->

afiin qu'IE passe une ligne et dans sa feuille de style j'ai bidouillé les line-height et les margin pour que ça se mette au bon endroit ^^

Voilà, dommage pour la beauté du code mais bon, si jamais quelqu'un a une autre solution.