[réglé] mac os et les standards?

[NicoMSEvent]

je viens de tester mon (futur) jeu sur mac OS, safari et firefox. Dans firefox, je vois que les barres défilement des DIV masqués apparaissent quand même. Il y a quelque chose pour rémédier à ça?

Plus grave, sous Safari, les div masqués n'apparaissent même pas. Je suppose que ça vient du référencement des objets en javascrip. Une idée du nom "générique" des objets?

ce code marche pour IE et FireFox pour windows et netscape[/quote]

function visi(nr){
if (document.layers)document.layers[nr].visibility = 'show';
else if (document.all)document.all[nr].style.visibility = 'visible';
else if (document.getElementById)document.getElementById(nr).style.visibility = 'visible';
}
function hide(nr){
if (document.layers)document.layers[nr].visibility = 'hide';
else if (document.all)document.all[nr].style.visibility = 'hidden';
else if (document.getElementById)document.getElementById(nr).style.visibility = 'hidden';
}

[naholyr]

Il vaut mieux travailler avec display (none, block) plutot qu'avec visibility, justement pour ce genre de surprise.

[Sephi-Chan]

Safari est parait-il très respectueux des standards, exemplaire même. Je ne peux le vérifier puisque je ne m'en sers pas (malgré que mon ordinateur est un Mac).

Je me permet toutefois de poster quelques liens sur le sujet :

• Safari montre qu’IE est complaisant avec les sites mal codés
  
• David Hyatt fait passer le test Acid2 à Safari
  
• WHATWG : Mozilla, Opera et Safari unis pour préserver le web
  
• Safari est moins permissif que Firefox sur le Javascript
  

Au passage, tester sur Firefox, Netscape et IE n'est pas très utile puisqu'ils utilisent tous deux le moteur Gecko ou Trident (Netscape utilise Trident en version 8). Parmi les moteurs de rendu, on peut également distinguer Trident, le moteur de rendu d'IE (Tasman pour IE Mac), ainsi que Presto qu'utilise Opera et KHTML qu'utilise Safari.

À voir : Wikipédia - Moteur de rendu HTML

Je me permet également de citer le comportement standard de la propriété Visibility (décrite sur Mediabox) :

Visibility permet de cacher ou non certains éléments.

Attention, malgré la propriété définie à ‘hidden’ l’espace représentant l’élément est conservé, sans l’élément, mais reste vide.

Il faut donc faire attention à cette propriété. Il est parfois plus judicieux d'utiliser Display.


Sephi-Chan

[NicoMSEvent]

tres instructif, ça commence a être du vol de haute altitude, merci pour tous ces liens, et ces précisions. En effet, safari est moins permissif (ce qui malheureusmeent est handicapant pour les sites mal codés... didju, ça veut que mon site... ??? )
je vais rajouter une ligne avec display... ça fera certainement double emploi, mais au moins, je serai certain du rendu.

Edit : j'ai modifié les visibility en display block/none, ça a corrigé le problème pour les barres persistantes dans fire fox, mais ça na rien changé pour safari.

[Sephi-Chan]

Pour les barres de défilement, on utilise la propriété Overflow, qui hélas a des comportements assez différents d'un navigateur à l'autre.

À voir : Exemple de code détaillé de la propriété css overflow


Sephi-Chan

[NicoMSEvent]

j'avais compris ça, mais malheureusement, lorsque j'utilisais "visibility" pour masquer mon div avec un overflow, la barre de défilement de ce DIV restait visible. Mais le "bug" (je suis quasi persuadé que ça en est un) disparait si je masque ce DIV avec la propriété "display".

