Divers problèmes en mode strict

Après des heures perdues dans le néant dans un code qu'on ne cesse de modifier pour tenter de faire fonctionner et rendre compatible, on finit par se décourager et avoir envie de tout laisser tomber. Je suis arrivé ici avec 5-6 problèmes et j'en ai maintenant une quinzaine. Le site en question est régulièrement visité par une trentaine de visiteurs et je me dois de le rendre à 100% fonctionnel au plus vite. Pas besoin de faire un dessin... et c'est là que je fais appel à vous.

J'ai créé un sous-dossier pour régler tous ces bugs dans le mode strict, comme on me l'a recommandé. http://www.pepes.ca/new/

Tout dépendamment du navigateur utilisé, les bugs sont nombreux, mais on ira les uns à la suite de autres. D'abord, sous Firefox, le header déraille totalement. Voici un extrait raccourci du code en question (la méthodologie a été appliquée à la lettre) :

#b {
	position: relative;
	display: block;
	width: 35px;
	height: 35px;
}

#b span {
	display: none;
	top: 195px;
	left: 510px;
	border: 0;
	width: 255px;
	background: #000000;
	font-weight: bold;
}

#b span { color: #4B3273; }

#b:hover { 
	color: #4B3273;	
	background: none; /* correction d'un bug IE */
	z-index: 500; 
}

#b { background-image: url('../images/header_06.gif'); }
#b:hover { background-image: url('../images/header_hover_06.gif'); }
#b:hover span { display: inline; 
	position: absolute; }

		<div id="header">
			<table width="711" height="221" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td colspan="12"><img src="images/header_01.gif" width="710" height="68" alt=""></td>
					<td><img src="images/spacer.gif" width="1" height="68" alt=""></td>
				</tr>
				<tr>
					<td colspan="3" rowspan="4"><img src="images/header_05.gif" width="173" height="54" alt=""></td>
					<td rowspan="2"><a href="?p=alim" id="b"><span>Alimentation Claudin Dassylva</span></a></td>
					<td colspan="6"><img src="images/header_07.gif" width="396" height="26" alt=""></td>
					<td><img src="images/spacer.gif" width="1" height="26" alt=""></td>
				</tr>
			</table>
		</div>

Pour le bien de la cause, je n'illustre que le cas "b", mais il y a 6 images (a, b, c, d, e, et f) cliquables, soit la bière et les 5 buts. Le but est relativement simple : au passage de la souris sur un but, un texte (infobulle) s'affiche en position absolue par-dessus le "Passez votre souris sur un but !". Il faut noter que l'image change également (rollover), ce qui explique l'emploie des backgrounds.

Il y a deux problématiques : d'abord, la correction du bug d'IE avec le background:none; empêche le rollover de fonctionner; deuxièmement, de la façon dont c'est programmé, je suis incapable de faire afficher le <span> dans une position absolue (il semble bloqué à une position relative?).

Sous Firefox, le tout s'affiche mal. La problématique semble venir de la propriété line-height puisque je réussie à réduire les espaces noirs à une hauteur de 1px en mettant le line-height à 0 (le pixel qui reste est cependant encore de trop…).

Merci beaucoup d'avance,
D@n!eL_
Modifié par D@n!eL_ (30 Jun 2008 - 08:42)

Hello Daniel ,

dans ton précédent message je t'invitais surtout à mettre un DOCTYPE !

Par contre il ne s'agit pas forcément de mettre un XHTML Strict sur une page qui a déjà été rédigée en "free html" car dans ce cas tu vas te retrouver avec une foultitude d'erreurs !

Un tel DOCTYPE se prévoit à l'avance puisqu'il oblige à séparer le contenu de la mise en page donc dans ton cas tu pourrais commencer par un HTML 4.01 Transitional.

Rien ne t'empêche plus tard de réécrire ta page avec un DOCTYPE plus "Strict".

A+

D'accord, j'ai mis HTML 4.01. Ça ne règle cependant aucun de mes bogues. Quelqu'un a une idée pour ce rollover avec infobulle absolue ?