Différence de mise en page IE et FF

goofy · 19 Février 2007

Bonjour et merci à ceux qui prendront le temps de lire ce post,
Je vous expose mon pb.
Si vous cliquez sur ce lien http://www.grenoble-montagne.com/modules/smartsection4/category.php?categoryid=59
avec IE vous constatez :
- qu'il y a une grosse bande grise entre le menu horizontal noir et le bouton CHERCHER.
- qu'il y a un espacement entre le bouton CHERCHER et le bloc vert de gauche.

Avec FF :
- la bande grise sous le menu horizontal noir est beaucoup plus petite
- pas d'espacement entre le bouton CHERCHER et le bloc vert de gauche.

J'utilise une feulle de style.
Deux questions : avez vous une idée pour réduire sur IE cette grosse bande grise afin qu'elle ait la même dimension que dans FF ?
Faut-il une feuille de style pour IE et une autre pour FF ? Et si oui quel est le code à insérer pour appeler l'une ou l'autre.
Merci

Marie-Aude · 19 Février 2007

Je n'ai pas vu les feuilles de styles, ne sachant pas laquelle des trois ou quatre tu utilises.

Mais juste une question comme ça, tu as bien remis toutes les marges à zero en début de css ? *{margin:0; padding:0;} ?

goofy · 19 Février 2007

Feuille de style

Allez j'ose ! Voilà la feuille de style.

Code:

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
	background-color: #E9E9E9;
	color: #4E4E4E;
	background-image: url(images/back.png);
	background-repeat: repeat-x;
	font-size: 9pt;
	}

