[Résolu] Firefox et IE - Présentation différente !! par doudoufly - page 1

Bonjour à vous.
J'ai modifier le code css pas de changement.

.sous_menu
{
width:120px;
margin:auto;
margin:0px;
border-style:solid;
border-width:1px;
}

.sous_menu ul
{
list-style-type:none;
margin-left :0px;
}

Vous pourrez trouver le site à l'adresse suivant:
ici.

Merci encore.

Bon après réflexion je vous colle tout le code css ATTENTION il est long.
Bon courage:

/*
================================================================================================================================================================================
====BODY========================================================================================================================================================================
================================================================================================================================================================================
*/

body
{
width:760px;
margin-left: auto;
margin-right: auto;
font-family: verdana, sans-serif;
font-size:small;
}

a
{
text-transform:capitalize;
text-decoration:none;
color:rgb(0,89,187);
}
a:hover
{
text-decoration:underline;
color:rgb(0,89,187);
}

.justify
{
text-align:justify;
}

.center
{
text-align:center;
}

h1,h2,h3,h4,h5,h6
{
color:rgb(51,102,153);
text-transform:capitalize;
}

table
{
border-collapse:collapse;
}
td, th /* Mettre une bordure sur les td ET les th */
{
border: 1px solid #9EA0A1;
border-collapse:collapse;
}

/*
================================================================================================================================================================================
====EN_TETE=====================================================================================================================================================================
================================================================================================================================================================================
*/

#en_tete
{
height: 148px;
background-image:url("../images/logo.jpg");
}

/*
================================================================================================================================================================================
====MENU HORIZONTAL=============================================================================================================================================================
================================================================================================================================================================================
*/

#menu_horizontal
{
padding:1px;
}

#onglets
{
list-style-type :none;
padding-bottom : 24px;
border-bottom : 1px solid #9EA0A1;
margin-left :0px;
}

#onglets li
{
float : left;
height : 21px;
background-color: #F4F9FD;
margin : 2px 2px 0 2px !important; /* Pour les navigateurs autre que IE */
margin : 4px 2px 0 2px; /* Pour IE */
border : 1px solid #9EA0A1;
}

#onglets li.active
{
border-bottom: 1px solid #fff;
background-color: #fff;
}

#onglets a
{
display : block;
color : #666;
text-decoration : none;
}

#onglets a:hover
{
background : #fff;
}

/*
================================================================================================================================================================================
====MENU========================================================================================================================================================================
================================================================================================================================================================================
*/

#menu
{
margin-right:10px;
background-color:#F4F9FD;
width:130px;
float:left;
border-style:solid;
border-color:rgb(128,128,128);
border-width:1px;
}

/*
================================================================================================================================================================================
====SOUS_MENU===================================================================================================================================================================
================================================================================================================================================================================
*/

.sous_menu
{
width:120px;
margin:auto;
margin:0px;
border-style:solid;
border-width:1px;
}

.sous_menu ul
{
list-style-type:none;
margin-left :0px;
}

.sous_menu ul li
{

}

}

/*

================================================================================================================================================================================
====COPRS=======================================================================================================================================================================
================================================================================================================================================================================
*/

#corps
{
margin-left:145px;
padding:5px;
background-color:#F4F9FD;
border-style:solid;
border-color:rgb(128,128,128);
border-width:1px;
}

.gras
{
font-weight:bold;
}

.lbl_gauche
{
display:block;
float:left;
width:40px;
}

.gras
{
font-weight:bold;
}

img.img
{
border:none;
}

#centrer
{
padding:5px;
margin: auto;
width: 300px;
}

/*
================================================================================================================================================================================
====PIED DE PAGE================================================================================================================================================================
================================================================================================================================================================================
*/

#pied_de_page p
{
clear:left;
margin-top:10px;
padding:5px;
}

/*
================================================================================================================================================================================
====VIDEOS======================================================================================================================================================================
================================================================================================================================================================================
*/

#videos
{
margin:auto;
width:200px;
}

/*
================================================================================================================================================================================
====MEMBRES EMAIL===============================================================================================================================================================
================================================================================================================================================================================
*/

#membres_email_div_frm
{
margin:auto;
background-color:#CBDAF1;
padding:5px;
width:450px;
}

.membres_email_frm_lbl_block
{
display:block; /*La balise devient de type block*/
width:230px;
float:left;
text-align:right;
}

/*
================================================================================================================================================================================
====TABLEAU MESSAGES============================================================================================================================================================
================================================================================================================================================================================
*/

.tbl_erreur
{
margin-top:40px;
width:400px;
border-style:solid;
border-width:1px;
border-color:red;
}

.tbl_message
{
margin-top:40px;
width:400px;
border-style:solid;
border-width:1px;
border-color:green;
}

.tbl_td_message_type
{
font-weight:bold;
border-color:green;
color:green;
}

table .tbl_td_erreur_type
{
font-weight:bold;
border-color:red;
color:red;
}

table.tbl_td_message
{
border-color:green;
color:green;
}

table.tbl_td_erreur
{
border-color:red;
color:red;
}

/*
================================================================================================================================================================================
====PAGE MEMBRES================================================================================================================================================================
================================================================================================================================================================================
*/
.membres_tbl td
{
border-style:none;
}

/*
================================================================================================================================================================================
====PAGE CONNECTION================================================================================================================================================
================================================================================================================================================================================
*/

#connection
{
border:solid 1px #9EA0A1;
margin:auto;
padding:5px;
width:300px;
background-color:#CBDAF1;
}

.connection_tbl_td
{
border-style:none;
}

/*
================================================================================================================================================================================
====PRESENTATION DES NEWS=======================================================================================================================================================
================================================================================================================================================================================
*/

