Problème de background sous IE7

Jarick · 29 Décembre 2008

Bonjour,

Je suis nouveau, ici. Et comme le forum m'a déjà bien aidé dans maintes situations, je me permets de vous demander votre aide précieuse pour un problème sous lequel je bute. Je suis en train de faire un site avec mon cv en ligne et tout se passait bien jusqu'à ce que je me décide à afficher le tout sous IE7 (je checkais sous FF jusque là). Devant le grand nombre de changements, je me suis résolu à créer un autre css pour IE. J'ai réussi à tout réadapter comme je le voulais, à part un petit point.

En gros, je voudrais afficher une petite icône à côté de chacun de mes liens. Pour ça, j'utilise la propriété css background associé aux éléments a.

Sous FF, pas de soucis, tout s'affiche comme voulu :

Par contre, sous IE7, il me manque l'icône du dernier élément a (à la fin de l'intitulé du 2e mémoire) :

J'ai tout testé, cherché partout et j'ai rien trouvé. Je comprends pas pourquoi l'icône s'affiche pour les autres éléments a et pas pour celui-là.

Voilà donc mon code html :

<div id="text">

	<div class="title"><img src="img/formations.png" alt="Formations" width="300" height="40" /></div>

		<table>
			<tr>
				<td><div class="date">2007 - 2008</div></td>
				<td><div class="details">
					<h2 class="intitule">Master en communication multimédia</h2>
					<a href="http://www.uclouvain.be/comu.html" title="Visitez le site du Département de communication de l'UCL">Université catholique de Louvain</a><br />
					<p>Diplôme obtenu avec mention (grande distinction)</p>
					<p>Mémoire : <a href="doc/memoire_series_pvr.pdf" title="Téléchargez le mémoire">"Les séries télévisées sur Internet. Analyse des pratiques alternatives de diffusion et de réception d'un contenu télévisuel."</a></p>
				</div></td>
			</tr>
		</table>

		<table>
			<tr>
				<td><div class="date">2003 - 2007</div></td>
				<td><div class="details">
					<h2 class="intitule">Licence en sociologie</h2>
					<a href="http://www.soco-ulb.be/fr/sciences-sociales.html" title="Visitez le site du Département de Sciences sociales de l'ULB">Université libre de Bruxelles</a><br />
					<p>Diplôme obtenu avec mention (grande distinction)</p>
					<p>Mémoire : <a href="doc/memoire_cv_pvr.pdf" title="Téléchargez le mémoire">"Les formes d'engagement sur Internet. Analyse sociologique de communautés virtuelles fédérées autour d'un projet commun."</a></p>
				</div></td>
			</tr>
		</table>
</div>

Et voilà mon css pour IE :

#text {
	padding: 35px 20px 15px 20px;
}

#text .title {
	position: relative;
	top: -10px;
	left: -20px;
	margin-right: 0;
	padding-bottom: 5px;
}

#text .date {
	margin: 1px 10px 0 0;
	float: left;
	width: 60px;
	letter-spacing: -1px;
}

#text .details {
	float: right;
	width: 390px;
	padding: 0 0 10px 10px;
	margin: 0 0 15px 0;
	border-left: 6px solid #6f6868;
	font-size: 0.9em;
}

#text .intitule {
	letter-spacing: -1px;
	font-size: 1.2em;
	font-weight: bold;
}

#text a {
	text-decoration: underline;
	background: transparent url(img/lien.png) no-repeat bottom right;
	padding-right: 14px;
}

td {
	vertical-align: top;
}

table {
	padding-bottom: 15px;
}

