Pb affichage Firefow et Safari

Pb affichage Firefow et Safari - HTML/CSS - Programmation

Marsh Posté le 31-01-2012 à 10:44:05    

Bonjour ,
 
je finaissais un site web , et lorsque surprise je le met en ligne , sur IE9 , ca fonctionne super , par contre sur safari et firefox 9 , decalage du menu , le "contact" se met en dessous et les slides des pages secondaires sont decalés aussi , j ai  tout essayé les mises a jours JS , c est encore pire . sur firefox 6 cela etait super. Là j ai la tete a lenvers , a trop chercher des fois on en perd son latin , le site www.cash94.fr ,
 
Voici mon deut de code pour mon Style.css
 
@charset "utf-8";
body { margin:0; padding:0; width:100%; background:#fff;}
html { padding:0; margin:0;}
 
/* main */
.main {width:100%; padding:0; margin:0 auto; }
.resize { width:955px; margin:0 auto;}
 
/********** header **********/
.header {
 height:176px;
 background:url(images/header_bg.gif) top repeat-x;
}
 
.block_header {
 width:995px;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
}
.top_menu { float:right; padding:4px 10px; font:normal 11px Tahoma, Geneva, sans-serif; color:#4e4e4e; line-height:1.6em;}
.top_menu a { font:normal 11px Tahoma, Geneva, sans-serif; color:#4e4e4e; text-decoration:none;}
.top_menu a:hover {text-decoration:underline;}
/*******Twitter**********/
.RSS { width:180px; height:24px; float:right; padding:10px 0 0 30px; margin:0; background: url(images/RSS.gif) left no-repeat; font:normal 11px  Arial, Helvetica, sans-serif; color:#575757;}
/* logo */
.logo { float:left; padding:0; margin:0; width:422px;}
/* menu */  
.menu {
 padding:0;
 width:510px;
 float: right;
 margin-top: 30px;
 margin-right: 0;
 margin-bottom: 0;
 margin-left: 0;
}
.menu ul { padding:3px 0; margin:0; list-style:none; border:0;}
.menu ul li { float:left; margin:0; padding:0 3px; border:0;}
.menu ul li a {
 display:block;
 float:left;
 color:#fff;
 font:normal 14px  Arial, Helvetica, sans-serif;
 text-decoration:none;
 margin-top: 0;
 margin-right: 1px;
 margin-bottom: 0;
 margin-left: 0;
 padding-top: 12px;
 padding-right: 0;
 padding-bottom: 12px;
 padding-left: 0;
}
.menu ul li a span.bgi { padding:17px 15px 31px 15px !important; padding:24px 15px; background:none;}
.menu ul li a:hover {
 color:#ff994e;
 background-repeat: no-repeat;
 background-position: right;
 background-image: url(images/r_menu.gif);
}
.menu ul li a:hover span.bgi {color:#ff994e;  background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a.active {color:#ff994e; background:url(images/r_menu.gif) no-repeat right ;}
.menu ul li a.active span.bgi {color:#ff994e; background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a span.bgi span { color:#CCC; font:normal 11px Arial, Helvetica, sans-serif; display:block; text-align:center;}
 
 
En esperant que vou spuissiez m'aider .
 
Merci d'avance


---------------
Merci a ceux qui m'aide , et j espere avoir aidé les autes
Reply

Marsh Posté le 31-01-2012 à 10:44:05   

Reply

Marsh Posté le 31-01-2012 à 11:57:58    

hello, commence déjà par agrandir la largeur de ta div "menu". l'onglet contact va s'aligner avec les autres.

Reply

Marsh Posté le 31-01-2012 à 12:00:23    

et sur le span "bgi" réduis le padding-top à 4px;  
 
(comme ça, ça marche sur firefox mais je n'ai pas IE pour tester)

Reply

Marsh Posté le 31-01-2012 à 13:59:11    

_Pinkette_ a écrit :

et sur le span "bgi" réduis le padding-top à 4px;  
 
(comme ça, ça marche sur firefox mais je n'ai pas IE pour tester)


 
Merci beaucoup Pinkette de te pencher sur mon pb, je teste cela et te tient au courant .

Reply

Marsh Posté le 31-01-2012 à 14:08:39    

Je viens de tester cela reste identique , j avais deja tester le probleme d'agrandissement, mais c est idem , je seche grave , je comprends pas , voici ce que cela donne sur mon css :
 
/* menu */  
.menu {
 padding:0;
 width:550px;
 float: right;
 margin-top: 30px;
 margin-right: 0;
 margin-bottom: 0;
 margin-left: 0;
}
.menu ul { padding:3px 0; margin:0; list-style:none; border:0;}
.menu ul li { float:left; margin:0; padding:0 3px; border:0;}
.menu ul li a {
 display:block;
 float:left;
 color:#fff;
 font:normal 14px  Arial, Helvetica, sans-serif;
 text-decoration:none;
 margin-top: 0;
 margin-right: 1px;
 margin-bottom: 0;
 margin-left: 0;
 padding-top: 12px;
 padding-right: 0;
 padding-bottom: 12px;
 padding-left: 0;
}
.menu ul li a span.bgi { padding:17px 15px 31px 15px !important; padding:24px 15px; background:none;}
.menu ul li a:hover {
 color:#ff994e;
 background-repeat: no-repeat;
 background-position: right;
 background-image: url(images/r_menu.gif);
 padding-top: 4px;
}
.menu ul li a:hover span.bgi {color:#ff994e;  background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a.active {color:#ff994e; background:url(images/r_menu.gif) no-repeat right ;}
.menu ul li a.active span.bgi {color:#ff994e; background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a span.bgi span { color:#CCC; font:normal 11px Arial, Helvetica, sans-serif; display:block; text-align:center;}
 
 
Merci de ton aide tres apprecié

Reply

Marsh Posté le 01-02-2012 à 14:13:33    

Bon ben y a personne pour aider ???

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed