Compatibilité IE / FireFox
Résolu/Fermé
bg62
Messages postés
23590
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
15 avril 2024
-
18 avril 2006 à 09:04
Jo - 15 déc. 2007 à 20:28
Jo - 15 déc. 2007 à 20:28
A voir également:
- Compatibilité IE / FireFox
- Compatibilite windows 11 - Guide
- 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
10 réponses
C'est pas le problème de firefox, c'est juste IE qui ne respecte pas les standards...
http://cestadire.ch/index.php?option=com_content&task=view&id=76&Itemid=57
http://cestadire.ch/index.php?option=com_content&task=view&id=76&Itemid=57
Hello,
Je n'ai pas trop eu le temps de voir votre site... j'ai eu les mêmes soucis avec FF/IE qui venaient majoritairement de valeurs par défaut différentes pour les propriété CSS non explicitement spécifiées.
J'ai résolu pas mal de problèmes en ajoutant ça au début de mon CSS pour remetre à zéro toutes les rêgles :
*
{
margin: 0;
padding: 0;
border: none;
font-size: 1em;
font-family: serif;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
Bon, après il y aura sans doute des choses à ajouter puisque ça oblige à spécifier plus de rêgles qu'en temps normal. L'avantage c'est que ça permet une meilleur compatibilité entre les deux navigateurs.
Je n'ai pas trop eu le temps de voir votre site... j'ai eu les mêmes soucis avec FF/IE qui venaient majoritairement de valeurs par défaut différentes pour les propriété CSS non explicitement spécifiées.
J'ai résolu pas mal de problèmes en ajoutant ça au début de mon CSS pour remetre à zéro toutes les rêgles :
*
{
margin: 0;
padding: 0;
border: none;
font-size: 1em;
font-family: serif;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
Bon, après il y aura sans doute des choses à ajouter puisque ça oblige à spécifier plus de rêgles qu'en temps normal. L'avantage c'est que ça permet une meilleur compatibilité entre les deux navigateurs.
bg62
Messages postés
23590
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
15 avril 2024
2 362
19 avril 2006 à 07:26
19 avril 2006 à 07:26
OK MERCI donc on met ça dans le css, ce qui va changer les paramètres de la fonte ...
mais pour les autres pages, pas de css et les titres par exemple, qui virent complètement de position ???
je fais quoi moi ?
@+
b g
mais pour les autres pages, pas de css et les titres par exemple, qui virent complètement de position ???
je fais quoi moi ?
@+
b g
bg62
Messages postés
23590
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
15 avril 2024
2 362
4 mai 2006 à 07:47
4 mai 2006 à 07:47
OUI surement parti à la corbeille
je l'ai mis en ligne avec captures et zip:
http://www.unesourisetmoi.info/MENU%20TRAVAIL/menutravail.htm
comme cela tu pourras tout regarder
merci et @+
b g
je l'ai mis en ligne avec captures et zip:
http://www.unesourisetmoi.info/MENU%20TRAVAIL/menutravail.htm
comme cela tu pourras tout regarder
merci et @+
b g
Utilisateur anonyme
4 mai 2006 à 15:12
4 mai 2006 à 15:12
a noter que la plupart du temps c'est Ie qui merde et mozilla qui affiche mieux!!!!
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bg62
Messages postés
23590
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
15 avril 2024
2 362
4 mai 2006 à 15:24
4 mai 2006 à 15:24
MOI je veux bien ... mais IE est quand même celui qu'utilisent + de 90% des gens ... alors bien obligé ! et cela ne résout pas mon problème
merci quand même
@mitiés
b g
merci quand même
@mitiés
b g
Bounjour,
si tu veux, j'avais trouvé à l'époque un menu semblable au tien, fonctionnant sous ie et sous firefox.
Tu peux le voir sur ce site : https://lepont.asso.fr/
si tu es intéressé, fais moi signe...
a+
si tu veux, j'avais trouvé à l'époque un menu semblable au tien, fonctionnant sous ie et sous firefox.
Tu peux le voir sur ce site : https://lepont.asso.fr/
si tu es intéressé, fais moi signe...
a+
bg62
Messages postés
23590
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
15 avril 2024
2 362
5 mai 2006 à 06:11
5 mai 2006 à 06:11
merci
il me semble l'avoir vu su codes sources mais je ne pensais pas que l'on puisse le modifier ainsi, surtout s'il est compatible IE & FF
alors je te fais un signe, car cela m'intéresse
@mitiés
b g
il me semble l'avoir vu su codes sources mais je ne pensais pas que l'on puisse le modifier ainsi, surtout s'il est compatible IE & FF
alors je te fais un signe, car cela m'intéresse
@mitiés
b g
Salut,
si, il est modifiable, mais faut mettre le nez dans le code...
Sinon, va voir ici : http://www.dynamicdrive.com/dynamicindex1/indexc.html
tu devrais trouver ton bonheur...
a+
si, il est modifiable, mais faut mettre le nez dans le code...
Sinon, va voir ici : http://www.dynamicdrive.com/dynamicindex1/indexc.html
tu devrais trouver ton bonheur...
a+
bg62
Messages postés
23590
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
15 avril 2024
2 362
5 mai 2006 à 16:45
5 mai 2006 à 16:45
merci
super ! je ne connaissais pas et il y a pas mal de choses magnifiques ... pour un prochain site
pour l'instant je reste sur le mien (que je voudrais corriger) car il est jusqu'à maintenant unique ... pour moi !
(c comme pour le 'Petit Prince')
@mitiés
b g
super ! je ne connaissais pas et il y a pas mal de choses magnifiques ... pour un prochain site
pour l'instant je reste sur le mien (que je voudrais corriger) car il est jusqu'à maintenant unique ... pour moi !
(c comme pour le 'Petit Prince')
@mitiés
b g
PhP
Messages postés
1767
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
7 mai 2006 à 14:11
7 mai 2006 à 14:11
Bjr
Voilà un ex avec Javascript + DOM :
http://www.nobodysperfect.freesurf.fr/bg62/menu/menu.php
Evidemment c'est complexe
@+
Voilà un ex avec Javascript + DOM :
http://www.nobodysperfect.freesurf.fr/bg62/menu/menu.php
Evidemment c'est complexe
@+
bg62
Messages postés
23590
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
15 avril 2024
2 362
8 mai 2006 à 12:06
8 mai 2006 à 12:06
merci et encore une fois c'est du travail superbe !
1- "DOM" : ????
2- comment remettre ce script en le compilant comme je l'ai actuellement sur mon site en différentes partie php et css, voire ... ???
de manière à ce que je n'ai qu'à changer les 'texte' dans les fichiers du mien sans avoir à refaire tous les liens ou les "include"
je sais je suis un peux obtu mais je suis qd même en train d'apprendre de nombreuses choses en faisant cela
en résumé, je voudrais conserver les mêmes fichier dans mon site mais remplacer leur contenu par le tien
seulement quoi mettre et où ??
encore du boulot !
quel 'challenge' ...
rien à voir mais je viens de mettre un mess dans un autre forum car je ne peux plus ouvrir une page en cliquant sur un lien (qui va vers l'extérieur) là ça me coince plus que beaucoup ! si tu as la solution (avec IE)
@mitiés
b g
1- "DOM" : ????
2- comment remettre ce script en le compilant comme je l'ai actuellement sur mon site en différentes partie php et css, voire ... ???
de manière à ce que je n'ai qu'à changer les 'texte' dans les fichiers du mien sans avoir à refaire tous les liens ou les "include"
je sais je suis un peux obtu mais je suis qd même en train d'apprendre de nombreuses choses en faisant cela
en résumé, je voudrais conserver les mêmes fichier dans mon site mais remplacer leur contenu par le tien
seulement quoi mettre et où ??
encore du boulot !
quel 'challenge' ...
rien à voir mais je viens de mettre un mess dans un autre forum car je ne peux plus ouvrir une page en cliquant sur un lien (qui va vers l'extérieur) là ça me coince plus que beaucoup ! si tu as la solution (avec IE)
@mitiés
b g
salut!!
j'ai monté mon site avec du CSS et sous FF sa fonctionne 100% mais quand j'Arrive sous IE c'est affreux!!! le problème c'est que j'ai AUCUNE IDÉE des normes de codes CSS que IE accepte... si quelqu'un veut bien m'aider, voici mon code actuel... et oui il y en a long!!
/***********************************************/
/* HTML tag styles */
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
w:link, w:visited, w:hover {
text-decoration: none;
}
w:hover {
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial,sans-serif;
margin: 0px;
padding: 0px;
}
h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
}
h2{
font-size: 114%;
color: #006699;
}
h3{
font-size: 100%;
color: #334d55;
}
h4{
font-size: 100%;
font-weight: normal;
color: #333333;
}
h5{
font-size: 100%;
color: #334d55;
}
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
ul ul ul{
list-style-type: none;
}
label{
font: bold 100% Arial,sans-serif;
color: #334d55;
}
/***********************************************/
/* Layout Divs */
/***********************************************/
#masthead{
margin: 0;
padding: 10px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
background-color: #273234;
position: relative;
z-index: 10;
}
#content{
position: absolute;
z-index: 3;
width: 558px;
padding-left: 90px;
}
/************* #leftcontainer styles ***************/
#leftcontainer {
float:left;
top:-4;
height:auto;
width:auto;
position: relative;
background-color: #273234;
z-index: 8;
}
/************* #rightcontainer styles ***************/
#rightcontainer {
float:right;
top: 10;
right: 22;
height:auto;
width:auto;
position: fixed;
z-index: 999;
}
/************* #rightcontainer styles ***************/
#BPM {
float:right;
height:auto;
width:auto;
position: relative;
z-index: 1;
top: 8;
}
#demo {
color:#000033;
background-color:#cccccc;
layer-background-color:#cccccc;
position:absolute;
z-index:99;
visibility:hidden;
}
#bouttons {
float:right;
height:auto;
width:117;
position: relative;
z-index:100;
top: 5;
}
/************* #siteInfo styles ***************/
#siteInfo{
float:left;
left:-1px;
right:-1px;
position:absolute;
z-index: 8;
background-color: #273234;
font-weight:bold;
border: 1px solid #9d9da1;
font-size: 75%;
padding: 15px 40px 10px 25px;
}
#siteInfo img{
vertical-align: middle;
}
body,td,th {
color: #FFFFFF;
}
body {
background-color: #273234;
}
/************* #siteInfo styles ***************/
#djs{
float:left;
left:-0.2;
position:absolute;
z-index: 8;
background-color: #273234;
font-weight:bold;
border: 1px solid #9d9da1;
font-size: 75%;
padding: 0 36px 0 0;
}
/************* titre alignement ***************/
aligner {
float:left;
position:absolute;
z-index:1;
vertical-align:bottom;
}
/************* Menu styles ***************/
body {
behavior:url("");
}
* {
font-family:arial,tahoma,verdana,helvetica;
font-size:12px;
}
/* the menu */
ul,li,ld,w,b,lc,le,lr {
display:block;
margin:0;
padding:0;
border:0;
}
ul {
width:150px;
border:1px solid #9d9da1;
background:#273234;
list-style:none;
}
li {
position:relative;
padding:1px;
padding-left:26px;
background: url(images/item_moz.gif) no-repeat;
z-index:9;
}
li.folder { background: url(images/item_folder.gif) no-repeat; }
li.folder ul {
position:absolute;
left:120px; /* IE */
top:5px;
}
li.folder>ul { left:140px; } /* others */
ld {
position:relative;
padding:1px;
padding-left:26px;
background: url(images/item_mp3.gif) no-repeat;
z-index:9;
}
ld.folder { background: url(images/item_folder.gif) no-repeat; }
ld.folder ul {
position:absolute;
left:120px; /* IE */
top:5px;
}
ld.folder>ul { left:140px; } /* others */
lr {
position:relative;
padding:1px;
padding-left:26px;
background: url(images/item_bigjo.gif) no-repeat;
z-index:9;
}
lr.folder { background: url(images/item_bigjo.gif) no-repeat; }
lr.folder ul {
position:absolute;
left:120px; /* IE */
top:5px;
}
lr.folder>ul { left:140px; } /* others */
le {
position:relative;
padding:1px;
padding-left:26px;
background: url(images/item_blank.gif) 0 100% repeat-y;
z-index:9;
}
w {
padding:2px;
border:1px solid #273234;
text-decoration:none;
color:gray;
font-weight:bold;
width:100%; /* IE */
}
li>w { width:auto; } /* others */
li w.submenu {
background: url(images/sub.gif) right no-repeat;
}
lr>w { width:auto; } /* others */
lr w.submenu {
background: url(images/sub.gif) right no-repeat;
}
b {
padding:2px;
text-decoration:none;
color:gray;
font-weight:bold;
width:100%; /* IE */
}
li>b { width:auto; } /* others */
li b.submenu {
background: url(images/sub.gif) right no-repeat;
}
ld b.submenu {
background: url(images/sub.gif) right no-repeat;
}
lr b.submenu {
background: url(images/sub.gif) right no-repeat;
}
/* regular hovers */
w:hover {
border-color:gray;
background-color:#bbb7c7;
color:black;
}
li.folder a:hover {
background-color:#bbb7c7;
}
lr.folder a:hover {
background-color:#bbb7c7;
}
/* hovers with specificity */
li.folder:hover { z-index:10; }
ul ul, li:hover ul ul {
display:none;
}
li:hover ul, li:hover li:hover ul {
display:block;
}
lr.folder:hover { z-index:10; }
ul ul, lr:hover ul ul {
display:none;
}
lr:hover ul, lr:hover lr:hover ul {
display:block;
}
/************* Download MouseOver ***************/
.downloadover{
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(downloadicover.jpg);
background-repeat: no-repeat;
display: block;
width: 19px;
height: 20px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.downloadover a {
display:block;
font-size: 11px;
width: 19px;
height: 20px;
display: block;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}
.downloadover img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.downloadover a:hover img{visibility:hidden}
.downloadover span {
position:absolute;
left:5px;
top:3px;
margin:0;
cursor: pointer;
}
/************* Listen MouseOver ***************/
.listenover{
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(listenicover.jpg);
background-repeat: no-repeat;
display: block;
width: 19px;
height: 20px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.listenover a {
display:block;
font-size: 11px;
width: 19px;
height: 20px;
display: block;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}
.listenover img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.listenover a:hover img{visibility:hidden}
.listenover span {
position:absolute;
left:5px;
top:3px;
margin:0;
cursor: pointer;
}
/************* Text Entte ***************/
entete {
float:right;
position:relative;
z-index:10;
padding: 5 10 5 10;
}
/************* Page de Mp3s ***************/
.style1 {
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
.style2 {
color: #FFFFFF;
font-weight: bold;
}
.style3 {color: #006699}
.style4 {font-size: 9px}
.style5 {
font-family: "Courier New", Courier, mono;
font-size: 10px;
}
.style6 {color: #6B6E73}
.style7 {color: #273234}
.style8 {font-size: 12px}
.style9 {
font-size: 16px
font-weight: bold;
font-family: "Square721 BT";
}
.style10 {
font-size: 9px;
font-weight: bold;
color: #999999;
font-family: "Square721 BT";
}
.style11 {
font-size: 11px;
font-weight: bold;
font-family: "Square721 BT";
}
.style12 {
font-family: "Square721 BT";
font-size: 11px;
font-weight: bold;
}
.style13 {
font-size: 9px;
font-weight: bold;
color: #999999;
font-style: italic;
font-family: "Square721 BT";
}
.style14 {
font-size: 9px;
font-weight: bold;
color: #FDCB2E;
font-family: "Square721 BT";
}
.style15 {
font-size: 9px;
font-weight: bold;
color: #FDCB2E;
font-style: italic;
font-family: "Square721 BT";
}
.style26 {color: #999999}
.style27 {font-family: Arial, Helvetica, sans-serif}
.style28 {color: #929292}
.Style29 {color: #FF0000}
.Style34 {color: #0033FF}
.Style40 {color: #33CCCC}
.Style41 {color: #CCCCCC}
.Style43 {color: #6699CC}
.style44 {
font-size: 9px;
font-weight: bold;
color: #999999;
font-family: "Square721 BT";
}
.style45 {font-size: 9px}
.style46 {
font-size: 16px
font-weight: bold;
font-style: italic;
font-family: "Square721 BT";
}
.style47 {
font-size: 11px;
font-weight: bold;
font-style: italic;
font-family: "Square721 BT";
}
.Style48 {
color: #00FF33
}
.Style50 {
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
.Style51 {
color: #FF0000
}
.Style53 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
.Style54 {color: #4A8ACC}
.Style58 {
color: #FFFFFF;
font-size: 9px;
}
.Style59 {
color: #273234;
font-size: 7px;
}
/************* Enlever Bleu Et Souligner des liens ***************/
a:link, a:visited {
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
font-weight: bold;
}
.Tableau {
background-color:#273234;
border-top-width:1pt;
border-right-width:1pt;
border-bottom-width:1pt;
border-left-width:1pt;
border-top-color:#666666;
border-right-color:#666666;
border-bottom-color:#666666;
border-left-color:#666666;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
margin:0;
margin-bottom:5pt;
font-family:Arial,sans-serif;
font-size:10pt;
font-color:#FFFFFF;
}
.Forms {
font-family:Arial;
font-size:10pt;
color:#FFFFFF;
border-width:1pt;
}
.Button {
font-family:Arial;
font-size:10pt;
color:#000000;
border-width:1pt;
}
j'ai monté mon site avec du CSS et sous FF sa fonctionne 100% mais quand j'Arrive sous IE c'est affreux!!! le problème c'est que j'ai AUCUNE IDÉE des normes de codes CSS que IE accepte... si quelqu'un veut bien m'aider, voici mon code actuel... et oui il y en a long!!
/***********************************************/
/* HTML tag styles */
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
w:link, w:visited, w:hover {
text-decoration: none;
}
w:hover {
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial,sans-serif;
margin: 0px;
padding: 0px;
}
h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
}
h2{
font-size: 114%;
color: #006699;
}
h3{
font-size: 100%;
color: #334d55;
}
h4{
font-size: 100%;
font-weight: normal;
color: #333333;
}
h5{
font-size: 100%;
color: #334d55;
}
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
ul ul ul{
list-style-type: none;
}
label{
font: bold 100% Arial,sans-serif;
color: #334d55;
}
/***********************************************/
/* Layout Divs */
/***********************************************/
#masthead{
margin: 0;
padding: 10px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
background-color: #273234;
position: relative;
z-index: 10;
}
#content{
position: absolute;
z-index: 3;
width: 558px;
padding-left: 90px;
}
/************* #leftcontainer styles ***************/
#leftcontainer {
float:left;
top:-4;
height:auto;
width:auto;
position: relative;
background-color: #273234;
z-index: 8;
}
/************* #rightcontainer styles ***************/
#rightcontainer {
float:right;
top: 10;
right: 22;
height:auto;
width:auto;
position: fixed;
z-index: 999;
}
/************* #rightcontainer styles ***************/
#BPM {
float:right;
height:auto;
width:auto;
position: relative;
z-index: 1;
top: 8;
}
#demo {
color:#000033;
background-color:#cccccc;
layer-background-color:#cccccc;
position:absolute;
z-index:99;
visibility:hidden;
}
#bouttons {
float:right;
height:auto;
width:117;
position: relative;
z-index:100;
top: 5;
}
/************* #siteInfo styles ***************/
#siteInfo{
float:left;
left:-1px;
right:-1px;
position:absolute;
z-index: 8;
background-color: #273234;
font-weight:bold;
border: 1px solid #9d9da1;
font-size: 75%;
padding: 15px 40px 10px 25px;
}
#siteInfo img{
vertical-align: middle;
}
body,td,th {
color: #FFFFFF;
}
body {
background-color: #273234;
}
/************* #siteInfo styles ***************/
#djs{
float:left;
left:-0.2;
position:absolute;
z-index: 8;
background-color: #273234;
font-weight:bold;
border: 1px solid #9d9da1;
font-size: 75%;
padding: 0 36px 0 0;
}
/************* titre alignement ***************/
aligner {
float:left;
position:absolute;
z-index:1;
vertical-align:bottom;
}
/************* Menu styles ***************/
body {
behavior:url("");
}
* {
font-family:arial,tahoma,verdana,helvetica;
font-size:12px;
}
/* the menu */
ul,li,ld,w,b,lc,le,lr {
display:block;
margin:0;
padding:0;
border:0;
}
ul {
width:150px;
border:1px solid #9d9da1;
background:#273234;
list-style:none;
}
li {
position:relative;
padding:1px;
padding-left:26px;
background: url(images/item_moz.gif) no-repeat;
z-index:9;
}
li.folder { background: url(images/item_folder.gif) no-repeat; }
li.folder ul {
position:absolute;
left:120px; /* IE */
top:5px;
}
li.folder>ul { left:140px; } /* others */
ld {
position:relative;
padding:1px;
padding-left:26px;
background: url(images/item_mp3.gif) no-repeat;
z-index:9;
}
ld.folder { background: url(images/item_folder.gif) no-repeat; }
ld.folder ul {
position:absolute;
left:120px; /* IE */
top:5px;
}
ld.folder>ul { left:140px; } /* others */
lr {
position:relative;
padding:1px;
padding-left:26px;
background: url(images/item_bigjo.gif) no-repeat;
z-index:9;
}
lr.folder { background: url(images/item_bigjo.gif) no-repeat; }
lr.folder ul {
position:absolute;
left:120px; /* IE */
top:5px;
}
lr.folder>ul { left:140px; } /* others */
le {
position:relative;
padding:1px;
padding-left:26px;
background: url(images/item_blank.gif) 0 100% repeat-y;
z-index:9;
}
w {
padding:2px;
border:1px solid #273234;
text-decoration:none;
color:gray;
font-weight:bold;
width:100%; /* IE */
}
li>w { width:auto; } /* others */
li w.submenu {
background: url(images/sub.gif) right no-repeat;
}
lr>w { width:auto; } /* others */
lr w.submenu {
background: url(images/sub.gif) right no-repeat;
}
b {
padding:2px;
text-decoration:none;
color:gray;
font-weight:bold;
width:100%; /* IE */
}
li>b { width:auto; } /* others */
li b.submenu {
background: url(images/sub.gif) right no-repeat;
}
ld b.submenu {
background: url(images/sub.gif) right no-repeat;
}
lr b.submenu {
background: url(images/sub.gif) right no-repeat;
}
/* regular hovers */
w:hover {
border-color:gray;
background-color:#bbb7c7;
color:black;
}
li.folder a:hover {
background-color:#bbb7c7;
}
lr.folder a:hover {
background-color:#bbb7c7;
}
/* hovers with specificity */
li.folder:hover { z-index:10; }
ul ul, li:hover ul ul {
display:none;
}
li:hover ul, li:hover li:hover ul {
display:block;
}
lr.folder:hover { z-index:10; }
ul ul, lr:hover ul ul {
display:none;
}
lr:hover ul, lr:hover lr:hover ul {
display:block;
}
/************* Download MouseOver ***************/
.downloadover{
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(downloadicover.jpg);
background-repeat: no-repeat;
display: block;
width: 19px;
height: 20px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.downloadover a {
display:block;
font-size: 11px;
width: 19px;
height: 20px;
display: block;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}
.downloadover img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.downloadover a:hover img{visibility:hidden}
.downloadover span {
position:absolute;
left:5px;
top:3px;
margin:0;
cursor: pointer;
}
/************* Listen MouseOver ***************/
.listenover{
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(listenicover.jpg);
background-repeat: no-repeat;
display: block;
width: 19px;
height: 20px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.listenover a {
display:block;
font-size: 11px;
width: 19px;
height: 20px;
display: block;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}
.listenover img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.listenover a:hover img{visibility:hidden}
.listenover span {
position:absolute;
left:5px;
top:3px;
margin:0;
cursor: pointer;
}
/************* Text Entte ***************/
entete {
float:right;
position:relative;
z-index:10;
padding: 5 10 5 10;
}
/************* Page de Mp3s ***************/
.style1 {
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
.style2 {
color: #FFFFFF;
font-weight: bold;
}
.style3 {color: #006699}
.style4 {font-size: 9px}
.style5 {
font-family: "Courier New", Courier, mono;
font-size: 10px;
}
.style6 {color: #6B6E73}
.style7 {color: #273234}
.style8 {font-size: 12px}
.style9 {
font-size: 16px
font-weight: bold;
font-family: "Square721 BT";
}
.style10 {
font-size: 9px;
font-weight: bold;
color: #999999;
font-family: "Square721 BT";
}
.style11 {
font-size: 11px;
font-weight: bold;
font-family: "Square721 BT";
}
.style12 {
font-family: "Square721 BT";
font-size: 11px;
font-weight: bold;
}
.style13 {
font-size: 9px;
font-weight: bold;
color: #999999;
font-style: italic;
font-family: "Square721 BT";
}
.style14 {
font-size: 9px;
font-weight: bold;
color: #FDCB2E;
font-family: "Square721 BT";
}
.style15 {
font-size: 9px;
font-weight: bold;
color: #FDCB2E;
font-style: italic;
font-family: "Square721 BT";
}
.style26 {color: #999999}
.style27 {font-family: Arial, Helvetica, sans-serif}
.style28 {color: #929292}
.Style29 {color: #FF0000}
.Style34 {color: #0033FF}
.Style40 {color: #33CCCC}
.Style41 {color: #CCCCCC}
.Style43 {color: #6699CC}
.style44 {
font-size: 9px;
font-weight: bold;
color: #999999;
font-family: "Square721 BT";
}
.style45 {font-size: 9px}
.style46 {
font-size: 16px
font-weight: bold;
font-style: italic;
font-family: "Square721 BT";
}
.style47 {
font-size: 11px;
font-weight: bold;
font-style: italic;
font-family: "Square721 BT";
}
.Style48 {
color: #00FF33
}
.Style50 {
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
.Style51 {
color: #FF0000
}
.Style53 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
.Style54 {color: #4A8ACC}
.Style58 {
color: #FFFFFF;
font-size: 9px;
}
.Style59 {
color: #273234;
font-size: 7px;
}
/************* Enlever Bleu Et Souligner des liens ***************/
a:link, a:visited {
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
font-weight: bold;
}
.Tableau {
background-color:#273234;
border-top-width:1pt;
border-right-width:1pt;
border-bottom-width:1pt;
border-left-width:1pt;
border-top-color:#666666;
border-right-color:#666666;
border-bottom-color:#666666;
border-left-color:#666666;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
margin:0;
margin-bottom:5pt;
font-family:Arial,sans-serif;
font-size:10pt;
font-color:#FFFFFF;
}
.Forms {
font-family:Arial;
font-size:10pt;
color:#FFFFFF;
border-width:1pt;
}
.Button {
font-family:Arial;
font-size:10pt;
color:#000000;
border-width:1pt;
}
19 avril 2006 à 07:28
et statistiquement c'est qd même ie le + utilisé et de loin, donc il y a problème quand même pour trouver une bonne solution, là je coince encore
@mitiés
b g
19 avril 2006 à 21:27
Avec quoi as-tu pondu ce code HTML ? (je fais référence à ta page www.unesourisetmoi ...)
Le standard a bon dos : c'est un bien beau b... là dedans !
Pas étonnant que ca s'affiche mal (même sous IE !) LOL
Il faut revoir ton code de A à Z ! Et peut-être aussi retoucher quelque peu les scripts
Utilise au moins un tableau pour placer/aligner tes éléments : les purites diront que ce n'est pas fait pour mais au moins ca t'évitera pas mal de soucis.
Essai de regrouper tout ton code Javascript à un seul endroit (voir de le mettre dans un fichier .js externe ca fera plus propre)
Utilise une feuilles de style CSS externe elle-aussi
je peux te donner plus de détails si tu le souhaites
20 avril 2006 à 13:02
plus de détails ce serait bienvenu !
attention je ne suis que 'débutant' il faut que je comprenne !
le script pour les images je l'ai trouvé sur le web
je l'ai mis dans dreaweaver et j'ai ajouté le reste (titre et bas de page) mais je me doute que cela ne doit pas être très correct
seulement ... comment faire
& ce n'est pas le seul problème découvert avec l'install de firefox
merci de ton aide à l'avance
@+
bg
21 avril 2006 à 11:44
D'abord tu oublies pour un temps DreamWeaver (ce soft est très bien qd on connait déjà HTML) et utilise le BlocNote au départ pour apprendre : ca va te forcer à tapez le code HTML (c'est ce que je fais tout le tps)
Ensuite commence par construire une page statique sans aucun code JavaScript : tu pourrras en ajouter autant que tu veux lorsque ta page s'affichera correctement.
La structure d'une page HTML :
souris.htm :
La même page mais en utilisant une feuille de styles intégrées :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>- Des créations en tous genres pour mon plaisir et le votre... </title> <style type="text/css"> <!-- body { background-color : #000000; color : #FFFFFF; } *.titre { color : #FFFFFF; font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10pt; text-align : center; } // --> </style> </head> <body> <p class="titre">© unesourisetmoi (site officiel) - Tirages personnalisés - Fonds d'écran - gratuits - Créations de sites <br /> - Téléchargements - Photos - Référencement de sites - Expositions et commande de Posters - (Bonus et plus !). </p> </body> </html>Rem : tu noteras que chaque style porte un nom ex "body" ou encore "*.titre" : il s'agit d'un sélecteur. Il indique sur quels types d'éléments HTML s'applique le style.
Ensuite dans la partie qui se trouve entres accolades on définit des propriétés ou formats CSS
Si tu utilises un nom de sélecteur correspondant à une balise HTML ex body, alors le format s'applique directement à la balise de même nom.
Pour spécifier un sélecteur spécifique il faut utiliser l'attribut class dans la balise : ainsi dans la balise <p> ... </p> qui délimite un paragraphe j'ai ajouté <p class="titre"> pour que le paragraphe utilise le sélecteur nommé *.titre : l'étoile signifie que le sélecteur peut s'appliquer à n'importe quel élément HTML
A retenir : en HTML les balises sont imbriquées les unes dans les autres et les éléments récupèrent souvent les propriétés CSS définies dans leurs éléments parents : c'est pourquoi ici il n'est pas nécessaire de préciser "background-color : #000000;" dans le sélecteur *.titre.
En effet le paragraphe hérite du fond noir du fait que la balise <p> est imbriquée dans la balise <body> (En fait pratiquement toutes les balises sont imbriquées dans la balise <body>)
C'est très condensé : les formats offres des possibilités très très vastes...
Pour tout savoir sur les formats :
http://fr.selfhtml.org/css/formats/global.htm
La même page mais avec une feuille de style CSS externe :
le fichier souris.htm :
Rem : note comment on indique la feuille de style externe "souris.css" à utiliser grâce à la balise <link>
la feuille de style séparée (qu'il faut mettre en ligne sur ton site)
fichier souris.css :
body { background-color : #000000; color : #FFFFFF; } *.titre { color : #FFFFFF; font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10pt; text-align : center; }Ok ?
A suivre ...
22 avril 2006 à 17:43
je suis malheureusment sur la route mais dès mon retour je mets le nez dedans !!!
si toutes les explications étaient aussi détaillées que la votre je crois que là on pourrait avancer sérieusement
pour cette réponse je pense que cela concerne la page d'accueil, je vais donc me servir de ce shéma pour la revoir
mon gros soucis aussi est le fonctionnement du menu qui va parfaitement sous ie mais déconne à fond sous ff ....
là cela me gène beaucoup
si vous pouvez y jeter un oeil ? au besoin je puis vous envoyer les srcipts ou les fichiers en zip ?
on m'a parlé d'un problème possible venant des caractères utilisés ! dois-je changer au départ la police ?
@ suivre donc ...
b g