Notons que si je modifie l'attribut du background de "#text a" en "center right", l'icône apparait (mais pas à l'endroit voulu, bien entendu). Et que si je change le "no-repeat" en "repeat-x", alors l'icône apparait bien (mais bien évidemment, il apparait aussi derrière toute la ligne...).

Je suis vraiment bloqué et si vous pouviez m'aider, je vous en serai éternellement reconnaissant.

Merci beaucoup d'avance.

Modifié 29 Décembre 2008 par Patrick
Merci d'utiliser le tag [codebox]...[/codebox] pour les codes longs.

ghost · 29 Décembre 2008

Salut,

L'url de la page serait bien utile ...

Leonick · 29 Décembre 2008

Le mieux serait de valider le code, car là on trouve de tout des <a> dans des <p> mais aussi dans rien, etc...

D'autant plus, que là, l'emploi des <table> ne se justifie pas réellement, j'aurais plutôt mis des dl, dd, dt voir http://htmlhelp.com/reference/html40/lists/dd.html

**captain_torche** · 30 Décembre 2008

Sémantiquement parlant, l'emploi des listes de définition n'est pas justifié.

Jarick · 31 Décembre 2008

L'url de la page serait bien utile ...

Ça aurait été avec plaisir mais il est pas encore en ligne.

Le mieux serait de valider le code, car là on trouve de tout des <a> dans des <p> mais aussi dans rien, etc...
D'autant plus, que là, l'emploi des <table> ne se justifie pas réellement, j'aurais plutôt mis des dl, dd, dt voir http://htmlhelp.com/reference/html40/lists/dd.html

J'ai validé l'html et le css et il m'indique aucune erreur.

Quant au reste, j'ai testé avec les définitions et le problème reste le même...

**iNCiTE Web** · 2 Janvier 2009

Le mieux serait de valider le code, car là on trouve de tout des <a> dans des <p> mais aussi dans rien, etc...

Et alors ? une balise de type bloc peut contenir des balises en ligne ?

Mais c'est vrai que sans le code complet, difficile de chercher... genre une webdevelopper pourrait déjà nous donner des pistes...

Leonick · 2 Janvier 2009

Et alors ? une balise de type bloc peut contenir des balises en ligne ?

tout à fait, mais comme il ne nous a donné qu'une partie de la css et du code html, je ne sais pas s'il a des mises en forme sur du td a qui contrecarre celles sur p a etc...

Jarick · 5 Janvier 2009

Désolé pour le temps de réponse... Un peu pris par d'autres trucs.

Et merci déjà pour toutes vos réponses.

Voilà donc mon code complet.

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">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="fr" />
<title>Pierre Van Rooten || Communication Web || Formations</title>
<meta name="keywords" content="communication web, communication multimédia, cv, curriculum vitae, webmaster, chef de projet multimédia, SEO, emploi, job" />
<meta name="description" content="CV de Pierre Van Rooten, communication web" />
<meta name="robots" content="all" />
<meta name="author" content="Pierre Van Rooten" />
<meta name="rev" content="mailto:pierre_AT_vanrooten.be" />
<meta name="generator" content="Notepad++" />
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="style_ie.css" /><![endif]-->
</head>

<body>

<div id="header"></div>

<div id="menu">
	<ul>
		<li><a href="index.html" title="Accueil">Accueil</a></li>
		<li><a href="formations.html"  title="Formations" class="current">Formations</a></li>
		<li><a href="experiences.html" title="Expériences">Expériences</a></li>
		<li><a href="competences.html" title="Compétences">Compétences</a></li>
		<li><a href="contact.html" title="Contact">Contact</a></li>
	</ul>
</div>

<div id="content">

<div id="text">

	<h3>Formations universitaires</h3>

		<table>
			<tr>
				<td><div class="date">2007 - 2008</div></td>
				<td><div class="details">
					<h2 class="intitule">Master en communication multimédia</h2>
					<a href="http://www.uclouvain.be/comu.html" title="Visitez le site du Département de communication de l'UCL">Université catholique de Louvain</a><br />
					<p>Diplôme obtenu avec mention (grande distinction)</p>
					<p>Mémoire : <a href="doc/memoire_series_pvr.pdf" title="Téléchargez le mémoire">"Les séries télévisées sur Internet. Analyse des pratiques alternatives de diffusion et de réception d'un contenu télévisuel."</a></p>
				</div></td>
			</tr>
		</table>

		<table>
			<tr>
				<td><div class="date">2003 - 2007</div></td>
				<td><div class="details">
					<h2 class="intitule">Licence en sociologie</h2>
					<a href="http://www.soco-ulb.be/fr/sciences-sociales.html" title="Visitez le site du Département de Sciences sociales de l'ULB">Université libre de Bruxelles</a><br />
					<p>Diplôme obtenu avec mention (grande distinction)</p>
					<p>Mémoire : <a href="doc/memoire_cv_pvr.pdf" title="Téléchargez le mémoire">"Les formes d'engagement sur Internet. Analyse sociologique de communautés virtuelles fédérées autour d'un projet commun."</a></p>
				</div></td>
			</tr>
		</table>

		<table>
			<tr>
				<td><div class="date">2002 - 2003</div></td>
				<td><div class="details">
					<h2 class="intitule">Licence en informatique et gestion</h2>
					<a href="http://www.uclouvain.be/lsm.html" title="Visitez le site de la Louvain School of Managment de l'UCL">Université catholique de Louvain</a><br />
					<p>Première candidature</p>
					</div></td>
			</tr>
		</table>

	<h3>Formations professionnelles</h3>

		<table>
			<tr>
				<td><div class="date">2008 - 2009</div></td>
				<td><div class="details">
					<h2 class="intitule">Néerlandais</h2>
					<a href="http://www.epfc-bxl.org" title="Visitez le site de l'EPFC">EPFC Bruxelles (Cours du soir)</a><br />
					<p>Certificat de niveau 3 obtenu<br />
					Niveau 4 et 5 en cours</p>
					</div></td>
			</tr>
		</table>

		<table>
			<tr>
				<td><div class="date">2008 - 2009</div></td>
				<td><div class="details">
					<h2 class="intitule">Réalisation de pages web dynamiques</h2>
					<a href="http://www.epfc-bxl.org" title="Visitez le site de l'EPFC">EPFC Bruxelles (Cours du soir)</a><br />
					<p>Apprentissage du langage PHP et JavaScript</p>
					</div></td>
			</tr>
		</table>

		<table>
			<tr>
				<td><div class="date">1996 - 1998</div></td>
				<td><div class="details">
					<h2 class="intitule">Diplôme de dactylographie</h2>
					<a href="http://www.iceberg.be/DACT_FR/Dact_Fr_FrameSet.htm" title="Visitez le site de Dact-Ecole">Dact-Ecole</a><br />
					<p>Diplôme obtenu avec mention (grande distinction)</p>
					</div></td>
			</tr>
		</table>		

</div>
</div>

<div id="footer">
	<div class="credits">Original template designed by <a href="http://www.freecsstemplates.org/preview/thespring" title="Visitez le site de Free CSS Templates">Free CSS Templates</a> - Last update : January 2009</div>
	<div class="w3c">
		<a href="http://validator.w3.org/check?uri=referer" title="Valid XHTML 1.0 Strict"><img src="img/xhtml.png" alt="Valid XHTML 1.0 Strict" height="15" width="56" /></a>
	    <a href="http://jigsaw.w3.org/css-validator/check/referer"  title="Valid CSS 2.1"><img src="img/css.png" alt="Valid CSS 2.1" />
    </a>
	</div>
</div>
</body>
</html>

Et la feuille de style pour IE :


body {
	margin: 25px 0;
	padding: 0;
	background: url(img/background.jpg) repeat-x fixed top left;
	font: normal small Tahoma, Arial, Helvetica, sans-serif;
	color: #000000;
}

form, h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
}

