Bonjour,
je tourne en rond avec le doctype.
Si je mets <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
Mon menu déroulant CSS ne fonctionne pas avec Safari, mais fonctionne partout ailleurs Firefox mac, PC IE6 IE7).
Par contre, si je mets <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> il fonctionne avec safari, mais plus sous IE PC...
J'ai essayé plusieurs Doctype pris sur le net... rien n'y fait... c'est l'un ou l'autre.
Firefox fonctionne bien avec les deux.
Y-a-t-il une solution ????
(Au cas, la page est sur http://www.dwa.fr/aif/ )
Merci d'avance pour vos avis.
Denis
ch'tit exemple ( collection de diverses sources dont je n'ai pas noté l'origine...
navré pour l'auteur originel... s'il y en a un,
parce que ce n'est jamais que du CSS )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<style type="text/css">
ul.menu { list-style-type: none;
margin : 0;
padding: 0; }
ul.menu li { float: left;
margin: 0;
border: 0; }
ul.menu ul { position: absolute;
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: solid 1px black; }
ul.menu ul li { float: none;
padding: 0; }
ul.menu li a:link, ul.menu li a:visited
{ display: block;
color: #800000;
background: #FFFFAA;
margin: 0;
padding: 4px 4px;
text-decoration: none; }
ul.menu li a:hover
{ background: #AAAAFF; }
ul.menu li:hover > ul
{ display: block; }
</style>
</head>
<li>[# Un]
<li>[# Niveau 1.1]</li>
<li>[# Niveau 1.2]</li>
</li>
<li>[# Deux]
<li>[# Niveau 2.1]</li>
<li>[# Niveau 2.2]</li>
<li>[# Niveau 2.3]</li>
</li>
</html>
!!!! à adapter à ce que tu veux !!!!
fonctionne avec IE (7), Opera, FireFox, K-Meleon, Safari...
"mon" menu qu'il est à moi, ceux que je connais... fonctionnent
avec tous (?) les navigateurs quel que soit ( ou presque ! )
le Doctype ( je dis ça... jamais très bien compris à quoi ça servait ! )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
...
sur ta page, Safari n'aime pas le survol d'une case...
je ne sais pas si tu as, comme moi, entendu le "bruit" que ça fait...
Le pb avec
Pour le menu déroulant, c'est à partir de liste imbriqué et ça fonctionne bien ailleurs... la question est est-ce que ma CSS a des lacunes et les autres navigateurs interprètent quand même bien, ou est-ce que c'est Safari qui débloque ???
En tout cas je vais essayer ton second doc.
Merci
>>est-ce que ma CSS a des lacunes et les autres
navigateurs interprètent quand même bien,
>>ou est-ce que c'est Safari
qui débloque
je dirais... ni l'un ni l'autre
l'interprétation des navigateurs diffère !
pas seulement Safari par rapport aux autres, tous par rapport à chacun ( ou presque )
ce que je peux te dire, qui est sûr, c'est que ton CSS ne plait pas à Safari.
>>vais essayer ton second doc.
pas une question de doctype, enfin à mon humble avis
mais plutôt de codage de CSS.
puisque mon menu, et d'autres, fonctionnent eux .
<hr /> Cordialement Bul [mon Site] [M'écrire]
#porteur #lemenu ul li ul{
position:absolute;
width:10em;
left:-40px;
margin-top: 4px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
line-height: 0.8em;
}
#porteur #lemenu ul li ul li{
width:107px;
background-color: #F81815;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #4B4949;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 5px;
}
#porteur #lemenu ul li ul li a {
color: #FFFFFF;
line-height: 0.9em;
font-weight: normal;
}
#porteur #lemenu a {
color: #FFFFFF;
}
#porteur #lemenu ul li ul li a:hover {
}
#porteur #lemenu li{
float:left;
position:relative;
list-style-type:none;
margin-right: 15px;
}
#porteur #lemenu ul li ul li a:hover{
color: #FFFFFF;
}
#porteur #lemenu ul li ul li:hover{
background-color: #4B4949;
}
body #porteur #lemenu ul li ul {
display:none;
}
#porteur #lemenu ul li:hover ul{
display:block;
}
#porteur #lemenu ul li:hover{
display:block;
background-color: #F81815;
}
#porteur #lemenu ul li ul:hover{
display:block;
}
* html #porteur #lemenu ul li ul{
border-top:1px solid #00FFFF;
border-left:0px;
}
tu devrais, me semble-t-il, simplifier un peu...
div imbriquées + ul + li et css lié...
pas évident ( pour les neuneus comme moi ) si on ne l'a pas bati....
ce qui est clair, c'est que safari, avec ce css :
"boucle do infernale" au survol.
<hr /> Cordialement Bul [mon Site] [M'écrire]
>> pas évident de lacher les vieilles habitude (utilisation de tableau)
ce que je ne fais pas du tout.... c'est tellement pratique !
>>et de se mettre aux "règles de l'art".
pas d'art ici. une "simplicité" introduite grâce au css.
<hr /> Cordialement Bul [mon Site] [M'écrire]