[Résolu][XHTML] Problème background qui dépasse sous IE

Bonjour à tous,

je suis en train de faire un site web (qui se voudrait être assez pro... ) et j'éprouve quelques difficultés en fonction du navigateur

Sous IE, mes images (ou mes couleurs, ça fait pareil) de background se répètent en dehors de ce qu'elles devraient (cela "déborde" sur le bas)

Bon, comme il est clair que je ne suis pas très clair (sic !), je vous propose de faire le test vous-même: http://tek.no-ip.biz/hmc/index.php

Essayez avec Firefox ou Opera, puis réessayer avec IE... Vous voyez de quoi je voulais parler ?

Savez-vous comment y remédier ?

Au cas où, je vous poste le code incriminé

<div id="content">
  <?php include("inc/banAndMenus.php"); ?> <!-- bannière + menus (aucun problème) -->
			            
  <div id="page">
    <img src="images/contenth.jpg" width="100%" height="25" alt=""/>
    <?php include("inc/page_index.php"); ?> <!-- simple contenu html -->	
    <img src="images/contentb.jpg" width="100%" height="25" alt=""/>    
  </div>
</div>

D'avance, je vous remercie de toutes les réponses
Modifié le 17 Jan 2005 - 19:12

Je sais pas si j'ai tout pigé mais j'ai pas vu de debordement (je suis sous safari, j'ai testé IE).

Je crois que les images que tu utilise, tu devrais les declarer dans la css comme background.

Enfin j'ai pas trop pigé ton prob. mais comme je pige jamais aucun sujet...



Je suis plus là...

oui, justement, il s'agit bien de cette ligne !

elle n'apparait que sous IE, pas avec les autre navigateur (il s'agit de la couleur de background qui dépasse de quelques pixels vers le bas)....

pour la clause css "background-image", j'y avais pensé (j'ai même essayé), mais là aussi ça foire sous IE....

Concernant la mention en question, je dois dire que je ne comprend pas trop la raison, mais lorsque l'on passe en 800x600, et seulement sous IE, toute la mise en page se casse la g...... ! (faites l'essai si vous le pouvez)

moi pas comprendre......

(mais bon il s'agit d'un problème secondaire, et je pense qu'assez peu de monde tourne encore en 800x600)

Je suis un peu jeune dans la catégorie XHTML & CSS2 mais peut être une piste (OpenWeb) :
Gérer les modèles de boîtes CSS standard et Microsoft.
Modifié le 16 Jan 2005 - 22:28

Lien très intéressant, merci !

Je connaissais déjà un peu le problème, et cela m'a permis d'approfondir la question.

Malheureusement, même un mettant tous mes padding / margin / border à 0, le problème persiste !

Bon allez, je met une image pour illustrer:


Modifié le 16 Jan 2005 - 23:32

J'ai une solution pour ie mais malheureusement ca fait foiré le résultat sous Mozilla. Je la donne quand même ca fera peut être une piste.

Dans le CSS je rajoute:

#imagebas{
    position: absolute;
    width:100%;
    height: 25px;
}

et dans le html l'appel donne :

<p align="center" class="Style1">Ce site sera optimisé pour Mozilla Firefox, Internet Explorer et Opera, en 1024*768.<br>
NB: un problème de mise en page sous Internet Explorer en 800*600 est connu, mais non résolu ! </p>
					[b]<img id="imagebas" src="images/contentb.jpg"  alt=""/>[/b]
	</div>
        </div>
        <!-- FIN BLOC CONTENT -->

Bon je vais encore bidouiller pour trouver si j'ai le temps !

gilles6975 a écrit :
Bon je vais encore bidouiller pour trouver si j'ai le temps !

formidable ! tu es un chef, merci !

sans aucune garantie je suis neophyte en la matière ! mais je bidouille

Je pense que je tiens la solution ! Si un pro peut venir vérifier l'orthodoxie !

On oublie mon message précedent et on fait

Pour le CSS :

#page {
    width: 79%;
    float: left;
    background-color: #CCC;
    margin: 0 0 0 0px;
    border:  0 0 0 0px;
}
.imagecadre{
float: left;
width: 79%;
margin: 0 0 0 0px;
padding: 0 0 0 0px;
}

pour le html :

<img class="imagecadre" src="images/contenth.jpg"  alt=""/>
<div id="page">
    <h4></h4>
    <p>bla bla bla</p>
</div>
<img class="imagecadre" src="images/contentb.jpg"  alt=""/>

