Problème IE7

Voilà comme vous pouvez le constater sur l'image ci-dessous il y a un problème de CSS entre IE7 et IE8 (et tous les autres navigateurs). Comment faire en sorte que cela s'affiche comme il faut (comme sur ie8) sur ie7?
Merci d'avance

http://img36.imageshack.us/img36/8494/sanstitre2b.jpg

Partie CSS:

.cat_news{
margin-bottom:5px;
margin-top:0px;
height:52px;
width:595px;
}

.titre_cat span{
color: #88bf67;
font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
font-size:18pt;
font-weight:normal;
text-decoration:none;
}

.titre_cat{
padding-bottom:7px;
padding-top:0px;
margin-top:0px;
}

.titre_cat_news{
padding-top:15px;
margin-left:48px;
border-bottom:2px;
border-bottom-color:#090;
border-bottom-style:solid;
width:554px;
}

Partie HTML:

<div class="cat_news"><img src="wp-content/themes/Monje/images/lines.png" width="48" height="52" alt="Toute l'actu" / align="left"><div class="titre_cat_news"><div class="titre_cat"><span>Dernières Actus</span> (Toute catégorie confondue)</div></div></div>

Hello,

Je ne vais malheureusement pas t'aider pour ton problème graphique, mais ta structure HTML m'a un peu interpelé donc je me permets un petit retour : à priori, tu emploies des div à tout de bras et plus qu'il n'en faut :
- "Dernières actu" me semble parfaitement représenter une entête (donc Hx)
- l'illustration de gauche me semble plus pertinente en image d'arrière-plan

A ta place, je me contenterais du code HTML suivant :

<div class="cat_news">
<h2>Dernières Actus <span>(toutes catégories confondues)</span></h2>
</div>

Puis sur h2 :
- un background-image à gauche,
- un padding à gauche de la largeur de l'image
- une bordure en bas
- un padding en bas pour séparer de la bordure

Sur h2 span :
- modifier la typo

A toi de voir, mais ça me paraît bien plus simple et logique.

Je n'ai pas vraiment compris votre méthode :s

Bonjour,

Je vais essayer d'expliquer un peu

Si je reprends ton code indenté :

<div class="cat_news">
	<img src="wp-content/themes/Monje/images/lines.png" width="48" height="52" alt="Toute l'actu" / align="left">
	<div class="titre_cat_news">
		<div class="titre_cat">
			<span>Dernières Actus</span> (Toute catégorie confondue)
		</div>
	</div>
</div>

"raphaël" a écrit :

- l'illustration de gauche me semble plus pertinente en image d'arrière-plan

Cette image ne présente pas de contenu, elle n'est là que pour la "décoration". Elle a donc sa place dans le code CSS, et non pas dans le HTML.

"Raphaël" a écrit :

- "Dernières actu" me semble parfaitement représenter une entête (donc Hx)

D'un point de vue sémantique, le bloc "Dernière Actus" semble être un titre, et non pas juste un "bloc de texte". Dans ce cas il vaut mieux utiliser une balise qui marque un titre, à savoir <h1>, <h2>, etc...

D'un point de vue général, les <div> n'ont pas de signification sémantique, elles ne servent qu'à marquer des blocs distincts et à pouvoir les adresser dans le CSS. Elles ne doivent pas être utilisées si une autre balise est plus adaptée.

J'ajouterai, pour clarifier encore :

<div class="titre_cat_news">
	<div class="titre_cat">
		<span>Dernières Actus</span> (Toute catégorie confondue)
	</div>
</div>

Ici, tu as deux <div> imbriquées, la première ne servant à rien car elle ne contient rien d'autre que la seconde. C'est ce que Raphaël appelle "employer des div plus qu'il n'en faut". On appelle ça la "divite"

Et donc tout ce code peut être remplacé par les trois lignes données par Raphaël, qui font exactement la même chose, mais de manière beaucoup plus simple, logique et sémantique.

Evidemment ça va nécessiter de modifier aussi le CSS en fonction

Oui mais j'ai du mal avec son code, je n'arrive même pas a affiché l'image via le background ^^
Déjà pourquoi mettre le texte entre parenthèse dans un span?
Modifié par ColonelCool (21 May 2009 - 18:24)

Exemple rapide et pas testé

.cat_news{
	margin-bottom:5px;
	margin-top:0px;
	height:52px;
	width:595px;
}

.cat_news h2
{	
	background-image : url("wp-content/themes/Monje/images/lines.png") center left no-repeat;
	padding-left: 48px;
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-size:18pt;
	font-weight:normal;
	color: #88bf67;
	border-bottom:2px;
	border-bottom-color:#090;
	border-bottom-style:solid;
}

.cat_news h2 span
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #000;
}

Bon après il faut jouer avec les marges et les paddings, et la bordure verte va commencer au niveau de l'image, mais l'idée est là.

Pourquoi mettre le texte dans un span ? Car il fait partie du <h2> et que tu souhaites le styler différemment de "Dernières Actus". Il te faut donc pouvoir le cibler spécifiquement dans le CSS. Dans ce cas précis, une balise générique est toute indiquée, et celle qui convient est le <span>
Modifié par mistike (21 May 2009 - 18:29)

C'est à peu de chose près le code que j'ai fait et comme je disais l'image ne s'affiche pas. De plus la ligne verte comme tu l'as mentionné dépasse à gauche. D'où mon code farfelu ^^
Pour le span, il ne tient pas compte de la police, il utilise celle du h2 qui est son référant, d'où encore une fois mon code ^^
Modifié par ColonelCool (21 May 2009 - 18:39)

ColonelCool a écrit :
C'est à peu de chose près le code que j'ai fait et comme je disais l'image ne s'affiche pas.

Certainement à cause du chemin relatif ==> remplace le par le chemin absolu.

Cela fonctionne mais bon il reste le problème du trait vert sur l'image et que cela n'arrange pas l'affichage sous IE7

Si on pouvait m'aider sur ma question originelle svp, à savoir la compatibilité avec Internet Explorer 7 qui semble faire des siennes. Sous IE le trait est collé au texte.
Modifié par ColonelCool (22 May 2009 - 16:32)

Salut,

On peut avoir un exemple en ligne ? As-tu modifié le code comme on te l'a suggéré ?

http://www.simpson-halloween.com/test/test/

Voilà, l'exemple comprend mon code et celui donné ici. Comme vous le constaterez IE n'aime pas beaucoup.
Maj: C'est étrange mon code sur une page vierge semble fonctionné correctement mais une fois inséré dans l'ensemble de mon site non :s
Modifié par ColonelCool (22 May 2009 - 16:47)

Peu importe comment je manie le code (le mien ou celui donné) il ne fonctionne jamais partout et le pire c'est qu'il fonctionne parfois sur IE8 de windows 7 et pas sur IE8 de XP ...
Il y a t'il une autre manière de le codé pour obtenir le même résultat?
Modifié par ColonelCool (22 May 2009 - 17:45)

Perso sur IE7 et FF3 je ne vois pas de différence...

Peux-tu nous donner un lien vers la même chose, mais intégré au reste de ton site, puisque c'est là que ça ne marche plus ?

Je pense avoir trouvé une parade pour que cela fonctionne plus ou moins bien.
Par contre autre question, j'ai deux images stylisés dans des UL et je souhaiterai qu'elles soient affichés l'une à côté de l'autre. Ce qui veut dire donc deux <ul> qui s'affichent l'un à côté de l'autre. Comment je peux faire, par défaut ils se chevauchent.