28220 sujets

CSS et mise en forme, CSS3

La page ne s'affiche pas correctement sous FireFox

Bonjour,

Je m'adresse aux participants de ce forum, qui m'ont aidé plusieurs fois de résoudre quelques problèmes avec du CSS.

A cette fois je rencontre un problème avec l'affichage d'une page par le FireFox.
La page du site intranet est faite entierement avec des conteneurs <div>. Tout au début, elle ne s'affichait pas correctement sous FireFox, mais sous IE tout était nickel. J'ai donc validé cette page et la feuille de style associée, auprès de W3C. Meme après la validation FireFox altérait l'affichage (sous IE 6.0, bien evidemment, il n'y avait pas de problèmes).
Je voudrais savoir d'ou potentiellement les erreurs peuvent provenir?
Bonjour,

Sans ton code, ou mieux une page en ligne, ce n'est pas facile d'esquisser une réponse Smiley cligne .
voici le code:
***************************************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv='Content-Type' content='text/html;charset=iso-8859-1'>
	<meta name='keywords' lang='fr' content='CRAM Auvergne, portail, intranet'>
	<meta name='author' content='Anna Yarkovaya'>
	<title>Page du Centre Informatique: Accueil</title>
          
	<STYLE type='text/css'>
	@import '../presentation.css';
	</STYLE>
	<SCRIPT LANGUAGE='JavaScript' type='text/javascript' src='../fonctions.js'></SCRIPT>