a {
	text-decoration: none;
	color: #000000;
}

a:hover {
	color: #4a828f;
}

/* Header */

#header {
	width: 527px;
	height: 125px;
	margin: 0 auto;
	background: url(img/header_top.jpg);
	border: 6px solid #4a828f;
	border-bottom: none;
}

/* Menu */

#menu {
	width: 527px;
	height: 40px;
	margin: 0 auto;
	padding: 0;
	background: #FFFFFF url(img/header_bottom.jpg) no-repeat;
	border: 6px solid #4a828f;
	border-top: none;
	border-bottom: none;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

#menu li {
	display: inline;
	float: left;
}

#menu a {
	display: inline;
	float: left;
	height: 29px;
	padding: 12px 21px 0 21px;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: -1px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	font-weight: bold;
	color: #000000;
	background: url(img/menu_ie.png) repeat-x;
}

#menu a:hover {
	color: #4a828f;
	background-position: bottom;
}

#menu .current {
	color: #4a828f;
	background-position: bottom;
}

/* Content */

#content {
	width: 527px;
	margin: 0 auto;
	padding: 0;
	background: #FFFFFF;
	border: 6px solid #4a828f;
	border-top: none;
}

#text {
	padding: 35px 20px 15px 20px;
}

#text .date {
	margin: 1px 10px 0 0;
	float: left;
	width: 60px;
	letter-spacing: -1px;
}

