28220 sujets

CSS et mise en forme, CSS3

Grosses différences de mise en page entre Internet Explorer et FireFox

Bonjour a tous,

Arrivé en fin de production d'un site, un problème récurent est toujours présent, à savoir un décalage incompréhensible (pour moi Smiley confused ) lorsque j'affiche le site sous IE alors que tout est nikel sous FF... http://www.ironiqstudio.com/SJP

Voici mon code

<div id="pagecell1">
		
  				<div id="pageName">
    				<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=		"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="981" height="97" tabindex="1">
						<param name="movie" value="boutons/head.swf" />
						<param name="quality" value="high" />
						<embed src="boutons/head.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type=		"application/x-shockwave-flash" width="981" height="97"></embed>
    				</object>
  				</div>
				
    				<div id="bloc">
					
						<div id="pageNav">
						
    						<div id="sectionLinks">
      							<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="163" height="36" tabindex="2">
       								<param name="movie" value="boutons/accueil.swf" />
        							<param name="quality" value="high" />
        							<embed src="boutons/accueil.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="163" height="36"></embed>
      							</object>
								<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="163" height="37" tabindex="3">
									<param name="movie" value="boutons/informations.swf" />
									<param name="quality" value="high" />
									<embed src="boutons/informations.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="163" height="37"></embed>
								</object>
								<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="163" height="37" tabindex="4">
									<param name="movie" value="boutons/charte.swf" />
									<param name="quality" value="high" />
									<embed src="boutons/charte.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="163" height="37"></embed>
								 </object>
								 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="163" height="37" tabindex="5">
									<param name="movie" value="boutons/points_forts.swf" />
									<param name="quality" value="high" />
									<embed src="boutons/points_forts.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="163" height="37"></embed>
								 </object>
								 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="163" height="37" tabindex="6">
									<param name="movie" value="boutons/contacts.swf" />
									<param name="quality" value="high" />
									<embed src="boutons/contacts.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="163" height="37"></embed>
								 </object>
								 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="163" height="37" tabindex="7" >
									<param name="movie" value="boutons/stages.swf" />
									<param name="quality" value="high" />
									<embed src="boutons/stages.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="163" height="37"></embed>
								 </object>
								 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="163" height="37" tabindex="8">
									<param name="movie" value="boutons/tarifs.swf" />
									<param name="quality" value="high" />
									<embed src="boutons/tarifs.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="163" height="37"></embed>
								 </object>
								 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="163" height="37" tabindex="9" >
									<param name="movie" value="boutons/acces.swf" />
									<param name="quality" value="high" />
									<embed src="boutons/acces.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="163" height="37"></embed>
								</object>
								<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="163" height="37" tabindex="10">
									<param name="movie" value="boutons/presse.swf" />
									<param name="quality" value="high" />
									<embed src="boutons/presse.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="163" height="37"></embed>
								</object>
								<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="163" height="39" tabindex="11" ">
									<param name="movie" value="boutons/anciens_eleves.swf" />
									<param name="quality" value="high" />
									<embed src="boutons/anciens_eleves.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="163" height="39"></embed>
								 </object>
							</div>
							
								<div id="advert">
									<img src="http://www.imingo.com/services/compteur/icptgr.php?id=cptvis" alt="Nombre de visiteurs"
 name="nombre de visiteurs" border="0"/> 
 								</div>
  								</div>
								
   									<div id="content">
        								<img src="images/page_accueil.jpg" width="815" height="489" />   
									</div>
									
  											<div id="siteInfo">
    											<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="981" height="29" tabindex="15">
												  <param name="movie" value="boutons/foot.swf" />
												  <param name="quality" value="high" />
												  <embed src="boutons/foot.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="981" height="29"></embed>
												</object>
  											</div>
   									 </div>
							</div>
		</body>


et mon CSS

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#pagecell1{
	position:absolute;
	top: 8px;
	left: 8px;
	right: 0.5%;
	width:981px;
	background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
	
/*	position:absolute;
	top: 10px;
	right: 0.5%;
	width:1024px;
	background-color: #0000cc;
	left: 50%; 
    margin-left: -512px; /* moitié de la largeur */
}

#tl {
	position:absolute;
	top: -1px;
	left: -1px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
}

