Bloc qui passe pas sous Safari

Bonjour,

J'ai un bloc qui ne passe pas sous Safari pour cette page de ce site:
http://www.mellowyellow.fr/site-corporate__20_magasins_ou-trouver-mellow-yellow-_158.html

Pourriez vous m'aidez en m'indiquant comment on débugge pour un navigateur spécifique ?

Merci par avance,

Cotp

Salut,

En testant vite fait, il semble que le problème provient de l'overflow:hidden; que tu as placé sur ta div #contentMagsommaire.

Si tu supprimes cette propriété et que tu augmentes la marge supérieure, tout devrait rentrer dans l'ordre.

Salut,

koala64 a écrit :
En testant vite fait, il semble que le problème provient de l'overflow:hidden; que tu as placé sur ta div #contentMagsommaire.

Si tu supprimes cette propriété et que tu augmentes la marge supérieure, tout devrait rentrer dans l'ordre.

En effet. Cela dit, il n'est pas nécessaire d'augmenter la marge supérieure : un simple clear: left fait aussi l'affaire (cela dit, l'application d'un float: left au div #entete est inutile).

Cotp a écrit :
Pourriez vous m'aidez en m'indiquant comment on débugge pour un navigateur spécifique ?

Sous Safari, tu as le menu Développement > Afficher l'inspecteur Web (raccourci clavier sous Mac : Commande + Option + I) ; sous Firefox, tu as l'extension Firebug ; sous Opera, tu as le menu Outils > Avancé > Opera DragonFly (raccourci clavier sous Mac : Commande + Option + I) ; sous IE 8, tu as un outil de développement fourni nativement accessible par le menu Outils (F12) ; sous IE 6 et 7, une extension téléchargeable sur le site de Microsoft. Bref, ce ne sont pas les outils de débogage qui manquent.
Modifié par Victor BRITO (12 May 2010 - 14:57)

Victor Brito a écrit :
En effet. Cela dit, il n'est pas nécessaire d'augmenter la marge supérieure : un simple clear: left fait aussi l'affaire (cela dit, l'application d'un float: left au div #entete est inutile).

Yep.

Et tiens ! Autre chose : D'une manière générale, avant de chercher à produire un code pour un navigateur particulier, il vaut mieux, en premier lieu, couper les propriétés qui sont appliquées à l'élément fautif puis identifier à quel moment ça part en vrille.

De là, ça permet parfois de contourner le problème en jouant avec d'autres propriétés css, mais surtout, ça permet de s'habituer aux spécificités de chaque navigateur et donc de mieux les prévenir.

Les commentaires conditionnels, media queries et autres hacks ne sont à envisager que dans le cas où le contournement est impossible.

Victor BRITO a écrit :
Salut,

En effet. Cela dit, il n'est pas nécessaire d'augmenter la marge supérieure : un simple clear: left fait aussi l'affaire (cela dit, l'application d'un float: left au div #entete est inutile).

Merci les amis pour tous vos commentaires qui m'ont bien aidé (désolé si je n'ai pas pu répondre plus tôt j'étais absent).

J'ai fais enlevé l'overflow hidden et ajouté un clear left et ça l'a fait

Savez vous s'il y a un endroit sur Alsacreation ou ailleurs où sont évoqués justement les spécificités de chacun de navigateurs ?

Encore merci à vous tous,

Cotp

Cotp a écrit :
Savez vous s'il y a un endroit sur Alsacreation ou ailleurs où sont évoqués justement les spécificités de chacun de navigateurs ?

* Les tableaux de support des standards par les navigateurs de Webdevout, incomplets (pour Safari, ils ne traitent que la version 2) ;
* les tableaux de compatibilité de Quirksmode, plus complets et tenant même compte des navigateurs mobiles.

Avec ces deux ressources, tu as de quoi t'amuser.
Modifié par Victor BRITO (21 May 2010 - 17:24)