[Résolu] Problème IE / Firefox

Bonjour,

Je suis en train de faire un site sur SPIP où je fais un tout nouveau squelette, en reprenant des élément du squelette de base. Je débute sur tout ce qui concerne les CSS, mais jusque là, j'arrivais toujours à parvenir à peu près au rendu souhaité, sur tous les navigateurs, mais là ça coince...

Je prévois un affichage en 3 colonnes classiques, au dessus d'un header qui contient lui même plusieurs blocs différents.

J'ai commencé par ça :
une colonne gauche, avec en css : width:165px ; float:left;
une colonne droite, avec en css : width:165px ; float:right;

et pour la partie centrale, j'étais parti au départ sur :
width:100%; margin-left:175px; margin-right:175px;

Tout allait pas trop mal, sauf qu'en reprennant des éléments du squelettes de SPIP pour l'affichage d'articles, contenant notamment des clear:both je me suis retrouvé avec un gros décalage, les articles ne commençant qu'en dessous du contenu des colonnes.

Après une journée de galère à essayer de comprendre d'où ça venait, j'ai trouvé une page internet expliquant le problème et proposant des solutions

J'ai opté, après différents essais pour la solution overflow:hidden

Et là ça marche nickel, enfin soit sur firefox, soit sur IE, mais pas sur les 2

si je mets overflow:hidden; margin-left:175px; margin-right:175px; c'est nickel sur IE, mais j'ai des espaces de 175px entre la partie centrale et les colonnes sur firefox

Et donc, si je mets overflox:hidden; margin-left:10px; margin-right:10px; c'est nickel sur firefox, mais par contre sur IE, la partie centrale s'étale sur la totalité de l'écran en allant se cacher sous les 2 colonnes.

J'essaie d'avoir un affichage parfait sur firefox, en tolérant de légers bugs d'affichages sous IE (décalages d'1 pixel par ci par là), mais là c'est pas possible.

Si quelqu'un peut m'aiguiller vers une solution qui me permettrait de retrouver un affichage satisfaisant sur Firefox, comme sur IE, sans reprendre la présentation des articles et les balises clear:both

Merci d'avance

Ronan

PS : si c'est pas clair j'essaierai d'ajouter des copies d'écran
Modifié par Ronan29 (28 Jul 2007 - 01:25)

Bonjour Ronan29 et bienvenue sur Alsacréations ,

Sans une page en ligne il va être difficile pour les membres du forum de te venir en aide.

Dans l'état tes extraits de code n'apporte rien à la compréhension de tes soucis.

ps: sur le forum tu disposes de bbcode pour encadrer lisiblement tes codes. Il est vivement recommandé de les utiliser

Merci Igor, je vais essayer de présenter plus clairement mon problème.

Voic l'adresse provisoire actuelle du site que je fais, avec le bon rendu sous firefox (pour l'instant j'essaie déjà d'obtenir le rendu graphique sur la page d'accueil, la plupart des liens ne fonctionnent donc pas, ou renvoient vers des pages très laides) :

http://survie-bretagne.footballgaelique.com/

Côté CSS, après le header et le fil d'ariane, j'ai donc un contenu structuré en trois colonne avec les styles css suivants :

#contenu {
	width: 100%;
	padding: 0; }

#partie-centrale {
	overflow: auto;
	margin-left: 10px;
	margin-right: 10px; }

#colonne-gauche {
	float : left;
	width: 165px;
	line-height: 100%; }

#colonne-droite {
	float : right;
	width: 165px;}

au départ pour la partie centrale il y avait le style suivant :

#partie-centrale {
         margin-left: 175px;
         margin-right: 175px; }

J'avais un autre problème, une partie du contenu central ne s'affichait qu'en dessous de la colonne de gauche (mais bien centré tout de même).

Voilà sinon, le code html du contenu de la colonne centrale :