#tr {
	position:absolute;
	top: -1px;
	right: -1px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
}

#masthead{
	position: absolute;
	top: 0px;
	left: 2%;
	right: 2%;
	width:95.6%;
	height: 50px;
	
}

#pageNav{
	float: left;
	width:163px;
	padding: 0px;
	background-color: #000000;
	font: small Verdana,sans-serif;
}

#content{
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	background-color:#3300FF;
	background-image:url(images/bg_nav.jpg);
	background-repeat:no-repeat;
	border-right: 3px solid #000000;
	width: 851px;
	height:1000px;
}

/***********************************************/
/* Component Divs                              */
/***********************************************/
#siteName{
	margin: 0px;
	padding: 0px 0px 0px 0px;
	color: #ffffff;
	font-weight: normal;
}

/************** pageName styles ****************/

#pageName{
	padding: 0px 0px 0px 0px;
	margin: 0px;
}

#pageName img{
	position: relative;
	top: 0px;
	left: 0px;
	padding: 0px;
	margin: 0px;
	width: 981px;
	height: 97px;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url(../images/glbnav_background.gif);
}

#globalNav img{
	margin-bottom: -4px;
 
}

#gnl {
	position: absolute;
	top: 0px;
	left:0px;
}

#gnr {
	position: absolute;
	top: 0px;
	right:0px;
}

#globalLink{
	position: absolute;
	top: 6px;
	height: 22px;
	min-width: 640px;
	padding: 0px;
	margin: 0px;
	left: 10px;
	z-index: 100;
}


a.glink, a.glink:visited{
  	font-size: small;
  	color: #000000;
	font-weight: bold;
	margin: 0px;
	padding: 2px 5px 4px 5px;
	border-right: 1px solid #8FB8BC;
}

a.glink:hover{
  	background-image: url(../images/glblnav_selected.gif);
	text-decoration: none;
}

.skipLinks {display: none;}

/************** feature styles *****************/

.feature{
	position:relative;
	padding: 0px 0px 0px 0px;
	font-weight:normal;
	font-size: 80%;
	width: 815px;
	background-color:#FFFFFF;
	background-image:url(images/bg_nav.jpg);
	background-repeat:no-repeat;
	padding-top:5px;
}

.feature img{
	padding: 15px 30px 0px 0px;
}

/************** content styles *****************/

#content{
	position:relative;
	padding: 0px 0px 0px 0px;
	font-weight:normal;
	margin:0px 0px 0px 163px;
	background-color:#FFFFFF;
	background-image:url(images/bg_nav.jpg);
	background-repeat:no-repeat;
	border-right: 3px solid #000000;
	width: 815px;
	height:auto;
	min-height: 489px;
	_height: 489px; // hack uniquement interprété par IE Win
}

/*************** story styles ******************/

.story {
	padding: 10px 0px 0px 10px;
	font-size: 80%;
	width: 842px;
}

.story h3{
	font: bold 125% Arial,sans-serif;
	color: #000000;
}

.story p {
	padding: 0px 0px 10px 0px;
}

.story a.capsule{
	font: bold 1em Arial,sans-serif;
	color: #000000;
	display:block;
	padding-bottom: 5px;
}

.story a.capsule:hover{
	text-decoration: underline;
}

td.storyLeft{
	padding-right: 12px;
}


/************** siteInfo styles ****************/

#siteInfo{
	position:absolute
	clear: both;
	font-size: small;
	color: #cccccc;
	padding: 0px 0px 0px 0px;
	margin-top: 0px;
}

#siteInfo img{
	position: relative;
	top: 0px;
	left: 0px;
	padding: 0px;
	margin: 0px;
	width: 981px;
	height: 29px;
}

/************ sectionLinks styles **************/

#sectionLinks{
	margin: 0px;
	padding: 0px;

}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
	border-bottom: 1px solid #000000;
}

#sectionLinks a:link, #sectionLinks a:visited {
	display: block;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #cccccc;
	background-image: url(../images/bg_nav.jpg);
	font-weight: bold;
	padding: 3px 0px 3px 10px;
	color: #21536A;
}

#sectionLinks a:hover{
	border-top: 1px solid #cccccc;
	background-color: #DDEEFF;
	background-image: none;
	font-weight: bold;
	text-decoration: none;
}

