IE7 et Firefox: décalage menu

Résolu

txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention -
bergeat - 25 avril 2008 à 13:47

Bonjour,
J'ai un gros souci avec un menu sur le site http://txiki.free.fr/ (maquette provisoire).
Si on utilise Firefox, une partie du menu est décalé tandis qu'avec IE7, tout est OK (? ? ?)
J'ai utilisé les mêmes fichiers que celui-ci: http://nthld.free.fr/ (évidemment les contenus des menus sont a changer).
C'est d'ailleurs pour elle que je fais ce site et on se voit ce week-end pour lui montrer comment on crée les pages dont elle a besoin.

C'est un ingénieur en informatique qui a fait ça et qui nous l'a donné et faut dire que je suis assez dérouté par la technique utilisée ! Je ne suis pas développeur moi !

Si vous voulez les fichier css et js, faites moi signe. je les mettrai ici. (mais ils sont assez longs !)

Merci d'avance pour ceux qui se pencheront sur le Pb ! et bonne journée ! ;-)

Afficher la suite

A voir également:

IE7 et Firefox: décalage menu
Video downloadhelper firefox - Télécharger - Outils pour navigateurs
Telecharger firefox - Télécharger - Navigateurs
Exporter favoris firefox - Guide
Ghostery firefox - Télécharger - Web & Internet
Comment supprimer bing de firefox - Guide

1 réponse

Réponse 1 / 1

RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention 1 360

SALUT

essaye un float leFt dans le css

#contenu {
	MARGIN: 0px auto; 
	WIDTH: 900px;
        float:left;

RAD

txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention 521

Merci Rad-zone, mais ça ne change rien sous Firefox par contre ça décale sous IE maintenant.

Autre proposition ?

bergeat > txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention

bonjour
chez moi menu = menu gauche, corps =div contenu
#menu {
float: left;
width: 145px;
background-color: #336699;
}
#corps{
margin-left: 145px;
color: #0033CC;
font-size: 82%;
position: relative;
}

txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention 521 > bergeat

Salut bergeat !

Tu peux préciser ?
Ou vois-tu #menu et #corps ?
Voici la css pour les menus (je suppose car il y en quatre qui se trouvent dans le répertoire Styles_Scripts)

.transMenu {
	LEFT: -1000px; 
	OVERFLOW: hidden; 
	POSITION: absolute; 
	TOP: -1000px;
}

.transMenu .content {
	POSITION: absolute;
}

.transMenu .items {
	Z-INDEX: 2; 
	LEFT: 0px; 
	POSITION: relative;
}

.top .items {
	BORDER-TOP-STYLE: none;
}

.transMenu .item {
	DISPLAY: block; 
	FONT-WEIGHT: bold; 
	BACKGROUND: #931224; 
	VERTICAL-ALIGN: middle; 
	WIDTH: 100%; 
	CURSOR: pointer; 
	COLOR: #fff; 
	TEXT-INDENT: 15px; 
	BORDER-BOTTOM: #fff 1px solid; 
	TEXT-DECORATION: none;
}
.transMenu .item TD {
	
}

.transMenu .background {
	Z-INDEX: 1; 
	FILTER: alpha(opacity=80); 
	LEFT: 0px; 
	POSITION: absolute; 
	TOP: 0px; 
	moz-opacity: .8;
}

.transMenu .shadowRight {
	Z-INDEX: 3; 
	FILTER: alpha(opacity=40); 
	WIDTH: 2px; 
	POSITION: absolute; 
	TOP: 3px; 
	moz-opacity: .4;
}

.transMenu .shadowBottom {
	Z-INDEX: 1; 
	FILTER: alpha(opacity=40); 
	LEFT: 3px; 
	POSITION: absolute; 
	HEIGHT: 2px; 
	moz-opacity: .4;
}

.transMenu .hover {
	COLOR: #999999;
}

.transMenu .item IMG {
	MARGIN-LEFT: 0px;
}

#wrap {
	PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	PADDING-TOP: 0px;
}

#menu {
	PADDING-RIGHT: 0px; 
	DISPLAY: block; 
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	WIDTH: 100%; 
	PADDING-TOP: 0px;
}

.transMenu .item#active {
	BACKGROUND: #ff0000; 
	FILTER: alpha(opacity=60); 
	COLOR: black; 
	moz-opacity: .6;
}

.transMenu .hover#active {
	COLOR: #999999
}

