IE7 et Firefox: décalage menu

Résolu/Fermé

txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 24 avril 2008 à 12:36
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 ! ;-)

A voir également:

IE7 et Firefox: décalage menu
Video downloadhelper firefox - Télécharger - Outils pour navigateurs
Comment supprimer bing de firefox - Guide
Exporter favoris firefox - Guide
Firefox download - Télécharger - Navigateurs
Dark reader firefox - Guide

1 réponse

Réponse 1 / 1

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
24 avril 2008 à 12:48

SALUT

essaye un float leFt dans le css

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

RAD

txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
24 avril 2008 à 12:56

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 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024
24 avril 2008 à 13:29

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 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515 > bergeat
24 avril 2008 à 14:17

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 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024
25 avril 2008 à 10:16

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 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515 > bergeat
25 avril 2008 à 12:42

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''

Firefox mise à jour message XULrunner Error platform

Comment retrouver mes favoris Firefox dans mon disque dur?

Discussions similaires

Newsletters