</head>
<body class=body_s style='background-attachment:fixed; background-image:URL(../images/service/fon3.gif)'>
<div id='page' style='margin-top:-11px;' class='norm'>
	<div class='band_top' style='width:351px; height:10px; float:left; padding-bottom:3px'>
		<div style='float:left; margin:6px 3px 2px 4px'><img src='../images/decor/fleche.gif' style='filfer:FlipH()' alt='fleche'></div>
		<div class='band_item' style='float:left; padding-top:3px; padding-bottom:1px; padding-left:7px' align=left><a class=lp href='#'>Portail</a></div>
		<div class='bande' style='float:left; margin:3px 0 3px 75px'>[&nbsp;05 Septembre 2005, Lundi&nbsp;]</div>
	</div>
	<div class='band_top' style='width:136px; height:10px; float:left; margin:0px 0 0 1px'>
		<div class='band_item' style='padding-top:4px; padding-bottom:2px; padding-left:7px;' align=left><a class=lp href='#' target='main'>FAQ</a></div>
	</div>
	<div class='band_top' style='width:135px; float:left; margin:0 0 0 1px'>
		<div class='band_item' style='padding-top:4px; padding-bottom:2px; padding-left:7px' align=left><a class=lp href='#'>Forum</a></div>
	</div>
	<div class='band_top' style='width:131px; float:left; margin:0 0 0 1px'>
		<div class='band_item' style='padding-top:4px; padding-bottom:2px; padding-left:7px' align=left><a class=lp href='#' target='main'>Contact</a></div>
	</div>



		<div id=logo_s align=left>
		<div style='margin:1px -1px 0 0; float:left'><img src='../images/service/logo.gif' style='/*border-top:solid 1px gray*/'alt='logo'></div>
		<div>
			<img style='margin:1px 0 10px -1px' src='../images/service/img_top2.gif' alt='faq'>	
			<img style='margin:1px 0 10px -3px' src='../images/service/img_top1.gif' alt='forum'>
			<img style='margin:1px 0 10px -3px' src='../images/service/img_top3.gif' alt='contact'>
		</div>
		</div>

		<div id='main' align=left style='margin-top:-11px; display:table; width:100%; height:100%'>


		<div id='panel_left'>
		<div id='menu'><div class='option_menu' id='ac' style='margin-bottom:1px; background-color:#FCC987'>
				<div class='menu_item' style='margin:2px 0 2px 10px'><a class=lp  style='color:#ffffff' href='ac'>Accueil</a></div>
		      </div><div class='option_menu' id='rh' style='margin-bottom:1px'>
				<div class='menu_item' style='margin:2px 0 2px 10px; color:#ffffff'><a class=lp href='#' target=_self onMouseOver="javascript:changeBG('rh','#FCC987')" onMouseOut="javascript:changeBG('rh','#5A5D5A')">Espace RH</a></div>
			</div><div class='option_menu' id='da' style='margin-bottom:1px'>
				<div class='menu_item' style='margin:2px 0 2px 10px; color:#ffffff'><a class=lp href='#' target=_self onMouseOver="javascript:changeBG('da','#FCC987')" onMouseOut="javascript:changeBG('da','#5A5D5A')">Droits d'acc&egrave;s</a></div>
			</div><div class='option_menu' id='pa' style='margin-bottom:1px'>
				<div class='menu_item' style='margin:2px 0 2px 10px; color:#ffffff'><a class=lp href='#' target=_self onMouseOver="javascript:changeBG('pa','#FCC987')" onMouseOut="javascript:changeBG('pa','#5A5D5A')">Petites annonces</a></div>
			</div><div class='option_menu' id='pr' style='margin-bottom:1px'>
				<div class='menu_item' style='margin:2px 0 2px 10px; color:#ffffff'><a class=lp href='../procedures/index.php' target=_blanc onMouseOver="javascript:changeBG('pr','#FCC987')" onMouseOut="javascript:changeBG('pr','#5A5D5A')">Procédures</a></div>
			</div></div>
		</div>



		<div style='float:left; margin:0px -2px 0px 3px; width:447px; background-color:white; text-align:center;'>
			
			
			<div style='width:445px; height:7px; margin:0px 1px 1px 1px; background-color:#5A5D5A; text-align:left'>
				<div style='float:left; margin:4px 3px 2px 4px'><img src='../images/decor/fleche.gif' alt='alt'></div>
				<div class='bande' style='padding-top:2px; padding-bottom:2px'>Journal du service</div>
			</div>

			
			<div style='width:425px; text-align:justify; padding-bottom:7px; padding-top:7px'>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim  veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo  consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui  blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor  cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim  assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.  Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam  processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera  gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula  quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes  in futurum.<br>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim  veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo  consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui  blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor  cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim  assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.  Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam  processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera  gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula  quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes  in futurum.<br>
   				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim  veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo  consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui  blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor  cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim  assum. Typi non habent claritatem insita<br>
			</div>
		</div>
		


		<div id=panel_right style='margin:0 0 0 1px;'>
			<div id=bloc_right align=left style='margin:0 0 0 -2px'>

				

				<div id=personnel style='float:left; margin:0 -3px -2px 1px'>
					<div class=entete align=left>	
						<div class='menu_item' style='color:#ffffff; margin:2px 1px 2px 10px'>Espace personnel</div>
					</div>
					<div class=bloc align=left style='width:114px'>
						<div class='bloc_item'>&nbsp;&nbsp;<a href='#' class=lb>Mes documents</a></div>
						<div class='bloc_item'>&nbsp;&nbsp;<a href='#' class=lb>Mes applications</a></div>
						<div class='bloc_item'>&nbsp;&nbsp;<a href='#' class=lb>Mon mat&eacute;riel</a></div>
						<div class='bloc_item'>&nbsp;&nbsp;<a href='#' class=lb>Mon profil RH</a></div>
					</div>
				</div>
				<div><img src='../images/service/img_right1.gif' alt='espace perso'></div>

	

				<div id=sites style='float:left; margin:0 -3px -2px 1px'>
					<div class=entete align=left style='margin-top:1px'>	
						<div class='menu_item' style='color:#ffffff; margin:2px 0 2px 10px'>Sites m&eacute;tiers</div>
					</div>
					<div class=bloc style='height:134px' align=left>
						<div class='bloc_item'>&nbsp;&nbsp;<a href='http://www.neyrial.fr/' class=lb target=_blank>Neyreal Info</a></div>
						<div class='bloc_item'>&nbsp;&nbsp;<a href='http://www.easy-tek.fr' class=lb target=_blank>Easy-Tek</a></div>
						<div class='bloc_item'>&nbsp;&nbsp;<a href='http://www.vulgarisation-informatique.com' class=lb target=_blank>Vulgarisation Info</a></div>
						<div class='bloc_item'>&nbsp;&nbsp;<a href='http://www.supinfo-projects.com' class=lb target=_blank>Supinfo-Projects</a></div>
						<div class='bloc_item'>&nbsp;&nbsp;<a href='http://www.php.net' class=lb target=_blank>PHP.net</a></div>
					</div>
				</div>
				<div style='margin:1px 0 0 0'><img src='../images/service/img_right2.gif' alt='sites metiers'></div>

	

				<div id=references style='float:left; margin:1px -3px -2px 1px'>
					<div class=entete align=left style='margin-top:0'>	
						<div class='menu_item' style='color:#ffffff; margin:0 0 2px 10px; padding-top:1px'>Renseign&eacute;ments</div>
					</div>
					<div class=bloc style='height:162px' align=left>
						<div class='bloc_item'>&nbsp;&nbsp;<a href='http://www.google.fr' class=lb target=_blank>Google</a></div>
						<div class='bloc_item'>&nbsp;&nbsp;<a href='http://www.mappy.fr/' class=lb>mappy</a></div>
						<div class='bloc_item'>&nbsp;&nbsp;<a href='http://voyages-sncf.com' class=lb target=_blank>SNCF</a></div>
						<div class='bloc_item'>&nbsp;&nbsp;<a href='http://www.pagesjaunes.fr/pj.cgi?' class=lb target=_blank>Pages Jaunes</a></div>
						<div class='bloc_item'>&nbsp;&nbsp;<a href='http://www.pagesjaunes.fr/pb.cgi?' class=lb target=_blank>Pages Blanches</a></div>
						<div class='bloc_item'>&nbsp;&nbsp;<a href='http://www.meteo.netscape.fr/meteo/france/villes/clermont-ferrand.htm' class=lb target=_blank>m&eacute;t&eacute;o</a></div>
					</div>
				</div>
				<div style='margin:1px 0 0 0'><img src='../images/service/img_right6.gif' alt='renseignements'></div>
				
		

				<div id=fournisseurs style='float:left; margin:1px -3px 0 1px; background-color:#B5BAAD'>
				
					<div class=entete align=left style='width:175px; margin-top:0 0 0 0; float:left;'>	
						<div class='menu_item' style='color:#ffffff; margin:0 0 2px 10px; padding-top:1px'>Fournisseurs</div>
					</div>
								
					<div class=bloc style='height:98px; width:175px; float:left; border-bottom:none' align=left>
						
					</div>
				</div>
			   </div>
			</div><div style='background-color:#5A5D5A; width:756px; padding-bottom:3px; margin:1px 0 0 0; float:left; clear:both; display:table; width:100%'>
				<div class=menu_item style='color:#ffffff; text-align:center'><a href='#' class=lf>CRAM Auvergne</a>&nbsp;|&nbsp;<a href='#' class=lf>&agrave; propos d'intranet</a>&nbsp;|&nbsp;<a href='#' class=lf>contact</a>&nbsp;|&nbsp;<a href='#' class=lf>plan du site</a></div>
			
			</div>
			</div>
			</div>
			</body>
			</html>