A.mainlevel-trans:link {
	PADDING-RIGHT: 0px; 
	DISPLAY: block; 
	PADDING-LEFT: 20px; 
	FONT-WEIGHT: bold; 
	BACKGROUND: #931224; 
	PADDING-BOTTOM: 3px; 
	VERTICAL-ALIGN: middle; 
	WIDTH: 120px; 
	COLOR: #ffffff; 
	PADDING-TOP: 2px; 
	TEXT-DECORATION: none;
}

A.mainlevel-trans:visited {
	PADDING-RIGHT: 0px; 
	DISPLAY: block; 
	PADDING-LEFT: 20px; 
	FONT-WEIGHT: bold; 
	BACKGROUND: #931224; 
	PADDING-BOTTOM: 3px; 
	VERTICAL-ALIGN: middle; 
	WIDTH: 120px; 
	COLOR: #ffffff; 
	PADDING-TOP: 2px; 
	TEXT-DECORATION: none;
}

A.mainlevel-trans:hover {
	BACKGROUND-POSITION: 13px 6px; 
	COLOR: #999999;
}

A.mainlevel_active-trans {
	PADDING-RIGHT: 0px; 
	DISPLAY: block; 
	PADDING-LEFT: 20px; 
	FONT-WEIGHT: bold; 
	BACKGROUND: #931224; 
	PADDING-BOTTOM: 3px; 
	VERTICAL-ALIGN: middle; 
	WIDTH: 120px; 
	COLOR: #ffffff; 
	PADDING-TOP: 2px; 
	TEXT-DECORATION: none;
}

A.mainlevel_active-trans:visited {
	PADDING-RIGHT: 0px; 
	DISPLAY: block; 
	PADDING-LEFT: 20px; 
	FONT-WEIGHT: bold; 
	BACKGROUND: #931224; 
	PADDING-BOTTOM: 3px; 
	VERTICAL-ALIGN: middle; 
	WIDTH: 120px; 
	COLOR: #ffffff; 
	PADDING-TOP: 2px; 
	TEXT-DECORATION: none;
}

A.mainlevel_active-trans:hover {
	COLOR: #999999;
}

Je dois préciser que c'est une "tronche" qui a fait ça (je ne dis pas qu'il n'y a pas ici mais j'avais vu un truc pareil pour un site.....
Ce qui est troublant dans l'histoire, c'est que chez lui il n'y a pas de Pb http://pascal.daniel3.free.fr/ avec Firefox et chez moi il y a ce décalage. Où est le blème ?

Merci encore pour votre soutient !

bergeat > txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention

bonjour
à part le menu déroulant il y a plus simple comme structure. je vois que news events, special events et Bienvenue chez Relax'n Touch font parti d'un tableau qui se trouve dans une div nommée contenu.c'est peut-être là que çà coince.un margin 0 serait peut-être nécessaire. il faut retrouver le css correspondant.

txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention 521 > bergeat

Merci bergeat pour ta réponse,
Hélàs, j'y avais pensé aussi mais ce n'est pas ça.

HTML {
	height: 100%;
}

BODY {
	height: 100%;
	padding-right: 0px; 
	padding-left: 0px; 
	padding-top: 0px; 
	color: #333333; 
	font-size: 11px; 
	background: #dddddd; 
	padding-bottom: 0px; 
	margin: 0px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	SCROLLBAR-FACE-COLOR: #ffffff; /* uniquement pour IE */
	SCROLLBAR-HIGHLIGHT-COLOR: #9cbac6; /* uniquement pour IE */
	SCROLLBAR-SHADOW-COLOR: #9cbac6; /* uniquement pour IE */
	SCROLLBAR-3DLIGHT-COLOR: #ffffff; /* uniquement pour IE */
	SCROLLBAR-ARROW-COLOR: #9cbac6; /* uniquement pour IE */
	SCROLLBAR-TRACK-COLOR: #ffffff; /* uniquement pour IE */
	SCROLLBAR-DARKSHADOW-COLOR: #ffffff; /* uniquement pour IE */
}

.content {
	padding-right: 0px; 
	padding-left: 0px; 
	padding-bottom: 0px; 
	width: 100%; 
	padding-top: 0px; 
	height: 100%
}

TD {
	font-size: 11px; 
	vertical-align: top; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	letter-spacing: 1px;
}

IMG { /* === border-width ne suffisait pas ? === */
	border-top-width: 0px; 
	border-left-width: 0px; 
	border-bottom-width: 0px; 
	border-right-width: 0px;
}

