1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

Doctype et safari [Résolu]

Signaler
Messages postés
618
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
27 août 2010
 -
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 -
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

Tout vient à qui sait attendre

11 réponses

Réponse 1 / 11
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 34
on trouve ça partout....

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

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Réponse 2 / 11
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 34
Bonjour,

    "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...

    ça vient du css qui ne plait pas à safari.

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Réponse 3 / 11
Messages postés
618
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
27 août 2010
 2
Salut, et merci pour ta réponse.

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

Tout vient à qui sait attendre
Réponse 4 / 11
Messages postés
618
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
27 août 2010
 2
Sinon, j'ai essayé de voir le document lié à l'adresse de ton troisième doctype et je suis tombé sur une erreur 404

Après coup, l'adresse serait : http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

Tout vient à qui sait attendre
Réponse 5 / 11
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 34
>>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]
Réponse 6 / 11
Messages postés
618
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
27 août 2010
 2
Ce sont aussi des menus à partir de listes imbriquées ???

Tout vient à qui sait attendre
Réponse 7 / 11
Messages postés
618
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
27 août 2010
 2
À tout hasard, voici la css pour le menu :

#porteur #lemenu {
    position: relative;
    width: 520px;
    margin-left: 110px;
    margin-top: 1px;
    overflow: visible;
    background-color: #F81815;
    height: 20px;
    z-index: 10;
}
#porteur #lemenu ul li {
    float: left;
    list-style-type: none;
    font-size: 0.8em;
    margin-right: 18px;
    height: 20px;
}
#porteur #lemenu ul {
    margin-left: -18px;
    padding-bottom: 5px;
    height: 20px;
    margin-top: -5px;
}

#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;
}

Tout vient à qui sait attendre
Réponse 8 / 11
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 34
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]
Réponse 9 / 11
Messages postés
618
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
27 août 2010
 2
Si tu as plus simple, je suis preneur... au moins une indication.
En tout cas, merci pour tes conseils et ton attention.

Tout vient à qui sait attendre
Réponse 10 / 11
Messages postés
618
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
27 août 2010
 2
Cool
Merci, c'est pas évident de lacher les vieilles habitude (utilisation de tableau) et de se mettre aux "règles de l'art".

Mille merci

Tout vient à qui sait attendre
Réponse 11 / 11
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 34
>> 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]
Répondre Posez votre question