28221 sujets

CSS et mise en forme, CSS3

Bonjour bonjour,

Je me retrouve avec le joli bug d'IE qui rajoute 3 pixels autour des float. J'aimerais donc savoir comment modifier mon code pour avoir le même affichage.
Pour indication, j'ai trouvé cet article de Positioniseverything mais impossible de le mettre correctement en application Smiley decu
IE Three Pixel Gap

Et voici la page qui en fait les frais.

Veuillez agréer pouet pouet Smiley lol
rik24d a écrit :

Euh, tu n'as pas regardé ma page ?
Mon float n'a pas de margin.

Effectivement je n'ai pas regardé ta page Smiley confused
Donc j'y jette un oeil...
Avant tout, il faut supprimer ceci de ta page :

<meta http-equiv="refresh" content="30; url=biper.php" />

C'est très désagréable !
Et contre les règles d'accessibilité. Smiley nono
Directives pour l'accessibilité aux contenus Web (version 1.0) a écrit :

7.4 Jusqu'à ce que les agents-utilisateurs permettent de stoper les mises à jour, éviter de créer des pages se mettant à jour automatiquement. [Priorité 2]
Par exemple, en HTML n'utilisez pas "http-EQUIV=refresh" pour mettre à jour vos pages, jusqu'à ce que les agents-utilisateurs permettent de désactiver cette fonction.

http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-no-periodic-refresh

Pour le 3px, tu peux essayer d'étendre ton <div id="menu"> en hauteur.
Perso, j'essais d'éviter cette situation Smiley lol
Modifié le 15 Jan 2005 - 20:15
Pour le refresh toutes les 30 secondes, je l'ai enlevé, ça ira mieux.
Que veux-tu dire par étendre le menu en hauteur ?
Et enfin, comment éviter cette situation ?
Le 3px bug se termine à la base du float, donc si tu étires ce float en hauteur, le bug passera inaperçu.
Mais pour cela, tu dois connaître la hauteur du contenu adjacent.

upload/196-jog.gif

Je te prépare un exemple...
Modifié le 15 Jan 2005 - 20:35
Alors, d'une je ne connais pas la hauteur du contenu adjacent.
De deux, il y a quand même un problème puisque les 3 pixels font un décalage de l'image de fond des parties online et offline. Ce qui est loin d'être beau.

Je te soupçonne de ne pas avoir regardé la page sous IE Smiley biggrin

Pour le refresh, je sais bien qu'il ne faut pas imposer cela aux visiteurs. Mais dans l'utilisation qu'on en fait, les visiteurs savent que la page va s'actualiser.
rik24d a écrit :

Je te soupçonne de ne pas avoir regardé la page sous IE Smiley biggrin

Smiley fache

Voici une de mes pages qui présente ce bug.
http://www2.csduroy.qc.ca/mdc/discography.html

En éditant les sources, tu verras que j'ai ajouté une hauteur de 26em à mon float (première liste seulement).
Ce 26em est trouvé par essais-erreurs. Il fonctionne à différentes tailles de texte.

À toi de tirer tes propres conclusions.
Modifié le 15 Jan 2005 - 20:45
Bien sûr, je comprends comment "supprimer" l'effet gênant qui décale le texte après la fin du float.

Mais là, il me faut supprimer les 3 pixels qu'on peut voir entre l'image et les titres. J'ai joint un aperçu :
upload/157-bug.png
J'ai bien vu. J'ai téléchargé tes fichiers, j'essais de mettre la solution de "positioniseverything" en pratique...

<edit>
Apparemment ça ne fonctionne pas dans ton cas.
Dans ce cas particulier, faudrait peut-être jeter un oeil sur le positionnement absolu.
</edit> Smiley ohwell
Modifié le 15 Jan 2005 - 21:31
J'y ai pensé aussi. Mais, comment positionner le petit cadre xiti ? Car je ne connais pas la longueur de la page.
rik24d a écrit :

J'y ai pensé aussi. Mais, comment positionner le petit cadre xiti ? Car je ne connais pas la longueur de la page.

À mon avis quand il restera juste le petit cadre xiti à positionner, ce sera du gâteau ! Smiley cligne
µJE dois pas être finot finot mais je vois pas comment faire. Si je positionne le bloc #menu et #contenu en absolu, comment puis-je savoir où placer le bloc .xiti ?
Ce sont mes débuts en positionnement et j'avoue que j'ai un peu de mal.