28173 sujets

CSS et mise en forme, CSS3

Problème d'affichage... étrange

Je commence à m'arracher les cheveux avec un problème d'affichage sous IE (firefox fonctionne nickel...) :

dans le code suivant, le texte qui est en h2 ne s'affiche pas. Pour qu'il s'affiche, il faut redimensionner la fenêtre, dès que l'on refait F5 le texte disparait.
pourtant le texte est bien là car lorsque qu'on passe la souris à l'endroit ou devrait figurer le texte, on voit bien le changement de curseur, de plus quand on selectionne le texte en aveugle, le texte réapparait par petit bout.

voici le code : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.resumeHeader60Bordure{
	background-color: #fff;
}
.resumeHeader60Bordure h1{
	width:50%;
}
.resumeHeader60Bordure .content{
	border: 1px solid #ABC7D3;
	padding: 5px;
}
.resumeHeader60Bordure h2{
	font-size: 0.7em;
	font-weight: bold;
}
.resumeHeader60Bordure .imgPortlet{
	float: left;
	padding:0;
	margin: 0 10px 10px 10px;
}
.resumeHeader60Bordure .content ul{
	clear: both;
	margin: 0 0 0 -7px;
	padding: 0;
}
.resumeHeader60Bordure .content li{
	padding: 0 0 0 0;
	margin: 0 0 5px 0;
}
.resumeHeader60Bordure .content li a{
	font-size: 1em;
	font-weight: bold;
	color: #133388;
	margin: 0 0 0 6px;
}
.resumeHeader60Bordure .content p{
	font-size: 0.7em;
	padding: 0;
	margin: 0 0 10px 15px;
}</style>
<title>Document sans nom</title>
</head>

<body>
<div class="resumeHeader60Bordure">
	<h1>L'actu</h1>
	<div class="content">
		<img src="http://bio.m2osw.com/gcartable/astretpartic/terre.jpg" width=100 class="imgPortlet" />
		<h2>Lorem ipsum dolor sit amet et patati et patata Lorem ipsum dolor sit amet et patati et patataLorem ipsum dolor sit amet et patati et patataLore</h2>
		<ul>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
		</ul>
		<p class="resume">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</p>
	</div>
</div>
</body>
</html>


merci de votre aide parce que là il y a quelque chose qui m'échappe...
Modifié par achem (17 Dec 2007 - 12:06)
Tout d'abord, deux petites erreurs de code:
- width="100" dans ton image et
- attribut alt de l'image

Mais bon, ça, ce sont des détails Smiley cligne Ensuite, je te conseille de relire précautionneusement ton code. En effet, la multiplication des marges sur les enfants du même sélecteur (".resumeHeader60Bordure") pourrait poser problème, par exemple:
- margin: 0 0 5px 0; puis
- margin: 0 0 0 6px; et encore
- margin: 0 0 10px 15px;

Il te faut appliquer des styles en cascade pour ce type de choses (margin-left: puis margin-right: etc.). Là, le parseur de IE 6 peut parfois se planter...
Modifié par smitty (17 Dec 2007 - 13:55)
Merci smitty pour ta participation, hélas même en supprimant toutes les indications de margin et de padding, comme sur le code suivant, cela ne fonctionne toujours pas.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.resumeHeader60Bordure{
	background-color: #fff;
}
.resumeHeader60Bordure h1{
	width:50%;
}
.resumeHeader60Bordure .content{
	border: 1px solid #ABC7D3;
}
.resumeHeader60Bordure h2{
	font-size: 0.7em;
	font-weight: bold;
}
.resumeHeader60Bordure .imgPortlet{
	width: 100px;
	float: left;
}
.resumeHeader60Bordure .content ul{
	clear: both;
	padding: 0;
}
.resumeHeader60Bordure .content li a{
	font-size: 1em;
	font-weight: bold;
	color: #133388;
}
.resumeHeader60Bordure .content p{
	font-size: 0.7em;
}</style>
<title>Document sans nom</title>
</head>

<body>
<div class="resumeHeader60Bordure">
	<h1>L'actu</h1>
	<div class="content">
		<img src="http://bio.m2osw.com/gcartable/astretpartic/terre.jpg" alt="image" class="imgPortlet" />
		<h2>Lorem ipsum dolor sit amet et patati et patata Lorem ipsum dolor sit amet et patati et patataLorem ipsum dolor sit amet et patati et patataLore</h2>
		<ul>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
		</ul>
		<p class="resume">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</p>
	</div>
</div>
</body>
</html>


en fait, il suffit que j'enlève le clear: both; de la classe .resumeHeader60Bordure .content ul pour que cela fonctionne.

si cela peut mettre quelqu'un sur la piste...
Alors, après un ou deux tests: si tu enlèves simplement l'attribut float de l'image (par défaut, c'est à gauche), tout fonctionne correctement. Te reste juste à mettre l'image en ligne dans le bloc h2:

<h2><img src="http://bio.m2osw.com/gcartable/astretpartic/terre.jpg" alt="image" class="imgPortlet" />Lorem ipsum dolor sit amet et patati et patata Lorem ipsum dolor sit amet et patati et patataLorem ipsum dolor sit amet et patati et patataLore</h2>


Voilà Smiley smile
Sujet clos
Aller à