28172 sujets

CSS et mise en forme, CSS3

[Résolu]Affichage contenu sous firefox

bonjour
Je sais que ce problème a été posé plusieurs fois mais j'ai testé les solutions proposées et ca ne règle pas mon souci
Sous IE, tout va bien (puisque je crée mes css pour IE en premier).
Mais sous firefox, le contenu déborde du contenant. upload/16183-firefox.jpg

voici le code : - MERCI BEAUCOUP DE VOTRE AIDE -
/*-------- Easysite 2006 sp3 -------*/

BODY {margin:0px; padding:0px; text-align:center; background:#ede7d0;}

/*---links---*/
A {font-family:Arial,helvetica,sans serif;}
A:link, A:visited {color:#e77409; text-decoration:underline;}
A:hover, A:active {color:#563b32; text-decoration:underline;}

/*---HTML forms---*/
FORM {padding:0px; margin:0px; }
INPUT,TEXTAREA,SELECT { background:#F2F2F2 url(../images/field.gif) repeat-x; color:#563b32; border-top:1px solid #C0C2C4; border-left:1px solid #C0C2C4; border-right:1px solid #9D9FA0; border-bottom:1px solid #9D9FA0; font:normal 11px Arial,Helvetica,sans serif; padding-left:4px;}
INPUT.radio { background:transparent none; border:none;}
INPUT.checkbox { background:transparent none; border:none; }


/*----------------------------------------global layout---*/
.page {width:100%; background:#ede7d0 url(../images/fond.jpg) repeat-x;}
.layout {width:899px; margin:0px auto 10px auto; text-align:left; min-height:inherit;}

/*--header--*/
.header {margin:0px 1px 0px 0px;}

/*top navigation*/
.header .topnav {margin:0px; padding:0px; height:27px; background:url(../images/logovdoc.gif) no-repeat top right;  }
.header .topnav .outer {float:right;}
.header .topnav .leftmargin {width:0px;}
.header .topnav .left {width:4px; background:url(../images/topnavleft.gif) no-repeat 0px 7px;}
.header .topnav .content {height:27px; font:normal 11px arial,helvetica,sans serif; padding:0px 6px 0px 5px; }
.header .topnav .right {width:0px;}
.header .topnav .rightmargin {width:0px; }

	/*topnav links*/
	.header .topnav A:link, .header .topnav A:visited {color:#563b32; text-decoration:none;}
	.header .topnav A:hover, .header .topnav A:active {color:#ffffff; text-decoration:none;}

/*-quicksearch-*/
.header .quicksearch {float:right; margin:1px 130px 0px 0px; height:26px; background:url(../images/topnavleft.gif) no-repeat 3px 6px; padding:0px 0px 0px 10px; width:auto}
.header .quicksearch INPUT {border-top:1px solid #563b32; border-left:1px solid #563b32; border-right:1px solid #563b32; border-bottom:1px solid #563b32; font:normal 11px arial,helvetica,sans serif; color:#563b32; padding-left:4px; background:#ede7d0 url(../images/quicksearchfield.gif) left top repeat-x; }
.header .quicksearch .button {font:bold 10px verdana,Arial,helvetica,sans serif; }
.header .quicksearch .button A:link,.header .quicksearch .button A:visited { font-weight:bold; color:#ffffff}
.header .quicksearch .button A:hover,.header .quicksearch .button A:active { font-weight:bold; color:#ec7405}
.header .quicksearch .button1-part0 { white-space:nowrap; background: url(../images/quicksearchbuttonleft.gif) no-repeat top left !important; } /* margin = space between buttons  */
.header .quicksearch .button1-part1 { white-space:nowrap;  background: url(../images/quicksearchbuttonright.gif) no-repeat top right !important;  }
.header .quicksearch .button1-part0-down { white-space:nowrap; background: url(../images/quicksearchbuttonleft.gif) no-repeat top left !important; }
.header .quicksearch .button1-part1-down { white-space:nowrap;  background: url(../images/quicksearchbuttonright.gif) no-repeat top right !important; }


/*graphic identity*/	
.header .identity {height:112px; margin-right:1px; background:#553d33 url(../images/headerint.gif) no-repeat; clear:both; }
.header .identity .logo-left {font-size:0px}
.header .identity .image {font-size:0px;}
.header .identity .image IMG,.header .identity .image DIV {margin:0px;}
.header .identity .logo-right {font-size:0px}

/*mainnav*/
.header .mainnav {height:35px; background:#553d33 url(../images/mainavback.gif) no-repeat top left; text-align:left;}/*align menu with text-align*/

/*--container--*/
.container { width:100%; margin-top:7px; margin-bottom:10px; background:url(../images/content_container.gif) repeat-y  right; }
.sublayout {background:url(../images/bottom_container.gif) no-repeat left bottom;}

/*left column*/
.leftcol {width:222px; height:100%; background:url(../images/leftcol.jpg) no-repeat left top; }
.leftcol .outer {width:220px; margin:0px 0px 0px 0px;}
.leftcol .topmargin {height:33px; background:url(../images/menutop.jpg) no-repeat; }
.leftcol .content {font:normal 11px Trebuchet MS,Arial,Helvetica,sans serif;}
.leftcol .bottommargin {height:54px; background:url(../images/bottomleftcol.jpg) no-repeat left bottom; }

/*middle column*/
.maincol {}
.maincol .topmargin {height:10px;}
.maincol .content { padding:6px 15px 0px 0px;}
.maincol .bottommargin {height:26px; }

/*right column*/
.rightcol {width:250px; height:100%; background:url(../images/rightcol.jpg) no-repeat left top; }
.rightcol .outer {width:250px; margin:0px}
.rightcol .topmargin {height:20px; }
.rightcol .content {text-align:center; font:normal 11px Trebuchet MS,Arial,Helvetica,sans serif;}
.rightcol .bottommargin {height:54px; background:url(../images/bottomrightcol.jpg) no-repeat left bottom;}


/*--footer--*/
.footer {background:url(../images/poweredbyvdoc.gif) no-repeat 0px right; height:50px; clear:both; position:relative;}

.footer #poweredBy {position:absolute; width:128px; height:40px; left:689px;}

.footer .bottomnav {margin:0px 0px 5px 57px; padding:5px 0px 0px 0px; }
.footer .bottomnav .outer {margin:0px; padding:0px;}
.footer .bottomnav .leftmargin {width:14px;}
.footer .bottomnav .left {width:0px;}
.footer .bottomnav .content {height:14px; font:normal 11px arial,helvetica,sans serif; padding:0px 4px 0px 4px; }
.footer .bottomnav .right {width:4px; background:url(../images/bottomnavleft.gif) no-repeat 0px 1px;}
.footer .bottomnav .rightmargin {width:0px;}

	/*bottomnav links*/
	.footer .bottomnav A {border-bottom:1px solid #eb7305; display:block}
	.footer .bottomnav A:link, .footer .bottomnav A:visited {color:#ec7405; text-decoration:none;}
	.footer .bottomnav A:hover, .footer .bottomnav A:active {color:#d9ae86; text-decoration:none;}
	
	

/*----------------------------------------contents---*/

/*-content zone-*/
.main-content  {font:normal 12px Trebuchet MS,Arial,helvetica,sans serif; line-height:15px; margin:0px; height:100%; }
.main-content TD {font-family:Trebuchet MS,Arial,Helvetica,sans serif; font-size:12px; line-height:15px; }

/*-titres-*/
.main-title {background:url(../images/h0_bullet.gif) no-repeat left bottom; font-weight:bold; font-size:14px; color:#573c33; padding:0px 0px 9px 22px; margin:5px 28px 2px 5px; ; text-align:left}

.title-level1 { font-weight:bold; font-size:14px; color:#ec7405; padding:0px; margin:10px 0px 7px 0px; text-align:left}
.title-level2 { font-weight:bold; font-size:13px; color:#40464A; padding:0px; margin:7px 0px 7px 0px; text-align:left}
	/* links */
	.title-level2 A:link, .title-level2 A:visited { color:#ec7405; text-decoration:underline }
	.title-level2 A:hover, .title-level2 A:active { text-decoration:none }

/*Multicolumn*/
.multicolumn {}
.multicolumn .outer {}
.multicolumn .column {}
.multicolumn .column-1 {}
.multicolumn .column-2 {}

/*-content bloc-*/
.text-bloc {margin:10px 28px 10px 28px; }

/*-text types-*/
.bloc-header {font-weight:bold; color:#1F4E66; margin:5px 0px 10px 0px;  line-height:13px}
.paragraph {color:#52575B; margin:5px 0px 10px 0px; font-weight:normal; }
.separator {height:6px; font-size:1px; background:url(../images/separator.gif) repeat-x; padding:0px; margin:5px 18px 2px 5px; text-align:right; clear:both}
#withtop.separator {height:18px; font-size:1px; background:url(../images/separator.gif) repeat-x left bottom; padding:0px; margin:5px 18px 2px 5px; text-align:right; }
#withtop.separator #gototop {width:20px; height:16px; background:url(../images/gototop.gif) no-repeat; cursor:pointer; cursor:default;float:right}

/*-text styles-*/
.text-style1 {font-weight:bold; font-size:10px;}
.text-style2 {color:#ec7405; }
.text-style3 {font-style:italic}
.text-highlighted {color:#b35703}

/*- list-*/
.list-bloc { padding:0px; margin:0px 0px 10px 0px}
.bullet-link {margin:0px 0px 3px 0px; padding:0px 0px 0px 14px; background:url(../images/link_arrow.gif) no-repeat 0px 2px; font:normal 11px Verdana,Arial,helvetica,sans serif; list-style:none; line-height:13px}
	/*link*/
	.bullet-link A:link,.bullet-link A:visited {color:#40464A; text-decoration:underline}
	.bullet-link A:hover,.bullet-link A:active {color:#ec7405; text-decoration:underline}
	
.bullet-list {margin:0px; padding:0px 0px 0px 18px; background: url(../images/bullet_list.gif) no-repeat 6px 6px; color:#5D5D5D; list-style:none; line-height:18px;}



/*-tables-*/
.table-border {border-collapse:collapse; margin:10px 15px 10px 12px;}
.table-caption {font:bold 13px Trebuchet MS,Arial,helvetica,sans serif; color:#ed7304; padding:0px 6px 4px 6px; text-align:center; padding:4px 6px 4px 6px; line-height:24px; border-bottom:1px solid #583b35; }
.cell-header {color:#1F4E66; padding:4px 6px 4px 6px; background:#faf6e5; border:1px solid #e2d0ac; font:bold 12px Verdana,Arial,helvetica,sans serif;}
.cell1 {font:normal 12px Verdana,Arial,helvetica,sans serif; color:#1F4E66; padding:4px 6px 4px 6px; background-color:white; border:1px solid #e2d0ac}
.cell2 {font:normal 12px Verdana,Arial,helvetica,sans serif; color:#1F4E66; padding:4px 6px 4px 6px; background-color:#fbfaf4; border:1px solid #e2d0ac}
.cell-footer {font:bold 12px Verdana,Arial,helvetica,sans serif; color:#1F4E66; padding:4px 6px 4px 6px; background-color:#efebdb; border:1px solid #e2d0ac;}

/*-forms-*/
.form-style { padding:7px; margin:10px 28px 10px 40px;}
.form-style .cell1 {padding:2px 10px 2px 2px; border:none; background-color:transparent; font-weight:bold; font-family:Trebuchet MS,Arial,Helvetica,sans serif; text-align:right}
.form-style .cell2 { border:none; background-color:transparent; font-family:Trebuchet MS,Arial,Helvetica,sans serif; background:url(../images/form_arrow.gif) no-repeat left center; padding:2px 2px 2px 16px;}

/*images*/
.img-left {float:left; display:block; margin:5px 10px 5px 0px; font:bold 9px Verdana,Arial,helvetica,sans serif; color:#5D5D5D; text-align:center}
.img-center { display:block; margin:5px 0px 5px 0px; font:bold 9px Verdana,Arial,helvetica,sans serif; color:#5D5D5D; text-align:center}
.img-right {float:right; display:block; margin:5px 0px 5px 10px; font:bold 9px Verdana,Arial,helvetica,sans serif; color:#5D5D5D; text-align:center}

/*-buttons-*/

/* outer */
.buttons-outer { margin:10px 28px 10px 40px; padding:15px 0px 0px 0px; text-align:right; background:url(../images/separator.gif) repeat-x; width:100%}

/* main */
.button {font:normal 11px verdana,arial,helvetica,sans serif;}
	
/* links */
.button A:link, .button A:visited { cursor:default; color:#52575B; text-decoration:none !important }
.button A:hover, .button A:active { cursor:default; text-decoration:none !important }

/* button1 */
.button1-part0 { white-space:nowrap; background:  url(../images/button1bg1.gif) no-repeat top left; } /* margin = space between buttons  */
.button1-part1 { white-space:nowrap; background:  url(../images/button1bg.gif) no-repeat top right; }
.button1-part0-down { white-space:nowrap; background:  url(../images/button1bg1.gif) no-repeat top left;  }
.button1-part1-down { white-space:nowrap; background:  url(../images/button1bg.gif) no-repeat top right; }

/* button2 */
.button2-part0 { white-space:nowrap; background:  url(../images/button2bg1.gif) no-repeat top left; } /* margin = space between buttons  */
.button2-part1 { white-space:nowrap; background:  url(../images/button2bg.gif) no-repeat top right; }
.button2-part0-down { white-space:nowrap; background:  url(../images/button2bg1.gif) no-repeat top left;  }
.button2-part1-down { white-space:nowrap; background:  url(../images/button2bg.gif) no-repeat top right; }

/* button3 */
.button3-part0 { white-space:nowrap; background:  url(../images/button1bg1.gif) no-repeat top left; } /* margin = space between buttons  */
.button3-part1 { white-space:nowrap; background:  url(../images/button1bg.gif) no-repeat top right; }
.button3-part0-down { white-space:nowrap; background:  url(../images/button1bg1.gif) no-repeat top left;  }
.button3-part1-down { white-space:nowrap; background:  url(../images/button1bg.gif) no-repeat top right; }
	
/*inactive button*/	
.inactive {}
	/* links */
	.inactive A:link, .inactive A:visited { cursor:default; color:#e5e5e5; text-decoration:none !important }
	.inactive A:hover, .inactive A:active { cursor:default; text-decoration:none !important }

.inactive .button1-part0,.inactive .button1-part0-down,.inactive .button2-part0,.inactive .button2-part0-down,.inactive .button3-part0,.inactive .button3-part0-down {background:  url(../images/buttoninact1.gif) no-repeat top left;}
.inactive .button1-part1,.inactive .button1-part1-down,.inactive .button2-part1,.inactive .button2-part1-down,.inactive .button3-part1,.inactive .button3-part1-down {background:  url(../images/buttoninact2.gif) no-repeat top right;}

/*-vignette-*/
.stamp { margin:4px 5px 6px 5px}
	
/*Pager*/
.pager {background:url(../images/separator.gif) repeat-x left bottom; padding:5px 0px 10px 0px; margin:5px 10px 10px 7px; clear:both}
.pager .button {font:bold 10px verdana,Arial,helvetica,sans serif; }
.pager .button A:link,.pager .button A:visited { font-weight:bold; color:#000000}
.pager .button1-part0 { white-space:nowrap; background: url(../images/buttongridbg1.gif) no-repeat top left !important; } 
.pager .button1-part1 { white-space:nowrap;  background: url(../images/buttongridbg.gif) no-repeat top right !important;  }
.pager .button1-part0-down { white-space:nowrap; background: url(../images/buttongridbg1.gif) no-repeat top left !important; }
.pager .button1-part1-down { white-space:nowrap;  background: url(../images/buttongridbg.gif) no-repeat top right !important; }

Modifié par framboise (23 Apr 2008 - 00:35)
framboise a écrit :
Sous IE, tout va bien (puisque je crée mes css pour IE en premier).

Il est vrai que se fier au rendu très buggué d'IE (surtout s'il s'agit d'IE6...), et donc se fier à ses comportements non standard, est un bon moyen de s'arracher les cheveux par la suite lorsqu'on se penche sur le rendu dans Firefox, Safari, Opera, Konqueror, Camino, etc. Smiley cligne

Sinon, pour le problème lui-même à vue de nez c'est un problème classique de dépassement des flottants. La FAQ en parle, cet article aussi. Pour information, dans ton cas c'est le rendu (satisfaisant) dans IE qui est buggué, et le rendu dans Firefox qui correspond aux standards. Smiley lol
Modifié par Florent V. (26 Mar 2008 - 11:12)
MasterPingouin a écrit :
Donne nous le code HTML, parce que là, on ne peut pas t'aider


Le code html est trop long à insérer. Voici l'url d'une des pages qui fait défaut : http://percolateur.aspresso.fr/percolateur/easysite/go/054-000022-01q/solution-efm/plate-forme-efm/dataview pour récupérer le code html.

J'utilise un cms développé en spécifique (ni joomla ou autre).
Je ne peux modifier que les css sur lesquelles s'appuyent la construction des pages. Normalement je ne touche pas aux codes, css, et autre sauf que mon client a ce problème et que je ne sais pas le résoudre malgré plusieurs essais fait à partir de ce que j'ai pu lire sur ce forum.
Mais en fait je ne sais pas à quel endroit il faut placer les solutions proposées : au niveau de layout, sublayout, des images, des blocs ?

J'ai oublié de dire : je ne suis ni développeur, je bidouille les css depuis peu ! Smiley ohwell

Merci encore !
Florent V. a écrit :

Il est vrai que se fier au rendu très buggué d'IE (surtout s'il s'agit d'IE6...), et donc se fier à ses comportements non standard, est un bon moyen de s'arracher les cheveux par la suite lorsqu'on se penche sur le rendu dans Firefox, Safari, Opera, Konqueror, Camino, etc. Smiley cligne


J'ai lu le contraire sur ce forum : vaut mieux commencer par régler IE pour ne pas pas s'arracher les cheveux ET la moustache par la suite ! Smiley lol

Florent V. a écrit :
Sinon, pour le problème lui-même à vue de nez c'est un problème classique de dépassement des flottants. La FAQ en parle, cet article aussi.


J'ai lu plusieurs articles et solutions, comme je le dis dans mon message précédent, mais je n'arrive pas à les appliquer, d'où mon post. Smiley smile

Florent V. a écrit :
Pour information, dans ton cas c'est le rendu (satisfaisant) dans IE qui est buggué, et le rendu dans Firefox qui correspond aux standards. Smiley lol


Je sais oui, mais ça n'empêche que ça foire ! Smiley biggrin

Merci de ton aide
framboise a écrit :
J'ai lu le contraire sur ce forum : vaut mieux commencer par régler IE pour ne pas pas s'arracher les cheveux ET la moustache par la suite ! Smiley lol

Tiens, voilà qui m'étonne. Tu aurais un lien vers un message sur le forum disant cela? (Histoire que je bannisse l'impudent qui raconte de telles bêtises... Smiley ravi )

framboise a écrit :
J'ai lu plusieurs articles et solutions, comme je le dis dans mon message précédent, mais je n'arrive pas à les appliquer, d'où mon post. Smiley smile

J'ai jeté un oeil à la page donnée en exemple. Mais comme c'est construit avec moult tableaux, j'avoue m'y perdre. Je suis plutôt incompétent dans ce domaine (la mise en page à base de tableaux), donc je préfère passer la main à plus compétent que moi dans ce domaine.

Une piste à tout hasard, ça ne semble pas être un problème de flottant. Il y a éventuellement un problème avec le positionnement du pied de page (ou des divers éléments du pied de page). J'ai repéré à la fois du positionnement relatif et du positionnement absolu, les deux ayant l'air parfaitement inutiles ici (il suffit d'avoir ces éléments HTML au bon endroit dans le code, c'est à dire grosso modo à la fin, et de ne pas utiliser la propriété position).

J'ai également constaté que:
1. Firefox 3 ne semble pas poser de problème;
2. Le problème dans Firefox 2 se résorbe dès que l'on recharge la page;
3. Au chargement de la page, le navigateur n'a pas connaissance de la hauteur réelle de l'image placée dans le contenu central, et il se peut qu'il «fige» la hauteur de la colonne centrale avant d'afficher le contenu central sur toute sa hauteur.

Si le troisième point est juste, il se peut que ce problème se corrige en indiquant dans le code HTML les dimensions de l'image:
<img src="..." title="" alt="" border="0" width="340" height="277">
À tester.
Modifié par Florent V. (26 Mar 2008 - 23:51)
Bonjour
Je tenais à vous remercier pour votre aide.
en fait, je pense que le souci vient du poids des images qui sont de ce fait très longues à charger. (parce que le souci n'existe pas sur les pages sans image "lourdes" en bas de page).
donc firefox charge la page et fige la hauteur avant que l'image soit chargée. J'ai expliqué au client comment réduire le poids de son image.
Merci à tous
Bonne journée
Sujet clos
Aller à