#text .details {
	float: right;
	width: 380px;
	padding: 0 0 10px 10px;
	margin: 0 30px 15px 0;
	border-left: 6px solid #4a828f;
	font-size: 12px;
	text-align: justify;
}

#text .intitule {
	font-size: 13px;
	font-weight: bold;
}

#text h3 {
	border-bottom: 1px dotted #000000;
	margin-bottom: 10px;
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: -1px;
}

#text a {
	text-decoration: underline;
	background: transparent url(img/lien.png) no-repeat bottom right;
	padding-right: 13px;
}

#text td {
	vertical-align: top;
}

#text table {
	padding-bottom: 15px;
}

/* Page d'accueil */

#text .infos {
	float: right;
	padding-left: 25px;
}

#text .infos p {
	margin-right: 10px;
	padding-bottom: 15px;
	text-align:center;
	letter-spacing: -1px;
}

#text .home {
	text-align: justify;
	padding-bottom: 15px;
}

#text .download {
	text-align: center;
	margin: 20px 0 15px 35px;
}

#text .download img {
	margin-right: 35px;
	border: none;
}

#text .download a {
	background: none;
}

/* Page de compétences */

#text .gestionprojet {
	margin-bottom: 15px;
}

#text .competences {
	float: left;
	width: 270px;
	padding: 2px 0 10px 10px;
	margin: 0 0 15px 0;
	border-left: 6px solid #4a828f;
	font-size: 12px;
	text-align: justify;
}

#text .notations {
	float: right;
	width: 100px;
	margin: 0 0 15px 0;
}

#text .notations img {
	margin-bottom: 16px;
}

/* Page de contact */

#form {
	padding: 35px 20px 30px 20px;
}

#form h3 {
	border-bottom: 1px dotted #000000;
	margin-bottom: 15px;
	font-weight: bold;
	font-size: 1.1em;
	letter-spacing: -1px;
}

#form p {
	text-align: justify;
	padding-bottom: 10px;
}

#form a {
	text-decoration: underline;
	background: transparent url(img/lien.png) no-repeat center right;
	padding-right: 14px;
}

#form .submit {
	position: relative; 
	left: 388px;
	top: 10px;
}

#linkedin {
	padding: 0 20px 15px 20px;
}

#linkedin p {
	margin-left: 10px;
}

#linkedin img {
	margin-top: 5px;
}

/* Footer */

#footer {
	width: 527px;
	margin: 5px auto;
	background: transparent;
}

#footer .credits {
	font-size: 0.8em;
	color: #4a828f;
}

#footer .credits a {
	color: #4a828f;
	text-decoration: underline;
}

#footer .w3c {
	float: right;
	margin-top: -12px;
}

#footer .w3c img {
	border: none;
}

Et voilà même la page en ligne : http://www.vanrooten.be/competences.html

Connexion

Problème de background sous IE7

Sujets conseillés

Jarick

Lien vers le commentaire

Partager sur d’autres sites

ghost

Lien vers le commentaire

Partager sur d’autres sites

Leonick

Lien vers le commentaire

Partager sur d’autres sites

captain_torche

Lien vers le commentaire

Partager sur d’autres sites

Jarick

Lien vers le commentaire

Partager sur d’autres sites

iNCiTE Web

Lien vers le commentaire

Partager sur d’autres sites

Leonick

Lien vers le commentaire

Partager sur d’autres sites

Jarick

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité