Position % pb entre Mozilla 1.5.0.5 et 1.5.0.6

Bonjour.
J'ai un petit soucis de positionnement entre les différentes versions de MozillaFirefox.
J'ai dû utiliser le code "* html" pour précisier des propriétés spécifiques à IE, cela fonctionne bien, reste à faire fonctionner la page dans les différentes versions de Mozilla.

Voici le code CSS. Faut -il que j'utilise une autre méthode pour le positionnement. Le résultat est visible ici http://www.mesimages.org/ab/index.htm et fonctionne correctement sous IE et Mozilla 1.5.0.5.

/*------------------------------------------------concerne la page index.html----------------------------------------*/
#image,#image2 {
position:absolute;
top:10%;
width:652px;
height:348px;
margin-left:-326px;
left:50%;
}

#image a {
display: block;
width:652px;
height:348px;
}

#image a:hover {	
background: transparent none;
}
/*-------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------concerne la page index.htm----------------------------------------*/

#lien_roll {
position:absolute;
top:1.5%;
left:2.7%;
width:192px;
height:42px;
text-decoration:none;
}

#lien_roll:hover #texte {
display:inline;
position:absolute;
top:50px;
left:-3px;
width:50px;
height:100px;
text-align:center;
color:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
}

#lien_roll:hover #blanc {
display:inline;
position:absolute;
top:16px;
left:384px;
width:185px;
height:110px;
background:#A77C12;
text-align:center;
filter:alpha(opacity=50);
opacity:0.5;
}

#lien_roll:hover #blanc2 {
display:inline;
position:absolute;
top:273px;
left:-15px;
width:385px;
height:62px;
background:#A77C12;
text-align:center;
color:#FFF;
filter:alpha(opacity=50);
opacity:0.5;
}

#lien_roll2 {
position:absolute;
top:6.1%;
left:61.6%;
width:186px;
height:110px;
text-decoration:none;
}

#lien_roll2:hover #texte2 {
display:inline;
position:absolute;
top:0;
left:200px;
width:73px;
height:100px;
text-align:left;
color:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
}

#lien_roll2:hover #blanc3 {
display:inline;
position:absolute;
top:-16px;
left:-384px;
width:194px;
height:44px;
background:#A77C12;
text-align:center;
filter:alpha(opacity=50);
opacity:0.5;
}

#lien_roll2:hover #blanc4 {
display:inline;
position:absolute;
top:256px;
left:-398px;
width:386px;
height:62px;
background:#A77C12;
text-align:center;
color:#FFF;
filter:alpha(opacity=50);
opacity:0.5;
}

* html #lien_roll3 {/*partie concernant envie de créer seulement pour IE*/
position:absolute;
top:56.8%;
left:17.9%;
width:384px;
height:63px;
text-decoration:none;
}

#lien_roll3 {/*partie concernant envie de créer seulement pour IE*/
position:absolute;
top:60.2%;
left:18.3%;
width:384px;
height:63px;
text-decoration:none;
}

#lien_roll3:hover #texte3 {
display:inline;
position:absolute;
top:70px;
left:170px;
width:223px;
height:90px;
text-align:right;
color:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
}

#lien_roll3:hover #blanc5 {
display:inline;
position:absolute;
top:-273px;
left:14px;
width:194px;
height:42px;
background:#A77C12;
text-align:center;
filter:alpha(opacity=50);
opacity:0.5;
}

#lien_roll3:hover #blanc6 {
display:inline;
position:absolute;
top:-258px;
left:398px;
width:186px;
height:112px;
background:#A77C12;
text-align:center;
color:#FFF;
filter:alpha(opacity=50);
opacity:0.5;
}

* html #lien_roll4 {/*partie concernant ab exhibitions seulement pour IE*/
position:absolute;
top:34.9%;
left:36.1%;
width:262px;
height:69px;
text-decoration:none;
}

#lien_roll4 {/*partie concernant ab exhibitions seulement pour mozilla*/
position:absolute;
top:36.8%;
left:36.3%;
width:262px;
height:69px;
text-decoration:none;

}

#lien_roll4:hover #texte4 {
display:inline;
position:absolute;
top:50px;
left:230px;
width:150px;
height:100px;
text-align:center;
color:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
}

#lien_roll4:hover #blanc7 {
display:inline;
position:absolute;
top:-127px;
left:214px;
width:187px;
height:110px;
background:#A77C12;
text-align:center;
filter:alpha(opacity=50);
opacity:0.5;
}

#lien_roll4:hover #blanc8 {
display:inline;
position:absolute;
top:130px;
left:-182px;
width:385px;
height:62px;
background:#A77C12;
text-align:center;
color:#FFF;
filter:alpha(opacity=50);
opacity:0.5;
}

#lien_roll4:hover #blanc9 {
display:inline;
position:absolute;
top:-143px;
left:-170px;
width:195px;
height:42px;
background:#A77C12;
text-align:center;
color:#FFF;
filter:alpha(opacity=50);
opacity:0.5;
}

#lien_roll:hover,#lien_roll2:hover,#lien_roll3:hover,#lien_roll4:hover {
background:none;
}

#lien_roll #texte,#blanc,#blanc2,#lien_roll2 #texte2,#blanc3,#blanc4,#lien_roll3 #texte3,#blanc5,#blanc6,#lien_roll4 #texte4,#blanc7,#blanc8 {
display:none;
}

D'avance merci pour vos remarques et corrections;

Salut, si je peux donner un simple conseil, c'est de reprendre ton HTML, de mettre un DOCTYPE, de virer toutes les balises center, de tout passer au validateur et ensuite, de commencer à travailler.

Bon courage, A+ et en cas de questions, n'hésite pas

Bonjour,

Hum... Valider, oui, bien-sûr.

Mais encore avant cela, il faudrait que cette page ait un contenu. Pour l'instant, son contenu réel est:

a écrit :
Communication audiovisuelle Le salon de tous
les travaux d'aiguilles
Salons des loisirs créatifs
Amiens • Besançon • Annecy La société

Le nom de la société, par exemple, est donc en fait totalement absent de la page

Rappel: les images d'arrière-plan CSS ne sont pas du contenu et ne servent pas à gérer du contenu. Pour le contenu, il y un élément img avec une alternative textuelle alt
Modifié par Laurent Denis (25 Aug 2006 - 15:15)