Mon header Change de couleur sous Safari

Bonjour,

Je vous explique le petit problème auquel je suis confronté actuellement.

Site ou y'a le problème: http://tsunammis.com (Sur toute les pages)

Problème:
Comme vous pouvez voir sur firefox et IE le header et le background de mon site s'accorde bien, cependant sur Safari, mon header ne possede plus la même couleur que le background de mon body.

Je ne sais pas comment résoudre ce problème qui est vraiment pas banal et dont je n'arrive pas du tout à trouver sa provenance.

Problème détecté sur safari 3.0.4, pouvez tester sur la version 2 de safari ?

(J'ai aussi un problème avec ma sidebar qui s'en vas partout sur IE, mais c'est un autre problème que j'essayerais de résoudre tout seul, mais je ne suis pas contre une réponse)

Merci à l'avance,
Stan.

Edit: Bizar y'a pas de mode de prévisualisation ...
Modifié par tsunammis (31 Jan 2008 - 15:11)

Bonjour,

Ah oui tiens, pas de mode de prévisualisation pour un nouveau sujet. Il y en a par contre bien un pour la création d'un nouveau message.

Pour les problèmes rencontrés:
1. Les différences de colorimétrie viennent souvent d'images PNG enregistrées avec correction gamma (il faut alors virer la correction gamma), mais je ne vois pas d'images PNG dans cette interface en dehors de quelques boutons et du pied de page.
2. J'ai testé avec Safari 3b sous Windows, et rien à signaler (pas de différence de couleurs observée).
3. Je ne sais pas exactement d'où viennent les problèmes dans IE, mais l'utilisation du positionnement relatif pour placer le nom du site et le bloc de recherche me semble un peu risqué. On gagnera à utiliser le positionnement absolu, dans ce cas précis.
4. Pour le problème avec les colonnes, c'est à priori un problème de Doubled Margin Bug qui touche div#sidebar2. Rajouter un display: inline au bloc concerné est le correctif classique pour ce bug.

Merci pour ta réponse, j'apporte les miennes maintenant.

1. Concernant la différence de colorimétrie, le bug n'est pas présent sur Safari 3 version Windows, cependant il est bien présent pour les macusers utilisant safari, je viens de faire un screen ->

Sous Safari (Sur mac) -> http://tsunammis.com/images/safaribug.png
Sous Firefox (Sur mac) -> http://tsunammis.com/images/firefox.png

Alors que sur les autres navigateurs, le bug n'apparait pas. Je n'ai pas trouvé de réponse actuellement à ce problème, dommage.

2. Concernant les problème d'affichage sous IE, je ne vois pas la technique sur tu souhaites utiliser, en effet si je bascule mes div (headerimg ainsi que le div de recherche) de position : relatif vers position : absolute;
Alors dans ces cas les images n'apparaissent plus vraiment à la bonne place.

Pourrait-tu me guider sur ce point ?