table
{
	width: 100%;
	font-size: 11px;
	
	
}
.okvir_main
{
	width: 900px;
	padding-top:0px;
	border-right: 1px solid #000000;
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-top: 1px solid #000000;
}
/* TABLEAU PRINCIPAL*/
table#okvir
{
	background-color: #FFFFFF;

	
}
table td
{
	padding: 0;
	border-width: 0;
	vertical-align: top;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
a
{
	color: #006699;
	background-color: transparent;
	text-decoration: none;
	font-weight: bold;
}
a:hover
{

	text-decoration: underline;

}
ul
{
	margin: 2px;
	padding: 2px;
	list-style: decimal inside;
	text-align: left;
}
li
{
	margin-left: 2px;
	list-style: square inside;
	color: #2F5376;
}
.item
{
	color: #0D0D0D;
}

/* Gère l'affichage du mot "catégorie" et "articles"*/
.itemHead {background-image: url(images/fleche.jpg); background-repeat: no-repeat; background-position: left; padding-left: 16px; padding-bottom: 2px; color: #A95A3D; font-weight: bold; font-size: 100%; border-bottom: 1px solid #A95A3D;}


.itemInfo
{
	text-align: right;
	padding: 3px;

}
/* GERE l'AFFICHAGE DES LIENS DES TITRES DES ARTICLES VERS L'ARTICLE COMPLET*/
.itemTitle a
{
	font-size: 100%;
	font-weight: bold;
	font-variant: small-caps;
	color: #A95A3D;
	
	background-color: transparent;
}
.itemPoster
{
	font-size: 80%;
	font-style: italic;
}
.itemPostDate
{
	font-size: 80%;
	font-style: italic;
}
.itemStats
{
	font-size: 80%;
	font-style: italic;
}
.itemBody
{
	padding-left: 5px;
}
.itemText
{
	margin-top: 5px;
	margin-bottom: 5px;
	line-height: 1.5em;
	
	
}
.itemText:first-letter
{
	font-size: 133%;
	font-weight: bold;
}
.itemFoot
{
	text-align: left;
	padding: 3px;
	background-color: #E2DEC5;
	font-size: 11px;
}
.itemAdminLink
{
	font-size: 90%;
}
.itemPermaLink
{
	font-size: 90%;
}
th
{
	background-color: #DED9BC;
	color: #404040;
	padding: 2px;
	vertical-align: middle;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
td#headerbanner
{
	width: 100%;
	padding-right: 0px;
}

/* menu de gauche de artnomad_eng*/
td#leftcolumn { width: 180px; font-size: 11px; padding-left:0px; padding-top: 0px; background: url(images/back_leftcolumn.jpg); background-repeat: no-repeat; background-color: #ffffff;}
td#leftcolumn th { color: #000000; vertical-align: bottom;}
/*td#leftcolumn div.blockTitle { background-image: url('images/Rose.jpg'); background-repeat: no-repeat; color: #FF9900; font-weight: bold; font-size: 12px; padding-left:43px; background-color:#FFCC33; border-left: 1px solid #999999; border-right: 1px solid #999999; border-bottom: 1px solid #999999; padding-top: 2px; padding-bottom: 6px;}
*/
td#leftcolumn div.blockTitle
{
	color: #024D72;
	font-weight: bold;
	font-size: 12px;
	/*background-color: #444442;*/
	/*background-color: #ECE9D8; gris*/
	background-color: #ECE9D8;
	padding-left: 11px;
	background-repeat: no-repeat;
	background-position: left;
	margin-right: 0px;
	padding-bottom: 2px;
	padding-top: 2px;
	border-right: 1px solid #999999; border-bottom: 1px solid #999999; border-top: 1px solid #999999;border-left: 1px solid #999999;
	}
td#leftcolumn div.blockContent {/*background: url(images/back_leftcolumn.jpg);*/ background-color: transparent; background-repeat: no-repeat; font-size:12px; padding: 2px; line-height: 120%; border-right: 1px solid #999999;border-bottom: 1px solid #999999;}
td#leftcolumn div.space { height:10px;}


td#centercolumn
{
	font-size: 12px;
	color: #464646;
	padding-left: 20px;
	padding-right: 40px;
	padding-top : 5px;
	width: 80%;
	background-color: #ffffff;
}
td#centercolumn th
{
	color: #004080;
	/*background-color: #F3F4F5;*/
	background-color: #ffffff;
}
td#centerCcolumn div.blockTitle
{
	color: #FFFFFF;
	font-weight: bold;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	font-size: 10px;
	background-color: #D6CFAB;
	padding-left: 18px;
	background-image: url('images/arrow-l.gif');
	background-repeat: no-repeat;
	background-position: left;
	border-bottom: 1px solid #615930;
	padding-top: 2px;
	padding-bottom: 2px;
}
td#centerCcolumn div.blockContent
{
	margin-right: 8px;
	margin-left: 0px;
	margin-bottom: 0px;
	line-height: 120%;
	border-bottom: 1px dashed #cccccc;
}
td#centerLcolumn
{
	width: 50%;
	padding: 0px 0px 0px 0px;
	border-right: 1px solid #ffffff;
}
td#centerLcolumn div.blockTitle
{
	padding: 3px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 10px;
	background-color: #D0C99F;
	margin-bottom: 5px;
	padding-left: 18px;
	border-bottom: 1px solid #666666;
	background-image: url('images/arrow-l.gif');
	background-repeat: no-repeat;
	background-position: left;
}
td#centerLcolumn div.blockContent
{
	margin-right: 0px;
	margin-left: 0px;
	line-height: 120%;
	padding: 2px;
}
td#centerRcolumn
{
	width: 50%;
	padding: 0px 0px 0px 0px;
}
td#centerRcolumn div.blockTitle
{
	padding: 3px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 10px;
	background-color: #D0C99F;
	margin-bottom: 5px;
	padding-left: 18px;
	border-bottom: 1px solid #666666;
	background-image: url('images/arrow-l.gif');
	background-repeat: no-repeat;
	background-position: left;
}
td#centerRcolumn div.blockContent
{
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 2px;
	line-height: 120%;
	padding: 2px;
}


td#rightcolumn
{
	width: 180px; font-size: 11px; padding-left:0px; padding-top:8px; background: url(images/back_rightcolumn.jpg); background-repeat: no-repeat; background-color: #ffffff;
}

td#righttcolumn th
{
	color: #000000; vertical-align: bottom;
}

td#rightcolumn div.blockTitle
{
	color: #024D72;
	font-weight: bold;
	font-size: 12px;
	/*background-color: #444442;*/
	/*background-color: #ECE9D8; gris*/
	background-color: #ECE9D8;
	padding-left: 11px;
	background-repeat: no-repeat;
	background-position: left;
	border: 1px solid #ffffff;
	margin-right: 0px;
	padding-bottom: 2px;
	padding-top: 2px;
	border-right: 1px solid #999999; border-bottom: 1px solid #999999; border-top: 1px solid #999999;border-left: 1px solid #999999;
	
}
td#rightcolumn div.blockContent
{
	/*background: url(images/back_leftcolumn.jpg); */
	background-color: #transparent;
	background-repeat: no-repeat; font-size:12px; padding: 2px; line-height: 120%;
	border-left: 1px solid #999999; border-right: 1px solid #999999; border-bottom: 1px solid #999999;
}
td#rightcolumn div.space { height:10px;}


td#mainmenu a
{
	color: #444541;
	padding: 1px 1px 1px 0px;
	/*background-image: url('images/caret-hover.gif');*/
	background-repeat: no-repeat;
	background-position: left;
	/*background-color: #353940;*/
	font-weight: normal;
	/*border: 1px solid #353940;*/
	font-size: 11px;
	margin-right: 3px;
	
}
td#mainmenu a:hover
{
	color: #FFFFFF;
	background: #59616C;
	background-image: url('images/caret-hover2.gif');
	background-repeat: no-repeat;
	background-position: right;
	border: 1px solid #ADB3BC;
}
td#mainmenu a.menuTop
{
	padding-left: 20px;
	background-image: url('images/caret-hover2.gif');
	
}
td#mainmenu a.menuMain
{
	padding-left: 1px;
background-image: url('images/caret-hover2.gif');
	
	
}
td#mainmenu a.menuSub
{
	color: #828080;
	padding-left: 23px;
	font-weight: normal;
}

td#usermenu a
{
	display: block;
	margin: 0;
	color: #3C351E;
	font-weight: normal;
	font-size: 10px;
	padding-left: 5px;
	margin-left: 3px;
	padding-bottom: 2px;
}
td#usermenu a:hover
{
	color: #FF0000;
}
td#usermenu a.highlight
{
	background-color: #fcc;
}
.outer
{
	background-color: transparent;
	
	
}	



.head
{
	font-weight: bold;
	background-repeat: repeat-x;
	background-position: left;
	/*color: #373737;*/
	color : #3A4F6C;
	height: 24px;
	line-height: 22px;
	/*text-align: center;*/
	background-color: #FFFFCC;
}
/*Gère l'affichage des sous catégories*/
.even
{
	/*background-color: #F3F4F5;*/
	padding: 5px;
}

.odd 

{	

	/*background-color: #FFFFCC;*/
	padding: 5px;

}

.foot 

{

	background-color:  #FFFFCC; 

	padding-top: 5px;  

	padding-right: 5px;  

	padding-left: 5px;  

	padding-bottom: 5px;   

	color: #3A4F6C ; 

	text-align: center; 

}

tr.even td
{
	/*background-color: transparent;*/
	padding: 5px;
}
tr.odd td
{
	
	padding: 5px;
}
div.errorMsg
{
	background-color: #FFCCCC;
	text-align: center;
	border-top: 1px solid #DDDDFF;
	border-left: 1px solid #DDDDFF;
	border-right: 1px solid #AAAAAA;
	border-bottom: 1px solid #AAAAAA;
	font-weight: bold;
	padding: 10px;
}
div.confirmMsg
{
	background-color: #DDFFDF;
	color: #136C99;
	text-align: center;
	border-top: 1px solid #DDDDFF;
	border-left: 1px solid #DDDDFF;
	border-right: 1px solid #AAAAAA;
	border-bottom: 1px solid #AAAAAA;
	font-weight: bold;
	padding: 10px;
}
div.resultMsg
{
	background-color: #D6E3F3;
	color: #333333;
	text-align: center;
	border-top: 1px solid silver;
	border-left: 1px solid silver;
	font-weight: bold;
	border-right: 1px solid #666666;
	border-bottom: 1px solid #666666;
	padding: 10px;
}
div.xoopsCode
{
	background: #FFFFFF;
	border: 1px inset #000080;
	font-family: "Courier New",Courier,monospace;
	padding: 0px 6px 6px 6px;
}
div.xoopsQuote
{
	background: #FFFFFF;
	border: 1px inset #000080;
	font-family: "Courier New",Courier,monospace;
	padding: 0px 6px 6px 6px;
}
.comTitle
{
	font-weight: bold;
	margin-bottom: 2px;
}
.comText
{
	padding: 2px;
}
.comUserStat
{
	font-size: 10px;
	color: #2F5376;
	font-weight: bold;
	border: 1px solid silver;
	background-color: #E2DFC7;
	margin: 2px;
	padding: 2px;
}
.comUserStatCaption
{
	font-weight: normal;
}
.comUserStatus
{
	margin-left: 2px;
	margin-top: 10px;
	color: #2F5376;
	font-weight: bold;
	font-size: 10px;
}
.comUserRank
{
	margin: 2px;
}
.comUserRankText
{
	font-size: 10px;
	font-weight: bold;
}
.comUserRankImg
{
	border: 0;
}
.comUserImg
{
	margin: 2px;
}
.comDate
{
	font-weight: normal;
	font-style: italic;
	font-size: smaller;
}
.comDateCaption
{
	font-weight: bold;
	font-style: normal;
}
input
{
	font: 11px verdana, arial, helvetica, sans-serif;
	color: #737373;
}
textarea
{
	border: 1px solid #8699B5;
	width: 400px;
	font: 11px verdana, arial, helvetica, sans-serif;
	background-color: #EEECDD;
}
input.formTextBox
{
	border: 1px solid #8699B5;
	background: #EEECDD;
	font: 11px verdana, arial, helvetica, sans-serif;
}
select
{
	border: 1px solid #8699B5;
	font: 11px verdana, arial, helvetica, sans-serif;
	background-color: #EEECDD;
}
/*gère l'affichage de la connexion"*/
.pozdrav
{
	background-color: #ECE9D8;
	padding: 2px;
	padding-right:40px;
	font-size: 11px;
	color: #6F6635;
	/*border-top: 1px solid #ECE9D8;*/
}
.pozdrav a
{
	color: #6F6635;
}
.vrijeme
{
	background-color: #363636;
	padding-top: 7px;
	font-size: 10px;
	color: #FFFFFF;
}
/*gère la boîte "chercher"*/
.headerprvi
{
	padding-left: 25px;
	background-color: #ECE9D8;
	color: #FFFFFF;
	font-weight: bold;
	vertical-align: middle;
	/*border-top: 1px solid #ECE9D8;*/
}
form
{
	font-size: 11px;
	color: #787878;
}
.loginlink
{
	background-image: url('btn_bullet.gif');
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 10px;
}
.button
{
	font-size: 10px;
	color: #000000;
	margin-bottom: 1px;
}
.sadrzaj
{
	margin-bottom: 20px;
}
.blok
{
	margin-bottom: 6px;
}
.forum
{
	background-color: #9B8A4F;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	padding: 6px;
}
.forumprvi
{
	background-color: #DDD8B9;
	padding: 3px;
	color: #3C351E;
}
.forumdrugi
{
	background-color: #E9E6D1;
	padding: 3px;
	color: #3C351E;
}
.navigacijaforum
{
	background-color: #CFC79C;
	padding: 5px;
	color: #3C351E;
	border-top: 1px dashed #333333;
	border-bottom: 1px dashed #333333;
	font-size: 12px;
	text-align: center;
	font-weight: bold;
}
.border
{
	border-left: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding: 3px;
}
.borderdesno
{
	border-bottom: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	padding: 3px;
}
.forum a
{
	color: #3C351E;
}
.download
{
	padding: 10px;
}
.downhead
{
	color: #FFFFFF;
	padding: 5px;
	background-color: #74673A;
}
.downloadsvaki
{
	width: 97%;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	padding: 5px;
}
.tiny
{
	width: 90%;
}
.dole
{
	width: 758px;
	margin-top: 5px;
}
.privatnost
{
	color: #635832;
	font-size: 10px;
	text-align: center;
	padding-top: 8px;
	background-color:#FFFFFF;
}
.privatnost a
{
	color: #635832;
}


td#headmenu a.menuHead
{
	font-size: 12px;
	
}
.line_main
{
	border-top: 1px solid #ffffff;
}
/*gère l'affichage de l'heure*/
.sat
{
	padding-left:51px;
	padding-top:10px;
	vertical-align: middle;
	font-size: 10px;
	color: #615930;
	/*border-bottom: 1px solid #514928;*/
}
table#glavna
{
	background-color: transparent;
}
table#header
{
	background-color: transparent;
}
td#headerlogo
{
	background-color: #ECE9D8;
}

/*menus déroulants*/
.subnavigate1
{
	/*background-color: #C9BF8F;*/
	background-color: #000000;
	text-align: right;
	vertical-align: middle;
	height: 20px; /* hauteur de la ligne marron où prend place le menu déroulant*/
	padding-right: 20px;
	/*color: #AF1403;*/
	color:#ffffff;
	border-top: 1px solid #514928;
}
.subnavigate
{
	
	background-color: #ffffff;
	/*background-color: #669966;*/
	text-align: center;
	vertical-align: middle;
	height: 20px; /* hauteur de la ligne marron où prend place le menu déroulant*/
	padding-right: 20px;
	padding-left: 75px;
	/*color: #AF1403;*/
	color:#004080;
	/*border-top: 1px solid #514928;*/
	display:none;
}
.subnavigate a
{
	font-size: 11px;
	font-weight: normal;
	/*color: #AF1403;*/
	color: #004080;
}


/* MISE EN FORME DE L'AGENDA"*/
.tableau
{
	
	border: 1px solid #669900;
}	

.couleur_jour
{
	/*background-color: #EEECDD;*/
	background-color: #ffffff;
	padding: 5px;
}
.couleur_jour2
{
	background-color: #F3F4F5;
	padding: 5px;
}

Remi L. · 19 Février 2007

C'est pour un concours ?
Le message le plus long ?

Si tu ne veux pas de marge autour de tes form, il suffit de le dire :
form{margin:0;}

goofy · 19 Février 2007

J'ai craqué . Je vous prie de m'excuser

Leonick · 22 Février 2007

des fois, il suffit juste de corriger les quelques (188 :lol: ) erreurs de validation et les css fonctionnent mieux

goofy · 22 Février 2007

Leonick a dit:
des fois, il suffit juste de corriger les quelques (188 :lol: ) erreurs de validation et les css fonctionnent mieux

Merci de ta réponse. C'est quoi une erreur de validation ? Un mauvais codage du css ? Et tu en as détecté 188 ? Il existe des logiciels qui permettent de détecter des erreurs d'écriture de css ?
Merci

Bacteries · 22 Février 2007

http://jigsaw.w3.org/css-validator/vali ... .google.fr

goofy · 22 Février 2007

Merci pour l'url.

Ma feuille de style est validée par contre j'ai pas mal de pb qd je vérifie "par adresse url".
J'en ai corrigé un certain nombre mais je bloque la dessus :

Code:

The reference to entity "idrecherche" must end with the ';' delimiter.

Dans mon fichier html j'ai une seule référence à "idrecherche" et voici le paragraphe :

Code:

<TD>
			<A HREF="http://www.grenoble-montagne.com/modules/sdwportal/recherches.php?op=get&idrecherche=2"
				ONMOUSEOVER="changeImages('menu_05', 'http://www.grenoble-montagne.com/images/accueil/menu/menu_05-over.jpg'); return true;"
				ONMOUSEOUT="changeImages('menu_05', 'http://www.grenoble-montagne.com/images/accueil/menu/menu_05.jpg'); return true;">
				<IMG NAME="menu_05" SRC="http://www.grenoble-montagne.com/images/accueil/menu/menu_05.jpg" WIDTH="163" HEIGHT="25" BORDER="0" ALT=""></IMG></A></TD>

Je dois l'ajouter où ce ';' ?

Leonick · 22 Février 2007

goofy a dit:
Leonick a dit:

des fois, il suffit juste de corriger les quelques (188 :lol: ) erreurs de validation et les css fonctionnent mieux

Cliquez pour agrandir...

Merci de ta réponse. C'est quoi une erreur de validation ? Un mauvais codage du css ? Et tu en as détecté 188 ? Il existe des logiciels qui permettent de détecter des erreurs d'écriture de css ?
Merci

désolé, j'avais oublié de mettre le lien
http://validator.w3.org/check?verbose=1 ... oryid%3D59
en fait, c'est plus au niveau du code qu'il faut voir initialement. Un bon css sur un code bancale donnera des résultats aléatoires