<div id="partie-centrale">
	<div class="edito">
		<p>Il existe un pays où le chef de l'Etat affiche des liens d'amitié avec des dirigeants auteurs de crimes contre l'humanité.</p>
		<p>Un pays qui facilite le détournement de sa propre " aide au développement ".</p>
		<p>Une démocratie qui, loin de ses frontières, truque des élections et couvre l'assassinat de ses propres coopérants.</p>
		<p>Un état de droit qui autorise ses services spéciaux à s'allier, en terre étrangère, avec les réseaux mafieux et des praticiens de la purification ethnique.</p>
		<p>Un pays d'où l'on recrute des mercenaires et d'où l'on pilote des guerres civiles sur un autre continent.</p>
		<p>Ce pays, c'est la France. Le continent humilié, c'est l'Afrique. Leur liaison incestueuse, c'est la Françafrique.</p>
		<p align="center"><strong><em>L'insupportable en Afrique a d'abord des causes politiques !</em></strong></p>
	</div>
	
		
	[(#REM) Les deux derniers articles ]
	<B_articles_recents>
	<div class="liste-articles">
		<h2 class="invisible"><:derniers_articles:></h2>
		<ul>
			<BOUCLE_articles_recents(ARTICLES) {par date}{inverse} {0,3} {doublons}>
			<li>
			[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire{150,100})]
				[<p class="surtitre">(#SURTITRE)</p>]
				<h3 class="titre"><a href="#URL_ARTICLE">#TITRE</a></h3>
				[<p class="soustitre">(#SOUSTITRE)</p>]
				<small>[(#DATE|affdate_jourcourt)][, <:par_auteur:> (#LESAUTEURS)]</small>
				[<div class="#EDIT{intro} texte">(#INTRODUCTION)</div>]
				<br class="nettoyeur" />
			</li>
			</BOUCLE_articles_recents>
		</ul>
	</div>
	</B_articles_recents>

	<br class="nettoyeur" />
			
	[(#REM) Articles suivants ]
	<B_articles>
	<div class="liste-articles">
		[(#ANCRE_PAGINATION)]
		[(#ENV{debut_articles}|?{'',' '})<h2 class="invisible"><:articles_recents:></h2>]
		<ul>
			<BOUCLE_articles(ARTICLES) {par date}{inverse} {doublons} {pagination}>
			<li>
				<h3 class="titre"><a href="#URL_ARTICLE">#TITRE</a></h3>
				<small>[(#DATE|affdate_jourcourt)][, <:par_auteur:> (#LESAUTEURS)]</small>
			</li>
			</BOUCLE_articles>
		</ul>
		[<p class="pagination">(#PAGINATION)</p>]
	</div>
	</B_articles>
</div>

et les style CSS correspondant :

.liste-articles ul { 
	margin: 0; 
	padding: 0; 
	list-style: none; }


.liste-articles li { 
	margin-bottom: 1em; 
	clear: both; }

.liste-articles li .titre {
	font-size: 1.1em;
	font-weight: bold; }

.liste-articles li .spip_logos {
	float: right;
	margin-left: 16px;
	margin-bottom: 16px;
	border: 1px solid #EFBABD ;
	clear: right; }

.liste-articles li p { margin: 0; padding: 0; }

.liste-articles li .enclosures {
	float: right;
	text-align: right;
	max-width: 60%;
	margin: 0; }

.liste-articles li small {
	display: block;
	font-size: 0.71em; }

.liste-articles li .texte {
	margin-top: 5px;
	margin-bottom: 2em;
	border: 1px solid #EFBABD;
	padding: 0.9em;
	font-size: 0.85em;
	line-height: 1.4em; }
	
.liste-articles h3 {
	font-size: 1.1em;
	font-weight: bold; }
	
.liste-articles a {
	text-decoration: none;
	color: #954040; }
	
.liste-articles a:hover {
	text-decoration:underline;
	color: #954040; }

.pagination { font-size: 0.90em; }

/* Espaceur de blocs */
.nettoyeur { clear: both; margin: 0; padding: 0; border: none; height: 0; line-height: 1px; font-size: 1px; }

/* Non visible a l'ecran */
.invisible { position: absolute; top: -3000em; height: 1%; }

C'est beaucoup plus long, mais il y a nettement plus d'éléments pour comprendre mon problème. J'espère que ça pourra suffire pour que quelqu'un puisse m'éclairer en m'aidant à obtenir sur IE le même rendu que sous Firefox.

Ronan

Bonjour,

Pose un height: 1%; à ton bloc central (#partie-centrale), c'est une question de haslayout pour ie6. pour plus d'explications : voir là

Bon courage

Merci beaucoup

C'est nickel, après un remplacement des margin-left|right par des padding-left|right pour un résultat vraiment propre.

Je vais pouvoir parir en vacance tranquille, avec un gros blocage de dépassé.

Merci encore,

Ronan