Des bordures qui disparaissent sous IE

Bonjour,

Je rencontre un problème avec des bordures (faites en css) sur des <div>.
Le problème est nettement visible sous IE6 et un peu moins sur IE7 (mais bien concret).
Je ne peux pas vous donner d'URL, le projet n'est pas en ligne.

J'ai testé sur plusieurs machines, même conclusion.

Si je ne suis pas assez complet, n'hésitez pas...

Merci.

Salut !
Tu as essayé en mettant border:none ?

Tu veux dire que tu as des bordures qui s'affichent autour de tes div dans internet explorer ?
Et toi tu ne veux pas de bordures ?

Désolé, je n'ai pas été assez clair...

En fait, je souhaite mettre des bordures... elles apparaissent mais partiellement. Et pire encore, le scroll les fait réapparaitre et disparaitre aléatoirement (rafraichissement aléatoire de l'écran).

border: solid 1px #e0e0e0;

Voici un screenshot du rendu : Une partie de la bordure disparait... mais pourquoi ??

Je pense avoir compris ton problème.
Alors résumons :
Exemple : tu as une bloc qui fait 200px de largeur et 50px de hauteur.
Tu lui appliques une bordure : border {1 px solid #000;}

bloc 01 {
width:200px;
height:50px
border:1px solid #000;
}

Merci de te pencher sur mon sujet.

C'est presque ça.
j'ai fait un screenshot du rendu, ce que tu vois n'est qu'une partie. Le bloc ne fait pas forcément 200x50. Mais effectivement ça pourrait être une définition de mon block.

Pour info, j'utilise beaucoup de float, de clear: [both | left | right] et de margin: auto

Merci encore

Je pense avoir compris ton problème.

Alors résumons :
Exemple : tu as un bloc auquel tu appliques une bordure :

bloc 01 {
width:200px;
height:50px
border:1px solid #000;
}

Dans IE tu ne vois pas bien la bordure parce que celle ci n'est pas comprise dans le bloc.

C'est dur à expliquer mais l'idée est la suivante pour que dans IE la bordure s'affiche correctement il faut inclure la bordure dans la largeur et la hauteur de ton bloc. Si tu ne fais pas ça, IE rajoute la bordure à la taille de ton bloc c'est pour ça que tu ne la voies pas entièrement. Ton bloc dans IE ne fait plus 200 px de largeur mais 202 pixels (bordure left et right)

Ce qu'il faut corriger :
La largeur ne sera plus de 200px mais de 198px (200px -2px (bordure gauche 1px + bordure droite 1px))
et la hauteur sera donc de 48 (50-2px (bordure top 1px + bordure bottom 1px))

Généralement pour que ça soit plus clair dans ma feuille CSS :
Je l'écris comme ça :
bloc 01 {
width:198px; /*200*/
height:48px; /*50*/
border:1px solid #000;
}

Je mets toujours les anciennes valeurs en commentaires pour me souvenir par la suite quand le projet devient complexe de la valeur initiale de mon bloc.

Voila

Bon courage

Oui effectivement, ça serait une piste si IE était en mode Quirks (cas d'un mauvais DOCTYPE).
Mais ce n'est pas mon cas. mes blocks utilisent bien les bonnes DTD distribués par le W3.
Mes rendus sous IE et FF sont identiques.
Mon problème est vraiment un phénomène particulier. Je t'invite à regarder de près le screenshot. Tu y verras sur la gauche une bordure verticale d'1 px #e0e0e0 puis elle disparait et réapparait...
Cela se produit sur le scroll. On dirait qu'IE rafraichit mal cette bordure.

Une bordure qui disparait est souvent le symptome d'un bug de rendu IE. Pour le résoudre, il suffit souvent d'appliquer un

height: 100%

à cet élément.

@Antoine Cailliau
Ceci ne fonctionne pas. Je l'avais déjà essayé, et retenté à ta demande... hélas. Mais ceci dit, je suis convaincu que ceci est dû à IE (version 6 et 7).

Pour comprendre mieux le phénomène, j'y ai appliqué aussi un background flashy (ex background: red).
Et ô stupéfaction: le background est effacé en parti, exactement comme la bordure.

Le background met en évidence que ceci est dû au floatting des blocks. Le fait de sortir des éléments du flux met la pagaille dans le rafraichissement de l'écran.

Une solution ??
Modifié par fabscanta (04 Apr 2008 - 14:57)

Une page en ligne ?

Je viens de mettre en ligne une page test ici

Merci pour la rapidité.

fabscanta a écrit :
Oui effectivement, ça serait une piste si IE était en mode Quirks (cas d'un mauvais DOCTYPE).
Mais ce n'est pas mon cas. mes blocks utilisent bien les bonnes DTD distribués par le W3.
Mes rendus sous IE et FF sont identiques.
Mon problème est vraiment un phénomène particulier. Je t'invite à regarder de près le screenshot. Tu y verras sur la gauche une bordure verticale d'1 px #e0e0e0 puis elle disparait et réapparait...
Cela se produit sur le scroll. On dirait qu'IE rafraichit mal cette bordure.

Quel est le doctype que tu utilises ?
Dans tous les cas je ferais un test.

@ Ingrid04

J'ai mis un exemple en ligne (post précédent). Tu pourras y trouver toutes le infos de la page.

ici, j'utilise le DOCTYPE le plus "bateau" : xhtml1.0 transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Je viens d'essayer avec le XHTML1.0 strict et le HTML4.01 et j'ai toujours ce bug

Merci quand même.
Modifié par fabscanta (04 Apr 2008 - 15:39)

Salut,

Je ne parviens pas à isoler le bug et à trouver ce qui cause le problème. A l'instar de la disparition des background dans les listes, j'essayerais en ajoutant un position: relative; mais sans grande conviction.

Non ce doctype me parait bien.
J'utilise celui-ci.

Mais essaies ce que je t'ai dis pour les bordures. lol
J'insiste ...
Moi j'utilise le même doctype que toi et je rencontre toujours ce problème. Il faut le faire à chaque blocs.

Ingrid,

Je viens d'essayer ta solution... Hélas, ceci ne fonctionne pas...

Merci quand même pour tes conseils.

Et si tu ajoutes des bordures sur tous tes éléments, le problème persiste-t'il ?

Oui,

j'ai rajouté à la fin de ma feuille de style :

div { boder: solid 1px red }

(pour overrider toutes mes précédentes définitions)
et là où les bordures disparaissaient, elles disparaissent encore...

Salut,

Tu devrais faire un tour par le validateur pour ton code html, je pense qu'une fois les 72 erreurs corrigées tu devrais y voir plus clair