28173 sujets

CSS et mise en forme, CSS3

Probleme avec IE7

Bonjour,

Je découvre CSS avec votre site et notamment :
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS

J'ai bossé sur un petit exo et cela ma donné un bon résultat dans Firefox2.
Hélas dans IE7 cela ne se comporte pas pareil. J'ai aussi essayer avec Opera9 et la aussi tout ce passe bien.

Quand j'essai de mettre une valeur <100 dans le width du conteneur cela ne diminue pas le graphique qui reste comme "bloquer" sur une largeur de 100.

Voici mon code source, si vous pouviez m'aider a bouter IE7 hors de mes reflexions ce serait super :




<html>
<head>
	<style rel="stylesheet" type="text/css">
	.conteneur {
		height: 20px;
		width: 10px;
		background-image: url(progress.jpg);
	}
	.bloc {
		height: 20px;
		width: 100px;
		margin-left: 0px;
	}
	</style>
</head>
<body>
<table width="300" border="1">
		<tr>
			<td style="background-color:red;">
				<div class="conteneur">
				   <div class="bloc">bli bli bli</div>
				</div>
			</td>
		</tr>
	</table>
</body>
</html>



le texte "bli bli bli" sera en faite un pourcentage et je compte par la suite modifier dynamiquement le width de l'image qui symbolisera le pourcentage.
Quand a l'image "progress.jpg" elle n'est pas importante pour tester.

Cordialement
Modifié par michel18 (12 Oct 2007 - 11:31)
Hello,

Déjà, pense à utiliser la balise [ code] en postant dans le forum pour rendre ton code plus lisible.

Ensuite, tu défini une largeur < à 100 à ton conteneur principal (un tableau d'ailleurs, berk), alors qu'à l'intérieur, il possede un élément .bloc qui fait 100 de large.

IE agrandit ton conteneur pour contenir ses contenant (il a tort) alors que Firefox et Opera suivent bien tes directives.
Enleve le width:100 à ton bloc, il prendra toute la largeur possible.

Et si ça marche pas... enleve moi ces tableaux, ça ira tout de suite mieux
Bonjour,

Merci de ta réponse.
Si je supprime width:100px; alors IE affiche l'image du conteneur en largeur à la taille du texte du bloc. Ce n'est donc pas tout a fait le comportement que je souhaite (impossible d'avoir une largeur < au texte du bloc).
Si je supprime le tableau c'est pire dans le sens ou il affiche l'image sur 3 lignes avec le mot "bli" sur chaque. Il est toujours impossible d'avoir une largeur d'image < à la largeur de texte.
J'aurais peut-être du préciser l'utilité de ce code. J'utilise un tableau qui aura plusieurs colonnes toute contenant du texte (des références, descriptions, etc...) et une colonne avec cette progressbar symbolisant un pourcentage. Je voudrais par dessus cette image (pouvant aller de 0 à 100%) du texte sous la forme x% (n), x étant un pourcentage et n un nombre. Il faut donc que l'image du conteneur puisse être < à la largeur du texte du bloc. Comme il pourra y avoir des dizaines de lignes j'ai pensé qu'un tableau était la bonne méthode vu que c'est fait pour cela mais j'avoue que je suis débutant en développement web et que je n'ai probablement pas la bonne approche.
Sujet clos
Aller à