FORM { 
	padding:0px; 
	margin:0px
} 


#header {
    margin: 0px auto; 
	width: 900px; 
	padding-top: 12px; 
	padding-bottom: 10px; 
	text-align: right;
}


#bandeau {
	background: #931224; 
	margin: 0px auto; 
	width: 900px; 
	height: 164px;
}

#bandeau .moduletable_image {
	float: right
}

#bandeau .moduletable {
	float: left
}

#bandeau .moduletable UL { /* === pourquoi ces padding inutiles puisque tous égaux ? === */
	padding: 0px; 
	/* padding-left: 0px; 
	padding-bottom: 0px; 
	padding-top: 0px; */
	margin: 5px 0px 0px 10px; 
	width: 180px; 
	list-style-type: none;
}

#bandeau .moduletable UL LI A {
	padding-right: 0px; 
	display: block; 
	padding-left: 12px; 
	font-weight: bold; 
	background: #dddddd; 
	padding-bottom: 2px; 
	width: 100%; 
	color: #ffffff; 
	padding-top: 2px; 
	text-decoration: none;
}

#bandeau .moduletable UL LI A:hover {
	background: #dddddd; 
	color: #999999;
}

#bandeau .moduletable_menu {
	float: left
}

#bandeau .moduletable_menu UL { /* === encore des padding égaux pour rien === */
	padding: 0px; 
	/* padding-left: 0px; 
	padding-bottom: 0px; 
	padding-top: 0px; */
	margin: 5px 0px 0px 10px; 
	width: 180px; 
	list-style-type: none;
}

#bandeau .moduletable_menu UL LI A {
	padding-right: 0px; 
	display: block; 
	padding-left: 12px; 
	font-weight: bold; 
	background: #dddddd; 
	padding-bottom: 2px; 
	width: 100%; 
	COLOR: #fff; 
	padding-top: 2px; 
	text-decoration: none;
}

#bandeau .moduletable_menu UL LI A:hover {
	background: #dddddd; 
	color: #999999;
}

#contenu {
	margin: 0px auto; 
	width: 900px;
}

#contenu A {
	color: #455D8B; 
	text-decoration: none;
}

#contenu A:hover {
	text-decoration: underline;
}

.contentheading {
	font-weight: normal; 
	font-size: 20px; 
	color: #323334;
}

.componentheading {
	font-weight: normal; 
	font-size: 20px; 
	padding-bottom: 0px; 
	color: #323334;
}

#partners IMG { /* encore répétitions des border identiques */
	border-right: #d1d1d1 1px solid; 
	border-top: #d1d1d1 1px solid; 
	border-left: #d1d1d1 1px solid; 
	border-bottom: #d1d1d1 1px solid;
	font-size: 10px; 
}

#partners TD {
	padding-right: 10px; 
	padding-left: 0px; 
	font-size: 10px; 
	padding-bottom: 0px; 
	vertical-align: top; 
	padding-top: 0px; 
	height: 70px;
}

#partners A {
	font-size: 13px; 
	color: #637c86; 
	text-decoration: none;
}

#footer {
	background: #dddddd repeat-x; 
	color: #6c6b6b;
	padding-bottom: 0px;
	padding-top: 5px;
}

#footer_int {
	font-size: 10px; 
	margin: 0px auto; 
	width: 900px; 
	padding-top: 5px;
}

.moduletable_footer {
	width: 100%
}

#credit {
	right: 2px; 
	bottom: 55px; 
	position: absolute;
}


.adv_link {
	font-size: 11px; 
	color: #6c6b6b; 
	text-decoration: none;
}

J'ai mis un margin: 0; mais ça ne change rien pour Firefox et par contre, ça touche le bord gauche de l'écran sous IE.

Ce qui est énéervant c'est qu'on ne peut pas lui demander un coup de main car, en dehors de son job, il est interdit de parler informatique.

J'ai bien envi d'envoyer tout le site a quelqu'un ici, à la fois pour l'analyser et donc le commenter plus qu'il n l'est actuellement) et ça pourrait inspirer quelqu'un pour s'en servir personnellement. Qu'en pensez-vous ?

Discussions similaires

Méssage Firefox ''Couldn't load XPCOM''

J'ai le message "coudn't load XPCOM."

Coudn't load XPCOM.

Faire réapparaître la Barre des taches sous Firefox en bas.

Votre réponse

Discussions similaires