Modifié par anutka (05 Sep 2005 - 14:03)
Y'avais oublié de préciser en utilisant les boutons codes ou en éditant ton post en encadrant ton code de [ code] et [ /code] (sans espaces). Smiley smile
connecté
Administrateur
Hello Anutka et bienvenue ici Smiley smile

Merci pour le code d'exemple. Par contre, il serait sympathique de l'afficher comme le suggèrent les Règles du forum. Je te remercie donc d'avance de modifier ton dernier message après avoir relu les règles.

Pour répondre à ta question : placé en annonce du salon CSS se trouve une Méthodologie à lire avant de poster dans ce salon.
Je pense que tu ne l'as pas lue car elle contient des pistes essentielles pour résoudre tes problèmes d'affichages en CSS.

Tiens-nous au courant Smiley smile
La méthodologie te serait en effet des plus utile.

Plus généralement tu devrais te pencher en priorité vers tous les éléments html a ta diposition, pour le moment tu n'utilises que <div>.

Pour ce qui des propriétés css, sors-les de ta page html et mets-les dans un fichier externe.
Ben, en ce qui concerne la validation - c'est fait. J'ai regardé la page également sous Netscape - un peu mieux que sous FireFox, mais encore altéré. Désolé, le site n'est pas asséssible depuis internet.
Je comprend très bien, que c'est difficule de donner les conseilles en voyant seulement le code, mais j'aimerais simplement savoir où faut il chercher l'erreur?
C'est impressionnant, mais meme l'imbrication des blocs ne se fais pas corréctement!!
connecté
Administrateur
N'hésite pas à suivre étape par étape la Méthodologie que je t'ai indiquée.
Je suis sûr qu'elle te permettra de mettre le doigt sur le problème Smiley cligne
Déjà premièrement: même si Firefox n'est pas irréprochable, il est très bon et donc ce n'est pas Firefox qui affiche mal ta page mais IE qui ne respecte pas les normes.
Tu as du développer ton site en le testant seulement sur IE et donc tu as pensé qu'il etait correct alors c'est tout le contraire.
Donc le fautif dans ton histoire c'est IE et non Firefox.

