Margin-top sur un flottant dans IE Mac

Bonjour à tous,

Je travaille actuellement sur un petit site (maquette et intégration HTML/CSS) pour une initiative consumériste et citoyenne (héhé, c'est assez sympa à dire en fait, les mots sont jolis), mais j'ai un petit problème technique.

J'ai réalisé la mise en page suivante :
http://files.covertprestige.info/temp/resp/respectpublic.html
(XHTML 1.0 Strict, CSS)

À ma connaissance, pas de problème avec Firefox 1.5 et Internet Explorer 6, ni avec les versions récentes d'Opera. Il y a, il me semble, un petit problème de cohérence des couleurs pour le menu de navigation avec Safari (avec une vieille version : 1.3.2), et peut-être un problème plus sérieux avec Konqueror.

Mais le navigateur qui pose vraiment problème, c'est IE 5.3 pour Mac. Le menu flottant vient se coller tout en haut, malgré la présence d'un margin-top: 120px;, censé créer l'espace nécessaire pour caser le h1, qui est en positionnement absolu.

Une petite capture d'écran du problème (tronqué à droite, ça c'est normal) :
http://files.covertprestige.info/temp/resp/bug-iemac.jpg

Et dans la foulée, si quelqu'un a une info sur le problème avec Safari 1.3.2, ou aurait la possibilité de me dire s'il persite avec les versions suivantes, je suis preneur !
Cf la capture d'écran qui va bien (menu uniquement) :
http://files.covertprestige.info/temp/resp/bug-safari1.3.2.jpg

Merci d'avance à ceux qui pourront se pencher sur le problème, ou m'indiquer une source.

Après vérification, je confirme que le problème de la gestion des couleurs se pose également avec Safari 2. À vrai dire, il semblerait que toutes les images PNG soient trop foncées (c'est le cas aussi pour les images de fond du bloc de droite, par exemple).

Salut Florent,

Concernant le problème IE mac, j'aurais simplement tendance à l'éviter en remplaçant le float left par une position absolue, sauf si un autre bloc doit venir se placer en dessous.

Pour le problème avec PNG, on peut lire dans le texte « The Sad Story of PNG Gamma “Correction” » :

a écrit :
There is no way of making PNG images that match CSS colors in all PNG-supporting browsers. This reduces the usefulness of the otherwise excellent image format. If the image colors and the colors defined in a style sheet need to match, it is safer to use GIF or JPEG. If you want to use PNG and don’t care about older browser versions (pre-Tiger Safari in particular), the best course of action is removing all the color space information from the PNG files. If you only want a match with the background color, you could make the background a PNG image as well.

Merci pour l'info sur le PNG Alan. Le problème devrait être résolu à partir de Safari 2.0… je pensais avoir testé sur cette version, mais en y repensant je ne suis pas sûr que le deuxième ordinateur mac sur lequel j'avais effectué ce test avait la version 2.0, mais ça ne doit pas être le cas.

Dans tous les cas, vu qu'il s'agit d'un détail esthétique peu flagrant, je pense que je vais garder les choses en l'état.

Pour la compatibilité avec IE Mac, le positionnement en absolu est effectivement une possibilité. Je préférerais comprendre l'origine du problème, mais je retiens cette possibilité.

Merci bien

Cela doit venir du fait que l'élément qui précède est en position absolue. Apparement IEmac applique la marge du haut par rapport à cet élément, mais comme celui ci n'est plus le flux, c'est mal digéré (du moins dans le cas où l'élément avec la marge du haut est en float).

Si tu encadres ce <h1> d'un div non stylé, il est alors problable que la marge devienne effective.
Modifié par Alan (11 Jun 2006 - 10:42)

Alan a écrit :
Si tu encadres ce <h1> d'un div non stylé, il est alors problable que la marge devienne effective.

Je testerai ça demain (pas de mac sous la main…)