L'autre probleme que j'ai (en fait, je me suis planté, ce ne sont pas des DIV que je manipule, mais des DFN... en fait, ça n'a pas bcp de différences, a part sémantiquement):
Le CSS :

Code :

dfn{
        z-index:10;
        display:block;
        position:absolute;
/*      visibility:hidden;*/
        display:none;
        width:215px;
        height:113px;
        background:url(./images/infobulle.gif) no-repeat;
}

Le HTML

Code :

...
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function visi(nr){
    if (document.layers){
        document.layers[nr].display = 'block';
    }
    else if (document.all){
alert(document.all[nr]);
        document.all[nr].style.display = 'block';
    }
    else if (document.getElementById){
        document.getElementById(nr).style.display = 'block';
    }
}
function hide(nr){
    if (document.layers){
        document.layers[nr].display = 'none';
    }
    else if (document.all){
        document.all[nr].style.display = 'none';
    }
    else if (document.getElementById){
        document.getElementById(nr).style.display = 'none';
    }
}
// -->
</SCRIPT>
</head>
<body>
...
<map name="testmap">
<AREA SHAPE="POLY" COORDS="314,  0,398,  0,442, 45,398, 88,314, 88,267, 43" href="game.php?action=default&case=03" onMouseOut="Javascript:hide('infobulle03');" onMouseOver="Javascript:visi('infobulle03');"><!-- D03 -->
</map>
...
<div id="div03" class="D1 terrain"><span class="terrain">Plaine</span></div>
<dfn id="infobulle03" class="infobulle" onMouseOut="Javascript:hide('infobulle03');" onMouseOver="Javascript:visi('infobulle03');"><span>Plaine<br/>
</span></dfn>
...

L'arborescence de mes éléments ( repris avec webdevelopper sous FF)
html > body > dfn #infobulle03 .infobulle

Chaque DIV à le même niveau que le DFN.

le "alert(document.all[nr]);" m'affiche dans safari : "undefined"
et "alert(nr);" m'affiche "infobulle03"

Je suppose que c'est un probleme d'accessibilité... mais comment résoudre ça?

[Sephi-Chan]

Pour les Overflow, j'avais lu qu'ajouter un padding de quelques pixels (5 par exemple) réglait le problème, mais je ne sais pas du tout ce qu'il en est.

Pour Javascript, l'accès via document.all est propriétaire IE et a été implémenté dans les navigateurs Mozilla. Voici un simple lien vers google qui t'en dira... plus que moi : Google - document.all


Je te conseille l'excellent Cours de manipulation du DOM et DHTML qui enseigne un Javascript propre et universel.


Sephi-Chan

[blackduty]

Pour info: Il existe depuis quelque mois maintenant, un Safari pour Windows

Pas mal pour voir ce que ça peut donner sur un mac quand on a un PC ^^ (désolé pour le semi HS)

[NicoMSEvent]

haaa.... bon ok, pourtant je teste quand meme la présence de cet objet avant de le manipuler. Enfin, passons, je viens de faire le test en mettant en commentaire (ça marche toujours aussi bien sou IE), et miracle ça marche sous safari!

Par contre, sous safari, j'ai le même comportement que sous Netscape (pas trop trop grave, mais pas joli), il ne prends pas l'overflow de cet élément css (ça déborde de l'image que je lui ai donné quand j'ai trop d'information dans l'infobulle) :

Code :

dfn span{
        position:absolute;
        display: block;
        width:200px;
        height:80px;
        overflow-y:auto;
        overflow-x:hidden;
}

Je saute d'un probleme a l'autre, d'un domaine a l'autre... du javascript au CSS

Mille merci pour l'aide jusqu'a présent. Je ne vous sollicite pas énormément, mais quand je le fais, ce n'est pas a moitié :p

(en attendant la réponse, je vais consulter le lien que tu m'a donné )

@blackduty: c'est pas une version béta? j'ai un collègue qui a essayé de l'installé dès qu'elle est sortie, ça lui a planté son PC

Edit : J'ai rajouté un "hack"
:;overflow:auto;
ça a corrig" le probleme. Autre petit soucis (mineur) : pas de musique sous safari. si je trouve pas, j'ouvriri un autre thread. Encore merci a tous