[Résolu] Affichage Safari et IE : overflow: auto

Bonjour,


J'ai testé mon site sur Safari (Mac) et réussi à régler la plupart des problèmes sauf ce dernier, je vous en montre la capture d'écran :



Le problème se situe entre le menu et le contenu.
Je n'arrive pas à mettre mon trait blanc pour bien les séparer.
J'ai tout essayé, même avec un hr, mais rien à faire.

D'ailleurs si quelqu'un pouvait me dire si le rendu est correct sur Opéra et Firefox cela serait très gentil.

Merci pour votre aide,
Modifié par jpsartre (29 Oct 2006 - 22:11)

bonjour,

IE6 pc , la barre blanche est comme attendue.

Opera 8.54 , quelque pixel apparaissent

firefoxe , elle n'apparait pas .

En forçant "le layout" avec un display:table; en plus sur #header , l'affichage se fait a nouveau proprement et l'image "flottante est englobée.

code testé en ligne avec
/* Edited with EditCSS */
/**** LINK-tag style sheet screen.css ****/

/* header */
#header {
border-top: solid #fff 7px;
display:table;
}

Le display:table est-il efficace sur Safari ? (pour englober le flottant).

++

Bonjour,

Merci pour ta réponse.
J'ai essayé et malheureusement ce n'est pas bon sur safari :


Je vérifie avec cet outil :
Voir son site sur Safari

Si tu as encore une idée, je suis preneur.

Merci

Merci,

J'ai pu obtenir un affichage correct sur safari :



grâce à ton idée du :

display: table;

Auquel j'ai ajouté :

width: 100%;

Suite à la lecture d'un article de Laurent Denis


Si quelqu'un peut me confirmer à nouveau pour Opéra et Firefox,

merci d'avance

Eh non, tout va donc bien sur mac mais voilà ce que ça donne sur IE 6 et 7 :



Si quelqu'un voit une solution,

Merci

A savoir que l'affichage redevient correct quand je survole un lien.

Alors là c'est surréaliste...

Si quelqu'un peut m'aider et surtout m'expliquer ce phénomène surnaturel

Merci

bonsoir,


heu , il n'y a plus le lien vers ta page ...

l'autre solution courament utilisé aujourd'hui pour englobé les flottants est le overflow:hidden ou auto.

Un sujet vient de passer sur ce "probleme" ...
http://forum.alsacreations.com/topic-4-19020-1-Englober-des-flottants-quelle-mthode.html
comme tu peut le constater , plusieurs solutions sont envisageables.

l'info sur le width:100%; se trouver aussi dans le code a tester que je laisse sur ce topic , mais pas de retour d'utilisateur du forum.

<hs>Ce forum a bien souvent l'air d'un libre service plutot qu'un lieu d'echange , surement "l'époque" qui veut ça .</hs>


++


ce phenomene au survol active le layout , autant dans opera que sur Ie , dans le code a tester je propose aussi le display:inline-block; qui peut peut-etre resoudre ce probleme dans IE.

le lien vers la page , pour obtenir de l'aide sera tres utile , avant que je finisse par dire de "grosse aneries" .
Modifié par gcyrillus (29 Oct 2006 - 22:14)

Désolé :

Le site

La CSS

effectivement , un display:inline-block sur le menu , convient (un zoom:1; devrait aussi convenir ou bien indiqué une largeur , en fait toute regle css qui devrait "activé" le layout sur le menu.

Laurent denis a aussi je crois quelque sujet a ce propos , si quelqu'un en passant pouvait donné les liens .

++

Merci beaucoup pour les informations, je ne connaissais ni le table, ni le overflow

C'est bien rendu sur IE 6 et 7 et Safari.

J'ai fait :

#header {
border-top: solid #fff 7px;
overflow: auto;
}

Si tu pouvais me confirmer pour Opéra et Firefox, si tu as sous la main.

Encore un grand merci pour ton aide,
Modifié par jpsartre (29 Oct 2006 - 22:32)

C'est okay ,
tu peut en generale usé de l'overflow sans peur .
sauf si tu precise une hauteur au prealable ... auquel cas c'est le "hidden" qu'il faut peut-etre eviter , le "auto" donnera la barre de defilment si besoin .

++

Merci,
Maintenant qu'il passe sur la plupart des navigateurs, je vais le mettre en conformité avec les bonnes pratiques des uns et des autres.
C'est que j'essaye de voir avec ce site si l'accessibilité est accessible au commun des mortels - aidés par les forums .

Merci encore et à bientôt,