3. Je ne vois le résultat de mon blog seulement sur firefox (Mac et Windows), Safari (Mac et Windows) et IE7, mais pas I6, je crois de mémoire que le bloc de la sidebar 2 (C'est à dire la sidebar du milieu) est décalé en bas de la page.

Pourrait-tu aussi m'aiguiller sur le fait de rajouter display: inline, je connais cette class, mais je ne vois pas ou la rajouter et surtout à quel div (Pourquoi basculer le div en inline au lieu de le laisser en bloc)

tsunammis a écrit :
en effet si je bascule mes div (headerimg ainsi que le div de recherche) de position : relatif vers position : absolute;
Alors dans ces cas les images n'apparaissent plus vraiment à la bonne place.

Ben je n'ai pas dit non plus que c'était une solution presse-bouton et qu'il suffisait de remplacer "relative" par "absolute", hein! Positionnement relatif et absolu ne fonctionnent pas du tout de la même manière.

Il me semble juste qu'ici tu gagnerais à utiliser le positionnement absolu... ce qui implique de repenser le positionnement de ces deux éléments, et de bien connaitre le fonctionnement du positionnement absolu (notamment le positionnement par rapport au plus proche ancêtre positionné). Si ça n'est pas maitrisé, il ne me reste plus qu'à te renvoyer à tes classes.
http://openweb.eu.org/articles/initiation_absolue/

tsunammis a écrit :
Pourrait-tu aussi m'aiguiller sur le fait de rajouter display: inline, je connais cette class

Ce n'est pas une classe, c'est une déclaration CSS (constituée de deux éléments: la propriété CSS et sa valeur).

tsunammis a écrit :
Pourquoi basculer le div en inline au lieu de le laisser en bloc

Parce que c'est ainsi qu'on corrige le Doubled Margin Bug d'IE6. Et il faut appliquer le display: inline à l'élément flottant dont la marge est doublée.
http://www.positioniseverything.net/explorer/doubled-margin.html

Bonjour,

Merci, J'ai réussi à régler les problèmes de placement du champ de recherche ainsi que du logo grace à la position absolute.

J'ai ressorti mon livre CSS2, un peut plus user-friendly que le site Openweb.eu.org ... Je n'ai rien contre ce dernier, juste question de gout.

Pour le display: inline; Merci cela marche bien j'ai réussi à régler le problème, à l'aide de ton aide bien sur.

Je fais un petit récapitulatif des problèmes qui me reste :

- [Edit Résolu] Couleur du header toujours diffèrent sur Safari 3 sur mac, toujours pas de solution trouvé actuellement J'ai ré-enregistré pour une enieme fois cette fois avec un autre logiciel, et c'est redevenu normal sur mac

- Concernant champ rechercher sur IE 6 et 7, on ne peux pas cliquer dessus pour insérer notre recherche, il faut se positionner un peu en dessous ... Ce problème n'est que pour IE6 et IE7, une solution ?

- Quand l'on clic sur le champ rechercher sur safari 3, un contour bleu tout moche apparait, y'a t-il une technique pour desactiver cela ?

Merci à l'avance le sujet avant je suis content.
Cordialement,
Stan.
Modifié par tsunammis (01 Feb 2008 - 11:32)

tsunammis a écrit :
- Quand l'on clic sur le champ rechercher sur safari 3, un contour bleu tout moche apparait, y'a t-il une technique pour desactiver cela ?

Tu veux dire désactiver le contour bleuté qui dans les interfaces de Mac OS X signifie «ceci est un champ texte qui a la focus»? Pourquoi diable voudrait-on priver l'utilisateur de cette information familière et immédiatement reconnaissable pour lui?

Edit: ah tiens, je n'avais pas vu que tu avais triché avec le styles de tes contrôles de formulaire et que ton champ de recherche était, visuellement, une image de fond sur le div contenant le formulaire. Hmm... pas sûr que tu puisse y faire grand chose si ça ne passe pas dans tel ou tel navigateur. Ce genre de bidouille n'est en général pas très fiable. Un peu de lecture pour compléter:
Comment ne pas styler les éléments de formulaire ?
Modifié par Florent V. (01 Feb 2008 - 13:10)

tsunammis a écrit :
- Concernant champ rechercher sur IE 6 et 7, on ne peux pas cliquer dessus pour insérer notre recherche, il faut se positionner un peu en dessous ...

Cent balles qu'en fait on clique bien dans le champ de recherche, mais que ce dernier est tout simplement positionné plus bas que souhaité (donc en décalage par rapport à ton image de fond).

Florent V. a écrit :

Cent balles qu'en fait on clique bien dans le champ de recherche, mais que ce dernier est tout simplement positionné plus bas que souhaité (donc en décalage par rapport à ton image de fond).

Hum ... en faite le champ de recherche est bien positionné, cependant il n'est pas accesible quand l'on clic dessus, il faut cliquer un peu plus bas, ce qui n'est pas vraiment logique ...

"Comment ne pas styler les éléments de formulaire ? "

J'hésite à retourner vers un champ de recherche plus "simpliste" et mon "design" ... j'aurais surment moins de bug !

tsunammis a écrit :

"Comment ne pas styler les éléments de formulaire ? "

J'hésite à retourner vers un champ de recherche plus "simpliste" et mon "design" ... j'aurais surment moins de bug !

Si j'osais, je dirai que s'il s'agit de faire un champ texte au texte illisble étant donné le choix de couleurs, on pourrait en effet ne pas hésiter

Mais bon, ce n'est qu'une taquinerie

"Laurent Denis" a écrit :
Si j'osais, je dirai que s'il s'agit de faire un champ texte au texte illisble étant donné le choix de couleurs, on pourrait en effet ne pas hésiter ravi

Mais bon, ce n'est qu'une taquinerie cligne

Oui c'est vraiment que graphiquement ce n'était pas très beau, c'est changé ... fini les taquinerie ! Hihi

Juste le bouton Ok pour envoyer, qui est vraiment ... immonde !

Une Petite idée peut-être pour ne pas rester avec quelque chose de trop "moche" ?!

Bon alors:

1. Mettre un titre «Recherche sur le blog» (que l'on pourra afficher avec un texte pas trop volumineux, en .85em par exemple, si c'est trop envahissant) au dessus du champ de recherche.
2. Ou bien, placer le même texte en attribut title du champ input.
3. Pour le bouton de validation, soit on reste sur la solution actuelle (qui me semble pas mal bien que peut-être pas assez explicite et n'incitant pas au clic...), soit on remet l'image utilisée initialement, qui était pas mal.

Florent V. a écrit :
Bon alors:

1. Mettre un titre «Recherche sur le blog» (que l'on pourra afficher avec un texte pas trop volumineux, en .85em par exemple, si c'est trop envahissant) au dessus du champ de recherche.
2. Ou bien, placer le même texte en attribut title du champ input.
3. Pour le bouton de validation, soit on reste sur la solution actuelle (qui me semble pas mal bien que peut-être pas assez explicite et n'incitant pas au clic...), soit on remet l'image utilisée initialement, qui était pas mal.

J'ai suivi tes conseils, j'ai remis l'image, cependant elle n'est pas centré par rapport au field rechercher, je n'ai pas trouvé une meilleur solution que de jouer avec un position: relative; + top: 4px; pour le centrer, cependant sur IE ça ne fonctionne pas vraiment ...

Une idée ?