28173 sujets

CSS et mise en forme, CSS3

Tout d'abord, vu que c'est mon premier post sur ce forum (qui m'a été oh combien utile...encore merci à vous tous) je tenais à vous saluer. Donc bonjour à tous ^^

Voila j'ai un soucis avec ce code qui marche parfaitement sous FF mais fonctionne à moitié sous IE (plus d'effet 'rollover' sur les images). Voici un lien pour pouvoir visionner la page en question (faite le test vous verrez ce que je désire obtenir, que FF m'offre, mais que IE refuse de faire) : http://www.app-i.net/temp/accueil.php
Je m'en sors pas et ca me rend dingue, je crois avoir tout tenté mais comme je ne suis pas le plus callé du monde en CSS (loin de la) je me dis qu'avec le nombre de génies trainant sur ce forum j'aurais peut être une solution.
Ah oui, j'allais oublier, voici le code en uestion :
<html>
<head>
<title>:: App-i :: Société de maintenance et de services informatiques sur Site (à Domicile)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
#zone1 {    /* zone cliquable */
float: left;
width : 217px;
height: 12px;
margin-left: 40px;
margin-top: 35px;
}
#zone2 {    /* zone cliquable */
float: left;
width : 247px;
height: 12px;
margin-left: -225px;
margin-top: 33px;
}
#zone3 {    /* zone cliquable */
float: left;
width : 217px;
height: 12px;
margin-left: 40px;
margin-top: 40px;
}
#zone4 {    /* zone cliquable */
float: left;
width : 247px;
height: 12px;
margin-left: -220px;
margin-top: 40px;
}
a.accueila
{
display: block;
width: 653px;
height: 137px;
background-image: url(images/accueil1.gif);
background-repeat: no-repeat;
}
p.accueilb
{
display: block;
width: 653px;
height: 75px;
background-image: url(images/accueil2.gif);
background-repeat: no-repeat;
}
p.accueilc
{
display: block;
width: 653px;
height: 145px;
background-image: url(images/accueil3.gif);
background-repeat: no-repeat;
}
a.accueila:hover
{
width: 653px;
height: 137px;
background-image: url(images/accueil12.gif);
}
p.accueilb:hover
{
width: 653px;
height: 75px;
background-image: url(images/accueil22.gif);
}
p.accueilc:hover
{
width: 653px;
height: 145px;
background-image: url(images/accueil32.gif);
}
</style>
</head>

<body>
<img src="images/accueil12.gif" style="display:none" alt="Particuliers">
<img src="images/accueil22.gif" style="display:none" alt="Professionnels">
<img src="images/accueil32.gif" style="display:none" alt="Associations">

 <table width="653"  border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FAFAFA">
  <tr><td width="653" height="137" align="center" valign="top">
  
		  <a class="accueila" href="/particuliers" title="Accès au site pour les particuliers"></a>
		</td>
  </tr>
  <tr>
    <td width="653" height="75" align="center" valign="top" >
				     <p class="accueilb"><a id="zone1" href="/Pro" title="Site pour les Professionnels de moins de 5 postes informatiques"></a><br>
		<a id="zone2" href="/Professionnels" title="Site pour les Professionnels de plus de 5 poste informatiques"></a></p></td>
  </tr>
  <tr>
    <td width="653" height="145" align="center" valign="top">
		<p class="accueilc"><a href="/Asso" id="zone3" title="Site pour les Associations de moins de 5 postes informatiques"></a><br>
		<a href="/Associations" id="zone4" title="Site pour les Associations de plus de 5 postes informatiques"></a></p></td>
		  </tr>
  <tr>
    <td align="center" valign="top">
<img src="images/accueil4.gif" width="650" height="135" border="0"/></td>
  </tr>
</table>
</body>
</html>


Merci par avance de votre aide ! Smiley ravi
Merci beaucoup de répndre.

Alors j'ai ajouté un DOCTYPE en suivant les conseils de ton lien.
Voici maintenant ma nouvelle entête (la suite reste inchangée):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>:: App-i :: Société de maintenance et de services informatiques sur Site (à Domicile)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


Cependant ca ne change malheureusement rien, IE refuse toujours d'afficher la page comme FF... Mais Keskispasse ?? Smiley biggol
Bon j'ai tout tenté dans les DOCTYPE et rien à faire, IE refuse d'afficher correctement mon code. Je suis sûre que c'est un détail tout bête mais lequel je ne sais point. Smiley bawling
J'en peux vraiment plus, j'ai esayé des tonnes de méthodes pour avoir ce résultat, et quand c'est pas IE qui n'affiche pa correctement la page c'est FF Smiley sweatdrop .
Je ne sais pas comment est organisée ta page et dans quelles conditions ce qui devrait s'afficher ne s'affiche pas, mais à priori IE ne sait pas gérer le pseudo-élément :hover sur autre chose qu'une balise a. Est-ce que ton problème ne viendrait pas de là (tentative d'affichage d'un élément quand tu passes sur un p) ?
Si tout à fait, le problème vient de là ^^
J'ai mis du temps à trouver mais c'est ca !
En fait il existe deux solutions pur rendre le code compatible : JS et un hack appelé IE7.

Merci