.tbl_news
{
width:600px;
border-style:solid;
border-width:1px;
border-color:rgb(128,128,128);
}

.tbl_news_titre
{
font-weight:normal;
text-align:left;
color:rgb(51,102,153);
}

.tbl_news .tr1
{
font-weight:bold;
text-align:left;
background-color:#CBDAF1;
}

.tblenews .tr2
{
background-color:rgb(255,255,255);
}

.tbl_news img
{
width:140px;
float:left;
border:none;
padding:5px;
}

/*
================================================================================================================================================================================
====LIVRE D'OR==================================================================================================================================================================
================================================================================================================================================================================
*/

#livreDor_textarea
{
width:340px;
height:50px;
margin:auto;
border:solid 1px #9EA0A1;
padding-top:5px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
background-color:#CBDAF1;
}

.tbl_livreDor
{
width:540px;
margin:auto;
margin-bottom:20px;
}

.tbl_livreDor_td1
{
width:540px;
background-color:#CBDAF1;
color:rgb(51,102,153);
font-size:x-small;
}
.tbl_livreDor_td2
{
background-color:rgb(255,255,255);
}

doudoufly

7 mai 2007 à 14:54:20

Bonjour à tous

.

Bon j'essaye de faire un menu à gauche avec des sous menus. Mes sous menus contenants une liste à puce toute bète <ul><li></li></ul>. J'aimerais tout simplement enlever la présentation soit list-style-type:none; ce qui marche et enlever la tabulation des <li> :euh:

.

J'ai cru avoir réussi mais quand je regarde le résultat IE impécable http://sdlp17.free.fr/divers/1.JPG

Mais Firefox désastreux :euh:

http://sdlp17.free.fr/divers/2.JPG.

Merci pour votre aide les zéros.

#menu
{
margin-right:10px;
background-color:#F4F9FD;
width:130px;
float:left;
border-style:solid;
border-color:rgb(128,128,128);
border-width:1px;
}

.sous_menu
{
width:120px;
margin:auto;
margin:5px;
border-style:solid;
border-width:1px;
}

.sous_menu ul
{
list-style-type:none;
margin-left :0px;
}

.sous_menu ul li
{

}

Trent

7 mai 2007 à 16:00:02

Sallut

Peut-tu mettre un exemple en ligne ou nous coller le code HTML+CSS de la page? Ce problème m'intrigue beaucoup et j'aimerais savoir quel navigateur interprète correctement ta page

J'espère pouvoir t'aider

Trent.

xbb

7 mai 2007 à 16:23:27

Tu dois fixer le text-indent ou bien margin ou bien padding des <li> (je ne sais plus lequel c'est) car IE et FF n'ont pas la même valeur par défaut.

Taediosus

7 mai 2007 à 16:23:55

un margin à zéro devrait faire l'affaire, sinon essaye avec un margin négatif.

7 mai 2007 à 16:29:42

Ah oui c'est vrai il veut aucun style... ben oui il faut fixer à 0 dans ce cas.

7 mai 2007 à 16:43:36

7 mai 2007 à 16:48:41

Si c'est pas le margin c'est le padding ou bien le text-indent...

Au passage tu peux mettre juste 0 au lieu de "0px" car 0 c'est 0 quelle que soit l'unité :).

PS : Ah bon après visionnage il apparait que c'est ta ul d'id "menu_sdlp" qui pose problème. Elle doit avoir un padding-left qui gêne...

EDIT : eh oh tu m'as mal lu je pense. C'est sur les <li> qu'il fallait d'abord tenter des modif !!
essaye de changer le margin des li pour voir...

Myssdii

7 mai 2007 à 16:54:07

Mozilla a la particularité de, même si ta liste n'a plus de puce, laisser une marge. Pour ton code, remplace-le par ça :

.sous_menu ul
{
list-style-type:none;
margin-left :XXXpx !important;
margin-left :0px;
}

Règle la marge notée XXX de manière à ce que tout colle bien

Le !important va empêcher IE de lire la ligne, mais pas les autres navigateurs (comme FF). Mozilla va donc lire en priorité la ligne avec le !important. Il te suffit juste de régler la marge

7 mai 2007 à 19:28:38

Salut Missdii.
Marche pas j'ai toujours avec firefox une marge!!.

Au fait Xbb: marche pas non plus

.sous_menu
{
width:120px;
margin:auto;
margin:0px;
border-style:solid;
border-width:1px;
}

.sous_menu ul
{
list-style-type:none;
margin-left :0px;
}

.sous_menu ul li
{
padding-left :0px;
}

Bilbou

7 mai 2007 à 19:44:44

Chu !

Commence donc par ceci :

.sous_menu ul
{
margin: 0;
padding: 0;
}

.sous_menu ul li
{
margin: 0;
padding: 0;
}

Ensuite, ré-applique pas à pas les marges et padding souhaités pour obtenir un rendu correct à la fois dans IE et FF !

Bonne soirée !

7 mai 2007 à 19:52:19

Bonsoir Bilbou

Voici le code

.sous_menu
{
width:120px;
margin:auto;
margin:2px;
border-style:solid;
border-width:1px;
padding:2px;
}

.sous_menu ul
{
list-style-type:none;
margin:0;
padding:0;
}

.sous_menu ul li
{
margin:0;
padding:0;
}

Et j'en reviens

pas, c'est formidable

plus de problème exactement la même chose sur les deux.

Par contre j'ai remarqué que sans "list-style-type:none"; sur Firefox ils apparaissaient hors menu et sur IE pas du tout. Je l'ai rajouté tout de même pour Firefox.

En tout cas un grand merci à vous tous

.

@+ doudoufly

10 mai 2007 à 20:31:48

Firefox et IE

Présentation différente !!

Firefox et IE

Supprimer

Modérer

Signaler le message aux modérateurs