/**************** advert styles *****************/

#advert{
	background-image:url(images/infos.jpg);
	background-repeat:no-repeat;
	height:118px;
}

#advert img{
	padding: 65px 4px 4px 0px;
}

/**************** bloc styles *****************/

#bloc{
 position: relative;
 background-image:url(images/bg_bck.jpg);
 background-repeat:repeat-y;
}
/********************* end **********************/


Je ne sais pas quoi faire Smiley sweatdrop

Je vous remercie d'avance.

Phil
Modifié par defsquier (24 Nov 2005 - 18:28)
Administrateur
Salut,

Attention ton URL est mal écrite et ne fonctionne pas (lire la FAQ ou l'Aide du forum pour régler ça).

As-tu commencé par suivre la Méthodologie pour résoudre les problèmes d'affichages ? (celle qui se trouve dans le sujet placé en annonce de ce salon et à lire avant de poster ici).

Si oui, n'as-tu pas trouvé la cause du problème ? A quel endroit la méthodologie t'indique l'élément fautif ?
salut Smiley smile

J ai lu la méthodologie mais la j ai l impression que ie interprete mal l'imbriquement des divs.

Je me sens perdu a vrai dire...
Administrateur
Moi j'ai l'impression qu'il s'agit simplement des différences de Modèles de boite : les largeurs d'IE sont différentes des autres, du coup, ton contenu dépasse et est poussé vers le bas (on en parle dans la Méthodologie).

EDIT : euh sinon tu sais que tu n'as aucun "vrai" texte sur ta page : aucun contenu pour les navigateurs non graphiques, les plages brailles, les lecteurs vocaux, les moteurs de recherche, les imprimantes (?), etc. ? Smiley sweatdrop
Modifié par Raphael (24 Nov 2005 - 18:36)
oui en effet c'est un probleme...
n'arrivant pas a avoir le rendu et la mise en page que je souhaitais je suis passé par des images...
Cela pose-t-il un vrai problème au niveau du réferencement?
n'y a t-il pas des facons de feinter?
Merci
Modifié par defsquier (24 Nov 2005 - 18:43)
Administrateur
defsquier a écrit :
oui en effet c'est un probleme...
n'arrivant pas a avoir le rendu et la mise en page que je souhaitais je suis passé par des images...
Cela pose-t-il un vrai problème au niveau du réferencement?
n'y a t-il pas des facons de feinter?
Merci

Bah s'il n'y avait que le référencement, mais là tu ne t'adresses qu'à un seul public : ceux qui ont un navigateur graphique avec lecteur Flash.
Dans le genre anti-accessibilité, on peut difficilement faire pire. Smiley decu

Tu peux "feinter" un minimum en mettant des contenus alternatifs (alt) aux images, mais c'est très loin d'être suffisant.

A tout hasard, je rappelle que le web est censé être universel.
Un document web doit pouvoir être rendu à tout le monde quel que soit son support, son handicap ou sa culture.

Pour cela, la page HTML doit pouvoir être parfaitement présentable lorsqu'elle est dépouillée de mise en page. En clair : le code HTML doit contenir tout le contenu pertinent. Dans ton cas, ton code HTML ne contient tout simplement aucun contenu Smiley decu

Rappel
Modifié par Raphael (24 Nov 2005 - 18:50)
Administrateur
defsquier a écrit :
Sinon j'ai bien regardé les modeles de boites mais je ne comprends pas tout Smiley confus ...

C'est très simple : IE gère les largeurs différemment des autres.
Il prend en compte les padding et border, alors que les autres non.

Bref, si tu as des blocs avec un width et un padding, il aura une taille différente sur IE que chez les autres.

Ce lien devrait t'en dire plus.
Raphael a écrit :

A tout hasard, je rappelle que le web est censé être universel.
Un document web doit pouvoir être rendu à tout le monde quel que soit son support, son handicap ou sa culture.


Cela signifie donc t'il qu'un site en tout en flash comme on en voit de plus en plus ne répond pas aux "exigences" du web?
a écrit :
Il prend en compte les padding et border, alors que les autres non.


Oui mais j'ai déja essayé d'apres la méthodologie de supprimer les border et marges sur tout mon css...
Administrateur
defsquier a écrit :


Cela signifie donc t'il qu'un site en tout en flash comme on en voit de plus en plus ne répond pas aux "exigences" du web?

C'est une question de point de vue : moi j'en vois (sincèrement) de moins en moins.
Flash n'est pas totalement inaccessible. Il est toujours possible qu'il y'ait des alternatives textuelles.
Par contre un site intégralement en Flash, donc avec tous les textes en flash est non seulement inutilement très très lourd, mais très inaccessible en effet.

Parmi tous les grands sites (yahoo, google, amazon, tf1, france2, viamichelin, fnac, etc.), je ne connais aucun site qui contienne du flash partout. D'ailleurs je ne sais même pas si ces sites contiennent du flash.

Ce qui est sûr, c'est qu'un site à très large public doit y réfléchir. Mais tout est toujours une question de public.
Modifié par Raphael (24 Nov 2005 - 19:06)
Administrateur
defsquier a écrit :
Il prend en compte les padding et border, alors que les autres non.


Oui mais j'ai déja essayé d'apres la méthodologie de supprimer les border et marges sur tout mon css...
Ton #content a exactement la taille nécessaire pour rentrer dans le moule. Or il a des bordures de 3px. Du coup, il fait 3px de trop et ne rentre plus.
d'accord, je te remercie pour ces eclairssissements! Smiley cligne

Je vais voir si je peux corriger cela.

Mais c'était pour nous le meilleur moyen de faire graphiquement ce que l'on souhaitais (mise en page, police spéciale, boutons animés...)

L'aspect graphique étant tres imporant je ne sais pas si nous pourrions obtenir un résultat satisfaisant en "hmtl"..

je ne veux pas polémiquer (et je sais que tu dis tout cela dans mon intéret), mais je pense quand meme que de plus en plus de gens ont des pc qui font que notre site reste accesible a beaucoup de gens malgrès ses exigences...
bon y a du nouveau!
j ai viré toutes les borders existantes dans mon css (je les remplacerai pas une border dessinée sur le bckgrnd).

Maintenant il me reste un petit problème, le dernier bouton du menu ne s affiche pas, ni ma div "advert" (sous IE toujours)
Raphael a écrit :

Parmi tous les grands sites (yahoo, google, amazon, tf1, france2, viamichelin, fnac, etc.), je ne connais aucun site qui contienne du flash partout. D'ailleurs je ne sais même pas si ces sites contiennent du flash.

Ce qui est sûr, c'est qu'un site à très large public doit y réfléchir. Mais tout est toujours une question de public.


Sur le site de france2, la partie sur les Rois Maudits est en Flash... Il faudrait voir si les parties textuelles sont aussi inaccessible que tu le dis dans ce cas, parce que c'est très informatif, même si niveau grand public, justement, le sujet n'est pas aussi poussé que j'aimerais qu'il le soit... Mais bon, c'est quand même le site d'une série télé, donc normalement plutôt réservé à un public de voyants Smiley ohwell

Dans le site des news de TF1, il y a des articles tout en vidéo (des sujets du journal), il me semble sans texte alternatif pour expliquer ce qu'il y a à voir, sauf le petit texte d'introduction (mais je ne peux pas hélas grand chose, je ne bosse pas pour cette partie de TF1 Smiley biggol )
peut etre devrais-je creer un nouveau sujet pour parler de tout ceci, mais comment le recensemant fonctionne-t-il? est-ce gratuit, payant, ou alors les deux, c est a dire que le payant serait plus efficace, et a quoi le recensement se refere t il dans une page? (contenu, ligne de mot-clés etc...)
Bob (MC Melun) a écrit :
c'est quand même le site d'une série télé, donc normalement plutôt réservé à un public de voyants


hmmm.... non non. Détrompe-toi, beaucoup de non-voyants "regardent" la télé ! On peut suivre assez bien en fait une série, un reportage, une fiction, etc. sans regarder l'écran.

Et les videos aussi peuvent etre "relativement" (hors navigateurs textuels par ex) accessibles (si si, si le contenu est compréhensible oralement, et si les boutons clairement cliquables et définis).
Sujet clos
Aller à