Safari n'aime pas mes largeurs de boites

Tout d'abord bonjour et félicitation pour ce site qui est vraie une mine d'or pour l'apprenti que je suis.

ça fais plusieurs jours que je cherche une solution pour un petit mais néanmoins très génant problème de placement de boite. Je viens de rendre ma copie pour le site web d'un ami graphiste, le site valide correctement, tout les navigateurs testés (ie6-7, firefox) me le rendent bien .. SAUF safari et je suis un peu désemparé.

l'adresse du site : http://www.bvallotton.ch/

mon soucis sur safari : la rubrique "+++" (page bonus.html) se cache sous la rubrique "work".. et on ne la voit pas..

mes 2 questions:
y a t il une erreur de logique dans mon petit code que safari comprends pas ?
y a t-il un outil de developpement sur safari pour le debug de ce genre de problème (je bosse sur pc essentiellement donc je maitrise pas trop safari ^^) ?

Merci de m'avoir lu jusque là, je vous salue bien humblement..

beso a écrit :
y a t il une erreur de logique dans mon petit code que safari comprends pas ?

Pas d'erreur de syntaxe si j'en crois le validateur HTML du W3C, mais une erreur de conception : tu utilises des liens vides de tout contenu. Ce qui fait que :
- si on désactive la feuille de style, plus de menu ;
- si on désactive les images, plus de menu ;
- si on désactive les couleurs de fond (ce qui désactive les images de fond par la même occasion), plus de menu ;
- pour les utilisateurs de navigateurs non graphique ou de lecteur d'écrans, pas de menu ;
- si les images ont du mal à se charger (serveur lent), pas de menu ;
- pour les moteurs de recherche, pas de menu.

J'oublie peut-être une partie de la liste...

Concrètement : toute image qui transmet une information (par exemple si elle porte un texte ou un pictogramme significatif) doit être une image HTML avec texte alternatif. Le texte alternatif, de préférence pertinent, se renseigne via l'attribut alt.

[b]Pas bien :[/b]
<a href="/work.html" title="work" ></a>

[b]Mieux :[/b]
<a href="/work.html"><img src="work.jpg" alt="work" /></a>

Commence déjà par ça, et vois ensuite ce que ça donne dans Safari et les autres.

ok, merci d'avoir pointer ce problème relatif aux images..et surtout ton explication qui est super claire !

par contre le code que tu proposes, je le réserve en dernier lieu car mon défi c'était justement d'utiliser cette technique particulière d'image pour le menu (que je trouve super propre) et dont on trouve une explication ici : http://pompage.net/pompe/sprites/.

donc pour pallier au manque de texte en dur, j'ai rajouté un menu qui a du texte mais que je cache avec display:none ... à la guerre comme à la guerre.

mon problème reste entier avec safari.
Modifié par beso (06 Mar 2007 - 00:46)

Applique un float:left également à ton item #bonus et un clear:left à l'item suivant, ça devrait fonctionner
Modifié par MrPatate (06 Mar 2007 - 10:31)

beso a écrit :
mon défi c'était justement d'utiliser cette technique particulière d'image pour le menu (que je trouve super propre)

La « propreté » est un critère très subjectif, qu'il est bon de relativiser de temps en temps (« Je fais telle bêtise de conception parce que je trouve ça plus propre » est un classique sur ce forum ).

beso a écrit :
donc pour pallier au manque de texte en dur, j'ai rajouté un menu qui a du texte mais que je cache avec display:none

Mettre un contenu texte améliore un peu les choses. Le cacher avec display: none, par contre, est une très mauvaise idée :
http://blog.alsacreations.com/2006/01/29/220-remplacement-dimages-halte-au-display-none

Je t'invite également à lire cet article :
http://www.blog-and-blues.org/weblog/2004/08/19/277-mettre-un-titre-en-image

Dans tous les cas : n'ayant pas de contrainte technique particulière forçant l'utilisation de background, autant utiliser la solution la plus accessible, c'est à dire l'utilisation de bêtes images de contenu (qui, je sais, ne sont ni « propres », ni « glamour » ) avec texte alternatif.

Pour le problème avec Safari : s'agit-il de Safari 1.2, 1.3 ou de Safari 2 ?
Pour information, on retrouve le même problème sous Opera 9, mais pas sous Konqueror 3.5.

Il s'agit peut-être d'un comportement normal des flottants : seul le texte et les images de contenu (et autres éléments en-ligne) sont repoussés par les flottants. li#bonus s'affiche donc peut-être tout à gauche, en dessous des flottants, vu qu'il n'a pas de contenu.

Le mettre en flottant que le suggère MrPatate est une solution. Lui appliquer un overflow: auto pour créer un contexte de formatage est également une possibilité, je pense.
Modifié par Florent V. (06 Mar 2007 - 11:56)

Oui on le constate avec Safari 2 en fait. Sans nouveau contexte de formatage, c'est le contenu du bloc qui est repoussé et non le bloc lui-même. Comme ici le bloc est vide et a une largeur fixe il reste le plus à gauche possible, caché en dessous.

Par contre ça soulève des questions sur le comportement de Firefox. Je viens de tester vite fait, Firefox respecte bien ce comportement avec des <div> mais pas avec des <li> comme ici, et je ne vois pas très bien pourquoi

cela veut-il dire que pour Firefox un display:list-item induit un nouveau contexte de formatage ?

merci Florent et Mr patate !

j'ai appliqué le float: left et le clear:left à l'élément suivant, c'est exactement ça qui me manquait..

mais après avoir lu les articles conseillé, je suis maintenant convaincu que cette solution n'a rien de "propre" c'est même plutôt le contraire..
je vais retrousser mes manches et repartir sur un bon vieux menu..