Incompatibilité ie/ff

bonjour,

entrons directement dans le vif du sujet, il s'agit du premier cadre jaune "post-it" like qui est en réalité 4 divs imbriquées et qui qd je lui ajoute des attributs de padding/margin ne rend plus de la même façon sur internet explorer 6.

le code est le suivant:

<div class="cadre_postit">
<div class="tr">
<div class="tl">
<div class="br">
<div class="bl">
Lorem ipsum...
</div>
</div>
</div>
</div>
</div>

avec le css suivant(les 2 lignes posant problème sont annontées):

.cadre_postit {
	margin-bottom:15px; /*problème qd je rajoute ce margin*/
}
.cadre_postit .tr {
	background:url(../images/cadre_tr.png) no-repeat top right;
}
.cadre_postit .tl {
	background:url(../images/cadre_tl.png) no-repeat top left;
}
.cadre_postit .br {
	background:url(../images/cadre_br.png) no-repeat bottom right;
}
.cadre_postit .bl {
	background:url(../images/cadre_bl.png) no-repeat bottom left;
	padding:10px; /*problème*/
}

Je n'arrive pas à comprendre pourquoi ie effectue ce rendu là, mais alors vraiment pas, je ne vois aucune logique là dedans

Merci de m'éclairer si vous avez déjà été confronté à ce problème

antoine
Modifié par wouf (01 Mar 2007 - 18:34)

c'est comme si l'arrière plans des divs se répétaient sur l'espace vertical correspondant au margin+padding alors que ceux-ci sont définis en no-repeat...

non vraiment je comprend pas
Modifié par wouf (01 Mar 2007 - 19:04)

Salut,

aurais-tu un exemple en ligne, ou à défaut une capture d'écran du problème, pour qu'on puisse visualiser ce qui se passe ?

oui, bien sûr, le lien était un peu trop caché, le revoici:
http://to:2901@www.profil-acheteur.com/index.php?option=com_frontpage&Itemid=35

si demande d'identification, taper: to en login / 2901 en mot de passe

en images:
sous ie(c'est là qu'est le pb):
http://82.229.245.231/bug_pa.png

tandis que sous ff:
http://82.229.245.231/bug_pa2.png

voilou et merci

to
Modifié par wouf (01 Mar 2007 - 22:00)

Mea culpa, j'avais zappé le lien dans ton premier post

Je ne peux pas identifier la cause de ton problème directement, mais quelque chose me tracasse : à quoi te servent tous ces div imbriqués ?

Tu pourrais obtenir exactement le même rendu en n'utilisant que les styles CSS, sans images de fond

Par exemple :

<div id="post-it">
   oops, j'ai comme qui dirait effacé par mégarde le texte que vous aviez tapé... 

Vous ne pouvez ou ne souhaitez tout simplement pas effectuer le fastidieux travail de recherche... </div>

div.post-it {
    background: #ffffd9;
    border: 1px solid #eee;
    border-bottom: 1px solid #ccc;
    padding: 10px;
}

Il y a quelque chose qui t'en empêche ?

arf,

c'est vrai que c'est subtil, mais c'est n'est pas n'importe quel post-it
Il y a un léger dégradé dans le bas et des tous petits arrondis sur les bords gauche, et droit et une presque ombre portée qu'on ne distingue qu'à peine.

Bon étant donné que mon design est de largeur fixe, j'aurais bien pu me contenter d'une porte coulissante verticale, mais bon je comprend pas pourquoi internet explorer me donne ce résultat et ca ménerve

voilà, mais bon vous tracassez pas non plus, je vais simplifier et pis c'est tout, ca va pas non plus m'empêcher de dormir

to
Modifié par wouf (01 Mar 2007 - 23:02)

Mouarf

On peut dire que c'est subtil, effectivement

Les coins arrondis sont tout simplement invisibles sur mon écran.

Chez moi aussi les effets que tu décris sont totalement invisibles. Ca serait donc beaucoup plus simple de n'avoir qu'un seul <div> avec un bord, et ton dégradé en repeat-x en bas.

Ce qui diminuerait les chances de différences entre navigateurs.