Certaine choses me géne cependant :
- si le contenu est toujours a droite et le menu a gauche pourquoi ne pas fixer le menu et créer un conteneur pour le contenu cela te permettra de récupérer les marges et le positionnement global du texte ! cf. tutorial dans les mises en page CSS sur ce site. Cela eviterait cet affreux 79% qui ne correspond a rien !
Dans la div contenu tu mets les marges et sa taille c'est a dire 100% de l'espace restant a droite du menu. Tout cela en position relative (c'est a dire relativement au menu gauche qui lui est fixe)
- dans ta page juste avant les liens renvoyant vers les validateurs css tu mets une balise <div align="center"> c'est pour faire une blague ?


En espérant avoir solutionner ton problème correctement, bon développement !
Modifié le 17 Jan 2005 - 12:20

gilles6975 a écrit :
Certaine choses me géne cependant :
- si le contenu est toujours a droite et le menu a gauche pourquoi ne pas fixer le menu et créer un conteneur pour le contenu cela te permettra de récupérer les marges et le positionnement global du texte ! cf. tutorial dans les mises en page CSS sur ce site. Cela eviterait cet affreux 79% qui ne correspond a rien ! Dans la div contenu tu mets les marges et sa taille c'est a dire 100% de l'espace restant a droite du menu. Tout cela en position relative (c'est a dire relativement au menu gauche qui lui est fixe)

J'ai pas très bien tout compris - tu me dis de mettre le menu en taille fixe (en pixels et en absolute ?) et une div pour la page ? enfin bref j'ai pas tout pigé... mais je vais jeté un coup d'oeuil aux tutos, ça peut pas me faire de mal !

gilles6975 a écrit :

dans ta page juste avant les liens renvoyant vers les validateurs css tu mets une balise <div align="center"> c'est pour faire une blague ?

euh bin je dirais que c'est quelque chose de relativement temporaire, qui s'en ira très prochainement, donc je ne me suis pas trop cassé

en tout cas, merci de ton coup de main

en gros ton menu s'il est toujours a la même place ce qui semble être le cas tu crés une id pour le menu du style

#menu{
position: absolute;
left: 0px;
margin-top: 10px; [b]c à d  sous ton header[/b]
width: 120px; [b] de largeur fixe[/b]
}

et tu dispose ton conteneur du centre du style

#contenu{
margin-left: 121px; [b]à 1px du menu mais tu fais comme tu veux[/b]
margin-top: 10px; [b]c à d  sous ton header[/b]
}

Après a chaque page tu mets les éléments de la page du centre entre <div id=contenu"> patati patata, tableau ,maison, image chien écrasé flash ou n'importe quoi</div>

C'est un peu ce que tu faits dans ta div page. En fait ta div page je l'ai considéré en fait comme un paragraphe. Donc il faut en créer une autre qui contiendra tout le centre.
En même temps c'est a peu pres le tuto que j'explique là.



En ce qui concerne la blague ce n'est pas parceque ton code n'est pas fini que cela me fait rire mais bien parceque le <div align="center"> est quand même une des premières choses qu'on vire en XHTML. Y'a un article je sais plus ou qui parle de ça !.


Sinon ça marche mon truc ?
Modifié le 17 Jan 2005 - 18:06

J'hallucine !!!!

Au sujet du problème de background qui se répète: la réponse se trouvait en fait ici même, dans les tutos !!!
http://www.alsacreations.com/articles/cadre/ (fin de page)

a écrit :

Note importante pour certains cadres : Il se peut que votre haut ou bas de cadre se dédouble ou affiche des espaces supplémentaires.
C'est normal: sur IE toutes les images (et autres balises en-ligne) occupent par défaut une hauteur minimale (celle du texte par défaut), soit environ 13px à 16px. Donc toutes les images de moins de 13px prendront quand-même 13px.
On peut feinter IE en affichant les images en bloc (comme sur notre exemple) ou en mettant font-size et/ou line-height à 0 dans les blocs concernés.

Et ça fonctionne impec, nickel chrome !!!

Bizarre ca ! Tes images font bien plus que 16px puisque elles sont en 100%*25px ! Mais bon si ca marche ca roule !

ah zut j'avais pas vu ton post

bin pour la feuille de style si tu veux tu peux la voir ici http://tek.no-ip.biz/hmc/css/style.css

Et c'est à peu près la config que j'ai,

<div id="contenu">
  <div id="banniere">
  </div>

  <div id="menugauche">
  </div>

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

c'est pas ça que tu me disais ?

En fait ton display block te ramène à ce que je disais. En effet j'avais travesti ton id page pour en faire un paragraphe. La ca a l'air bon.
Je suis quand même intrigué par ce display block surtout que l'image fait bien plus que les 13 ou 16 px annoncés ! Je vais regarder cela même si le résultat te donne raison !
Sinon fait attention si tu veux mettre une image dans ta partie centrale, elle va prendre l'attribut display block et je ne sais pas ce que ca peut donner !

Sinon il est temps peut être de noter un petit [résolu] sauf si quelqu'un de plus aguérie au css peut nous apporter ses lumières ! et notamment a propos de ce display block bizarre !

Vi, moi aussi ça m'intrigue... m'enfin, l'informatique http://www.developpez.net/forums/images/smiles/sacrain.gif des fois il vaut mieux ne pas chercher à comprendre !

pour le "résolu", je m'y attelle de suite

Encore merci de ton aide !

@+