28172 sujets

CSS et mise en forme, CSS3

[RESOLU][IE 8 et 9] Background sur scrollbar d'un div

Bonjour,

Je me résous à poster mon problème ici car il me prends la tête depuis ce matin, et je ne sais plus dans quelle direction chercher...

J'ai un div, défini avec un style css. Le style est du genre:
.div1{
overflow:auto;
height:100px;
width:200px;
background: url(monImageQuiSafficheBien.jpg) repeat-x;
}


Le contenu de mon div est assez chargé (tableau et autres divs...).

Le problème est que mon background s'affiche au-dessus des scrollbars! Mon contenu est bien affiché, il se coupe bien comme si il y avait les scrollbars (c'est-à-dire que ce qui dépasse du div n'est pas affiché). On voit bien l'espace des scrollbars entre la bordure du div et le contenu...mais non les scrollsbar restent invisible.

Si je joue avec la molette, l'ascenceur descend correctement mais sans que je ne le vois bouger. Et bien sûr, avec l'outil de débug de IE (j'utilise IE8 mais constaté avec IE9), si j'enlève mon background, mes scrollbars sont effectivement présentes!!

Alors que peut-il se passer dans mon code? Une erreur de syntaxe (avant ou après) qui causerait ce genre de problème? Une propriété css mal utilisée?

A noter que j'ai du code JavaScript qui est exécuté lors de l'affichage de mon div.

Voilà, si cela peut inspirer ou rappeler un problème similaire à quelq'un. Je suis à l'écoute de toute bonne volonté!

Merci d'avance

DoD
Modifié par dodane (04 Nov 2011 - 09:58)
A noter que j'ai réussi à afficher mon div avec ses scrollbars à l'aide du doctype suivant:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">


Mais avec les doctypes suivant, le problème présenté apparait...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ou

<!DOCTYPE HTML>
Bonsoir,

Il y a fort à parier que la cause du problème vienne du contenu de cette fameuse <div>. J'ai essayé très exactement le code qui suit sur les versions problématiques d'IE avec chaque Doctype mentionné et avec un Doctype XHTML 1.0 Strict : aucun problème d'affichage.

HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>Page de test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
	<div class="div1">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec lectus velit. Aliquam quis bibendum lacus. Mauris nec odio neque. Donec porttitor quam mollis sapien ornare vel cursus massa mattis. Nullam vel libero sapien. Vestibulum tempor, lectus id placerat varius, nulla mi tristique ligula, quis egestas erat leo quis tortor. Proin molestie, nisl vitae eleifend eleifend, ipsum justo dapibus velit, at varius purus lectus in mi. Aliquam sed leo nisl. Phasellus ac dui ante, a feugiat elit. Maecenas posuere tempus tellus, vel porta turpis gravida vel.</p>
	</div>
</body>
</html>


CSS :
body, p {
	margin: 0;
	padding: 0;
}

.div1 {
	width: 200px;
	height: 100px;
	overflow: auto;
	background: url(monImageQuiSafficheBien.jpg) repeat-x;
}


Voici l'image pour tester le bout de code ci-dessus :
upload/41040-monImageQu.jpg

Il faudrait peut-être poster le contenu de la <div> ou mieux, proposer une page de test en ligne.

Bon courage Smiley ohwell
Merci d'avoir pris du temps pour plancher sur mon problème.

Je vais essayer d'enlever au fur et à mesure tout ce qui se trouve dans ma div afin de détecter ce qui peut poser problème.

Par contre je risque d'être dans l'impossibilité de mettre en ligne ma page, c'est une application J2EE utilisée en interne...
Enfin je vais voir.

Allez au boulot!
Problème résolu!!

En effet, cela venait bien de mon contenu...
Pour faire court, je n'ai toujours pas compris pourquoi une partie de mon contenu posait problème (un div en style display:none).
Au final, ce bloc, je n'en ai pas besoin dans mon cas (c'est du code généré automatiquement), donc j'ai commenté la construction de celui-ci pour ne plus qu'il m'embête.

Merci

DoD
Sujet clos
Aller à