28234 sujets

CSS et mise en forme, CSS3

[RÉSOLU] IE6 : problème d'image dans un boîte (...)

Bonjour à toutes, bonjour à tous,
Au départ j'étais assez confiant, en me disant qu'avec un code simple j'arriverais à afficher ce que je veux dans le browser maudit (un ami est en thérapie depuis 9 mois après avoir "gouté" IE6) mais,
non : j'ai des boites dans une colonne qui doivent recevoir 3 images :
1 pour le haut,
1, répétée pour le centre,
et 1 pour le bas.
En html ça donne ça:

<div class="boxout">
<div class="boxmid">
<div class="boxin">
<p class="label">Test Boîte</p>
<p>bla bla</p>
</div>
</div>
</div>

Tandis que la CSS contient :

.boxin {background: url(../design_accueil/rightbox-top.png) no-repeat top;padding:1px 16px 0px;_padding-top:32px;_margin_top:32px;height:100%;}
.boxmid {background: url(../design_accueil/rightbox-mid.png) repeat-y top;height:100%;padding-bottom: 16px;}
.boxout {background: url(../design_accueil/rightbox-bot.png) no-repeat bottom;margin-bottom:16px;padding-bottom: 16px;height:100%;}

Tout devrait correctement s'afficher.
Hélas, alors que tout passe ailleurs, mes "box" fiche le boxon dans IE6, qui refuse d'afficher l'image du bas de la boîte .boxout.

Comme je préférerais éviter le sort de mon ami, Smiley biggol j'appelle à l'aide :
évitez-moi l'internement, SVP.

NB : voui, il y a un hack IE dans le code plus haut, mais pour le moment je suis en Quick and Dirty.
Modifié par Sventovit (15 Feb 2008 - 08:33)
bien sûr ! tu as raison !
Comme c'est une page temporaire, je mets un tiret devant :
-http://www.hiseo.fr/pages.htm

Bon il y a encore des bugs sous IE6 que je corrige tant que je peux, mais celui-là c'est un sacré gros caillou dans ma chaussure.
trois images qui sont en fait des bandes noires sur fond noir en plus ??? je vois pas l'intérêt en fait...
Administrateur
Bonjour,

si tu enlèves height: 100% , il se passe quoi?

verdan a écrit :
trois images qui sont en fait des bandes noires sur fond noir en plus ??? je vois pas l'intérêt en fait...

Reviens nous voir quand tu auras augmenté la luminosité de ton écran, merci.
Felipe a écrit :
Bonjour,
si tu enlèves height: 100% , il se passe quoi?

Hello Felipe...voici le dernier code (tout hacké, je le mettrais en conditionnel plus tard Smiley cligne )
CSS:
.boxmid {background: url(../design_accueil/rightbox-top.png) no-repeat top;_height:1%;}
.boxout {background: url(../design_accueil/rightbox-mid.png) repeat-y;margin-bottom:16px;.height:1%;}
.boxin p {padding-bottom:10px;_padding-bottom:25px;}
#col_right h2 {color: #ccc;font: 700 2em "Arial Narrow", ArialVerdana, sans-serif;text-align: center;}

le HTML :

<div class="boxout">
<div class="boxmid">
<div class="boxin">
<h2>HELLO</h2>
<p>bla bla..</p>
</div>
</div>
</div>

Tout est différent... correct avec Ie7 (avec le hack plus haut .height:1% sur la Div boxmid), FF et Opera, mais,
IE6 me fait un truc curieux avec ses hacks.
Je progresse... vers l'asile ?
ben je dois avoir un foutu écran alors... car quel que soit la luminosité ou le contraste j'ai ça :
http://img181.imageshack.us/img181/7382/z497bt5.jpg

évidemment vous allez peut-être le voir autrement, mais moi je vois une bande toute noire...

j'ai déjà constaté que mes couleurs étaient plutôt plus soutenues par rapport à d'autres écrans mais à ce point ?!
Bon, je vous laisse : les infirmiers m'attendent.
Si quelqu'un passe par là et qu'il a IE6 sur sa machine pourrait-il me dire s'il voit comme moi mes boîtes tête-bêche ? Smiley bawling
Ah ! Merci beaucoup boulaneige...
j'étais en train de me demander si mon IE6 n'était pas complètement passé à l'Ouest.
Mais non : tu vois la même chose que moi.
En fait, ce qu'il faudrait c'est que chacun envoie une facture à Microsoft pour les heures perdues à arranger nos CSS pour IE6.
On fait une association, on comptabilise nos heures, et on envoie la douloureuse au siège de ces incapables. À 150 € de l'heure (HT)(je prends 15%, comme Trésorier, au titre des frais de gestion) ça pourrait leur coûter cher. Smiley lol

Demain je refais mes boi-boîtes de A à Z.
Bonne soirée à vous.
Modifié par Sventovit (14 Feb 2008 - 19:44)
Administrateur
Sur fond blanc et individuellement, #313137 passe assez inaperçu à côté du noir Smiley jap
Mais si on regarde la page entière, on voit qu'il y a du gris foncé et du noir.


Si tu enlèves les marges sur le p (#col_right div.boxin p --> margin: 0;) puis sur h2, est-ce que la boîte la plus haute (avec bla bla) s'arrange?
Sinon tu peux regarder du côté des boîtes extensibles en hauteur avec 2 images seulement (celle avec la bordure haute ou bien basse est une image trèèèèèès haute où la bande verticale se répète, il ne s'affiche que la hauteur nécessaire). Voir le vieux tuto: http://www.alsacreations.com/articles/cadre/

EDIT: pour ne pas surfacturer MS, Smiley rolleyes je te conseille de modifier lors du débogage les 3 instructions concernant les images de boxmid/in/out et de rajouter 3 couleurs bien pétantes entre bakground: et url(...) (genre pink, blue et red). Ca aide bien à voir quel div n'est pas là où on s'y attend dans IE6.
Modifié par Felipe (14 Feb 2008 - 21:23)
Hello Felipe,
Hello lecteurs.
Felipe a écrit :
Sur fond blanc et individuellement, #313137 passe assez inaperçu à côté du noir Smiley jap
Mais si on regarde la page entière, on voit qu'il y a du gris foncé et du noir.

Pas sûr de t'avoir compris. Smiley confus
Felipe a écrit :
Si tu enlèves les marges sur le p (#col_right div.boxin p --> margin: 0;) puis sur h2, est-ce que la boîte la plus haute (avec bla bla) s'arrange?
(...)

Je t'assure que j'ai tout fait.
Felipe a écrit :

EDIT: pour ne pas surfacturer MS, (...)

Si : la raison en est simple. La gestion désastreuse de la transparence sur les PNG (avec IE6) m'a conduit à introduire un BUG dans mon code en appliquant un Fix qui avait manifestement créé un effet pervers dans le traitement des PNG.
C'est cet IE PNG Fix trouvé dans cette FAQ.
Ce matin, comme sur certaines images, l'application du Fix n'était pas probante, j'en ai passé certaines en GIF.
C'est alors que le soupcon s'est éveillé dans les brumes matinales de mon cerveau : j'ai passé les images des box en Gif et là,
Supercalifragilisticexpealidocious !, tout s'affichait normalement.
4 heures X 150 € = 600 €.
Valeur en votre réglement Microsoft.
Merci à toi pour le support (et la sympathie).
Passe une bonne journée.
Sujet clos
Aller à