[Résolu]Problème de background-repeat sous IE

Bonjour à tous,

Je me permets de poster ici mon problème de CSS pour lequel je ne vois plus le bout.

Je suis en train de développer un site avec un bandeau à droite. Ce bandeau s'adapte à la hauteur des pages (100%). Il dispose d'un fond réalisé avec une image de 1px de haut répétée sur tout sa hauteur avec un background-repeat. Jusque là rien de bien difficile. Tout marche très bien avec Firefox, IE en local. Une fois les fichiers sur le serveur distant, tout continue de bien fonctionner avec Firefox mais IE ne recouvre pas le bandeau complètement.

Voici des images pour que vous voyez bien de quoi je parle :

Avec Firefox (ou IE en local) :



Avec IE sur le serveur :



Je vous mets le code html CSS du menu :

#menu_dt /***bandeau-menu droite***/
{
background-image:url(img/degr.jpg);
background-repeat:repeat-y;
position:absolute;
top:0px;
right:0px;
width:130px;
height:100%;
}

Voilà. Je ne comprends pas. Si quelqu'un a une idée ou a déjà rencontré ce type de problème... je suis preneur !

Je vous remercie par avance !

Sébastien
Modifié par Sebby (19 Jun 2006 - 14:32)

Bonjour,
Assez étrange en effet.
Pour que l'on puisse trouver plus facilement la source de ton proiblème,
il faudrait aussi que tu donnes le bout de code html mis en cause
ou mieux un lien.
Modifié par Hermann (16 Jun 2006 - 16:04)

Voici le code html correspondant au menu :

<div id = "menu_dt">
				<div id = "date"><!--div pour la date et les drapeaux-->
					<table align = "center" id = "flags">
						<tr>
							<td>
								<a href = "" title = "">
									<img src = "img/fr.png" alt = "" />
								</a>
								<a href = "" title = "">
									<img src = "img/gb.png" alt = "" />
								</a>
								<a href = "" title = "">
									<img src = "img/es.png" alt = "" />
								</a>
								<a href = "" title = "">
									<img src = "img/de.png" alt = "" />
								</a>
							</td>
						</tr>
						<tr>
							<td>vendredi 03 pluviose</td>
						</tr>
					</table>
				</div>
				<div id = "offer"><!--div pour les offres commercants.L'image est en fond et dans la css.-->
					<div id = "img_offer">
						<a href = "pages/produits.html" title = "">
							<img src = "img/offre_img2.png" alt = "Cliquez ici pour decouvrir toutes nos offres commercants" />
						</a>
					</div>
				</div>	
				<div id = "boComm"><!--div pour aller au BO commercant.L'image est en fond et dans la css.-->
					<div id = "img_boComm">
					<a href = "pages/log.html" title = "Acceder a votre espace">
						<img src = "img/boComm.png" alt = "Acceder a votre espace" />
					</a>
					</div>
				</div>
				<div id = "links"><!--div de liens pour les internautes : favoris,en page d'accueil...L'image est en fond et dans la css.-->
					<div id = "txt_links">
						<table align = "center">
							<tr>
								<td>
									<a href = "" title = "">Le site dans vos favoris</a>
								</td>
							</tr>
							<tr>
								<td class = "txt_links">
									<a href = "" title = "">Le site en page d'accueil</a>
								</td>
							</tr>
							<tr>
								<td>
									<a href = "pages/discover.html" title = "">Faire connaitre ce site</a>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>

et voici le code css des différents éléments le constituant :

#date /**style bloc date et drapeaux**/
{
background-color:transparent;
position:relative;
top:10px;
left:0px;
width:130px;
height:40px;
}

#flags /**style police, couleur et alignement drapeau***/
{
text-align:center;
font-size:10px;
color:#000000;
font-weight:bold;
width: 100%;
}

#flags tr td a:hover {
text-decoration: none;
}

#flags tr td a img {
text-align:center;
}

/****style bloc offres commercants****/
#offer /**bloc image fond**/
{
position:relative;
background-image:url(img/offer_img.png);
background-repeat:no-repeat;
background-position:center;
top:30px;
left:0px;
width:130px;
height:144px;
}

#img_offer
{
background-color:transparent;
position:relative;
top:12px;
left:22px;
width:85px;
height:120px;
text-align:center;
font-size:11px;
color:#003366;
}

/****fin style bloc offres commercants****/

/****style bloc acces back office commercants****/
#boComm /*cadre image bloc*/
{
position:relative;
background-image:url(img/block.png);
background-repeat:no-repeat;
background-position:center;
top:50px;
left:0px;
width:130px;
height:104px;
}

#img_boComm /**style image boComm**/
{
background-color:transparent;
position:relative;
top:12px;
left:22px;
width:85px;
height:80px;
text-align:center;
font-size:11px;
color:#003366;
}
/****fin style bloc acces back office commercants****/


#links /**style liens internautes**/
{
position:relative;
background-image:url(img/block.png);
background-repeat:no-repeat;
background-position:center;
top:80px;
left:0px;
width:130px;
height:104px;
}

#txt_links /*formatage et placement du div de texte*/
{
background-color:transparent;
position:relative;
top:8px;
left:16px;
width:96px;
height:90px;
text-align:right;
font-size:9px;
color:#003366;
}

.txt_links
{
text-align:left;
}

Voilà en espérant que cela aide. Encore merci d'avance.
Modifié par Sebby (17 Aug 2006 - 12:22)

Désolé mais ton code ne suffit pas : le problème
peut venir par exemple du bloc conteneur de ton menu qui n'a pas
de hauteur fixée, auquel cas le height:100% de ton menu n'a aucun effet...
Tu dois donner la totalité de ton code.

Comme je le présupposais, ton problème vient du fait que tu n'as pas he hauteur défini pour les div parents de ton menu, donc le height:100% (100% de quoi?) ne sert a rien dans ce cas.
Tu dois ou donner une hauteur fixe a l'un de ses conteneur soit
alors voir la FAQ pour pouvoir faire fonctionner le height:100%.

Merci pour ton aide.

J'ai essayé les deux solutions que tu m'as proposé et aucune de correspond à ce que je veux.

Si j'utilise celle de la faq, alors sur IE uniquement le site prend toute la page et lors d'un redimensionnement vers le bas de la fenêtre le site s'allonge... De plus sur Firefox cela me met la barre de défilement alors qu'il n'y a rien à défiler (mais il s'adapte correctement si la page change).

Concernant la solution de mettre la valeur fixe au conteneur de mon menu cela ne va pas non plus : le menu reste à cette valeur et ne s'allonge pas si la page grandit. Donc j'en reviens au même point.

Si tu as d'autres idées, je suis preneur. Merci par avance !

Bonjour,
J'ai pas trop le temps de t'expliquer mais tu peux essayer avec la propriété min-height, vas voir sur la FAQ.

J'ai déjà essayé (avec la faq d'ailleurs) et pour pouvoir la faire fonctionner avec IE il faut lui mettre l'attribut height. Mais avec une valeur fixe pour height, cela empêche le bandeau d'aller jusqu'en bas. Mais merci

J'aurais pitêtes une idée, mais qui serait plus une "bidouille" qu'autre chose.

En fait, cela serait d'appliquer le fond que tu veux à ton conteneur principal tout en spécifiant son emplacement, à savoir à droite.

Je ne sais si cela correspondra à tes attentes, mais peut être est ce une piste à exploiter

ce n'est pas bête du tout je vais essayer ça merci

Merci beaucoup ! Cela a marché parfaitement.

A ton service