Ensuite je ne peux que te conseiller d'utiliser des feuilles de style pour séparer ta structure des propriétés de mise en page pour une plus grande clarté et lisibilité.ensuite je ne sais pas comment ton site est conçu mais tu peux peut etre le diviser avec des include pour également la lisibilité.

Et enfin pour pouvoir trouver d'où vient ton problème tu peux par exemple ajouter un fond à tes div avec background-color pour voir si il n'y a pas des div trop longues ou qui se chevauchent.

En attendant un code + claire....
Merci pour les réponses,

Je croix qu'il faut que j'explique à tout le monde ma méthodologie justement:
Le code que je vous ai présenté a été obtenu par 'Menu navigateur->Affichage->Source', ce qui ne veut pas dire que dans le fichier d'origine il n'est pas plus claire. Il est répartie en plusieurs fonctions d'affichage (header(), footer() etc.) Soyez rassurés, j'utilise bien des includes Smiley cligne .
Par rapport à la separation de la présentation et du code - les classes et les id principaux sont bien dans le fichier à part. Ce que vous voyez dans les styles imbriqué - c'est seulement 'ajustement' des éléments.
Je suis d'accord, qu'il fallait tester en premier lieu avec FireFox. Surprenant, je fait un fichier de teste et ce navigateur ne centre pas les éléments, meme si je l'indique bien dans le style.
Ce qui me fait peur, c'est que la version compatible avec FireFox ne l'est pas avec IE et inversement. Je me sens completement perdu.. Smiley sweatdrop
Ok désolé alors pour le reproche du code fouilli
Mais pour nous afin de t'aider, je pense que le code avec les include dans plusieurs "fenêtre code" nous permettrait de mieux lire ton code.

Le sujet IE/FF:problème est souvent abordé alors fait une recherche et tu trouveras surment ton bonheur.
il y a notamment l'astuce "!important" que j'utilise souvent.

Rend-le utilisable sur Firefox et si possible aux normes de W3C et ensuite adapte le à IE.
C'est la meilleure solution.
Avec de l'optimisme, dans 10 ans,Microsoft se décideront surement à respecter ces normes.
Modifié par Pops83 (05 Sep 2005 - 15:21)
Sujet clos
Aller à