[CSS] bug IE ?

bug IE ? [CSS] - HTML/CSS - Programmation

Marsh Posté le 22-09-2005 à 18:04:54    

Bonjour tout le monde,
 
Actuellement en train de faire un site qui s'adapte aux résolutions des visiteurs, j'ai voulu donner quelques effets au fond de la page en intégrant des images aux coins et en bordure (qui lui donnent de l'épaisseur) : http://perso.wanadoo.fr/kaleikonos [...] index.html
 
Mon problème est le suivant : les bords de page s'affichent correctement sous FF, mais n'apparaissent pas sous IE. [:abnocte invictus]
Ma question est donc la suivante (et je pense que ça doit venir de moi, même si je ne vois pas d'où) : est-ce dû à une erreur de ma part (et laquelle) ou à un bug d'IE (et dans ce cas, comment le contourner) ?
 
merci d'avance :)

Reply

Marsh Posté le 22-09-2005 à 18:04:54   

Reply

Marsh Posté le 22-09-2005 à 18:12:56    

Je viens de jeter un coup d'oeil, pour le comportement d'IE proprement dit, je connais pas la réponse (IE est vieux de 5 ans, c'est peut être ça la réponse :o). Mais ta manière de faire n'est pas la bonne, certes tu utilise XHTML et CSS, mais tu codes comme en HTML. C à-d en créant des éléments dans le code XHTML ne servant qu'a la décoration. En plus, tu les appelles .left ou .right, ce genre de près positionnement ne doit pas apparaître dans du code XHTML.

Reply

Marsh Posté le 22-09-2005 à 18:19:40    

kalex a écrit :

Je viens de jeter un coup d'oeil, pour le comportement d'IE proprement dit, je connais pas la réponse (IE est vieux de 5 ans, c'est peut être ça la réponse :o). Mais ta manière de faire n'est pas la bonne, certes tu utilise XHTML et CSS, mais tu codes comme en HTML. C à-d en créant des éléments dans le code XHTML ne servant qu'a la décoration. En plus, tu les appelles .left ou .right, ce genre de près positionnement ne doit pas apparaître dans du code XHTML.


 
Je m'en etais un peu rendu compte en fait, mais je n'ai pas trouve d'alternative.. :/

Reply

Marsh Posté le 22-09-2005 à 18:26:20    

Avec les CSS3, tu poura définir toutes les images de bordure directement dans le css sans bidouille ... vivement css3. ;) Mais c'est vrai qu'en css1 et 2 on peut jsute définir l'image de fond.

Reply

Marsh Posté le 22-09-2005 à 18:29:48    

omega2 a écrit :

Avec les CSS3, tu poura définir toutes les images de bordure directement dans le css sans bidouille ... vivement css3. ;) Mais c'est vrai qu'en css1 et 2 on peut jsute définir l'image de fond.


 
Si je me mets a genou et que je prie tres fort il va venir plus vite le CSS3 ?  :D  
 
...sinon pas de solution a mon problème ?  :(

Reply

Marsh Posté le 22-09-2005 à 18:32:49    

Je vérais bien un bug d'IE empéchant le chevochement d'images de fond avec des div imbriqué. (vivement IE7 qu'est sencé corriger tous les bugs de css) Donc a tester : le comportement d'IE en enlevant l'image de fond du div intérieur.
 
Personellement, ce probléme me dépasse mais je suis pas encore un pro du css.

Reply

Marsh Posté le 22-09-2005 à 18:33:39    

Mais plutôt que de faire quelque chose dans ce genre :
XHTML :

<div id="page">
<div class="left"></div>
<div class="right"></div>
</div>


CSS :

#page{...}
#page .left{...}
#page .right{...}


 
Tu peux faire :
 

<div id="page">
<div>
<div>
</div>
</div>
</div>


CSS :

#page div{/*code pour left*/}
#page div div{/*code pour right*/}


 
IE supporte et tu ne salis pas ton code XHTML avec du .left ou du .right.
 
Mais ça ne résout tjs pas ton problème... :o

Reply

Marsh Posté le 22-09-2005 à 18:35:55    

omega2 a écrit :

Je vérais bien un bug d'IE empéchant le chevochement d'images de fond avec des div imbriqué. (vivement IE7 qu'est sencé corriger tous les bugs de css) Donc a tester : le comportement d'IE en enlevant l'image de fond du div intérieur.
 
Personellement, ce probléme me dépasse mais je suis pas encore un pro du css.

Pour repérer le positionnement hasardeux sous IE, j'ajoute souvent une bordure au sélecteur CSS intéressé :
border: 1px solid red
Souvent on voit au moins d'où vient le problème.

Reply

Marsh Posté le 22-09-2005 à 18:40:17    

J'aurais bien dit "drapal" mais là, c'est plustôt "étoil". :D
Bonne idée le coup du border en cas de blem.

Reply

Marsh Posté le 22-09-2005 à 18:42:40    

kalex a écrit :

Tu peux faire :
 

<div id="page">
<div>
<div>
</div>
</div>
</div>


CSS :

#page div{/*code pour left*/}
#page div div{/*code pour right*/}


 
IE supporte et tu ne salis pas ton code XHTML avec du .left ou du .right.
 
Mais ça ne résout tjs pas ton problème... :o


 
Je pourrais faire quelque chose dans ce goût effectivement, sauf que dans la page y'a un div pour le menu. Enfin bon, je tiens compte de ta suggestion pour la propreté de mon code et pour prendre de bonnes habitudes, même si dans ce cas particulier, je ne vais pas y gagner grand chose :/
 
Pour ce qui est des bordures, je vais faire ça de suite, pour me donner une petite idée. Idem pour le fond du div omega2.
Merci pour vos suggestions :)

Reply

Marsh Posté le 22-09-2005 à 18:42:40   

Reply

Marsh Posté le 22-09-2005 à 19:07:16    

Euh, j'ai essayé le coup des bordures à gauche... et je dois dire que je ne comprends pas bien le résultat : on dirait que le div contenant l'image de fond de la bordure gauche est... réduit, en quelque sorte :/
 
Je suppose que ça vient du fait que les div dédiés aux bordures ne contiennent rien (comme tu l'avais fait remarqué kalex), et que donc 100% de rien, ça ne donne pas grand chose... mais pour faire comme tu as dit afin d'utiliser ces div en tant que conteneur et non plus comme éléments de mise en page, je dois avouer que je me trouve face à un petit problème :
 
la largeur de mon site fait 85% de la page,
les images des bordures font 19px,
-> comment déclarer la largeur du div de la bordure gauche afin qu'il puisse contenir les 85% du site + les 2x19px des bordures ? :/
(puisqu'il doit devenir un conteneur et plus seulement une décoration)
 
La solution serait peut etre de remplacer les div des bordures par des images, mais je ne souhaitais pas mettre autre chose que des images de fond :(
 
Je ne sais pas si j'ai été très clair, mais je n'arrive pas à l'être plus pour le moment.

Reply

Marsh Posté le 22-09-2005 à 19:19:02    

En reprenant mon exemple, tu donnes 85% de largeur à #page, pour les div à l'intérieur tu ne te préoccupes pas de leurs largeurs, car elle sera par défaut égal à 100% de #page. Pour les bordures tu peux faire quelque chose comme ça :

#page div{
 background-image: url("bordure-right.png" );
 background-position: right;
 background-repeat: repeat-y;
 padding-right: 19px;
}
#page div div{...}

Reply

Marsh Posté le 22-09-2005 à 19:40:09    

kalex a écrit :

En reprenant mon exemple, tu donnes 85% de largeur à #page, pour les div à l'intérieur tu ne te préoccupes pas de leurs largeurs, car elle sera par défaut égal à 100% de #page. Pour les bordures tu peux faire quelque chose comme ça :

#page div{
 background-image: url("bordure-right.png" );
 background-position: right;
 background-repeat: repeat-y;
 padding-right: 19px;
}
#page div div{...}



 
Bon, j'ai plus ou moins fait ce que tu disais . C'est encore un peu cochon, mais ca va devenir plus propre des que je saurais comment contourner le petit problème qui est survenu : les images des bordures s'arrete avant la div de liens appartenant au footer mais apparaissant juste au-dessus de lui (sur le contenu de la page, en bas de page) sous FF, et ils s'arretent à la dernière ligne de texte sous IE (alors que la div contenant les images des bordures possède le même min-height que la div de page).
 
Anyway, merci pour vos suggestions, je vais prendre une pause et tenter d'y voir lus clair par moi-même. Sinon je ferai un petit up en espérant de pas embetter trop de monde.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed