CSS sous mozilla

Bonjour les zéros,
Comme d'hab. j'ai encore des problèmes. Mais cette fois avec le CSS
Voici le lien vers le site dont le design est en construction ( c'est un petit site simple pour commencer - il est trop simple ton site! Ben oui, tant que je ne résouds pas mes problèmes de CSS je reste à ce stade, c'est évident!):
http://vinciane3d.ifrance.com/
J'ai dû rien comprendre au CSS parceque j'ai des problèmes à la tonne. Je devrais les vendre sur le marché.
Sur Internet Explorer, ça va à peu près. Sur Mozilla c'est une catastrophe.
Cela concerne ma barre de menu du site.
Voici le code XHTML des liens de la page index.php:

<div id="menu_index">
<a href="index.php?lapage=mon_profil"><img src="youp_vert.jpg" alt="youp" width="44" title="vers CV"/><span class="travaux">MON CV</span></a>
<a href="index.php?lapage=travaux2d_3d&requete=1"><img src="youp_rouge.jpg" alt="youp" width="44" title="vers travaux 2D"/> <span class="travaux">MES TRAVAUX 2D</span></a>
<a href="index.php?lapage=travaux2d_3d&requete=2"><img src="youp_orange.jpg" alt="youp" width="44" title="vers travaux 3D"/> <span class="travaux">MES TRAVAUX 3D</span></a>
<a href="index.php?lapage=travaux2d_3d&requete=3"><img src="youp_violet.jpg" alt="youp" width="44" title="vers vidéos 3D"/> <span class="mesvideos"> MES VIDEOS</span></a>
<a href="index.php?lapage=vinciane_livre_or"><img src="youp_bleu.jpg" alt="youp" width="44" title="vers Livre d'Or"/> <span class="livreor"> LIVRE D'OR</span></a>
<a href="index.php?lapage=vinciane_administration_formulaire"><img src="youp_jaune.jpg" alt="youp" width="44" title="vers ma Page Administration"/><span class="administration"> ADMINISTRATION</span></a>
</div>

voici maintenant le code CSS correspondant:

#menu_index
{

margin-left: 150px;
margin-top: 7px;
}

#menu_index a img
{
margin: 0px;
border-color: #c6c4e3 ;

}

.moncv
{
font-family:"Times New Roman", Georgia , "Courier New", Arial ;
font-size: 65% ;
color: #471035 ;
text-decoration: none;
font-weight: bold;
position: relative ;
left: -72px;
top: 2px;

}

.travaux
{
font-family:"Times New Roman", Georgia , "Courier New", Arial ;
font-size: 65% ;
color: #471035 ;
text-decoration: none;
font-weight: bold;
position: relative ;
left: -72px;
top: 2px;

}

.mesvideos
{
font-family:"Times New Roman", Georgia , "Courier New", Arial ;
font-size: 65% ;
color: #471035 ;
font-weight: bold;
text-decoration: none;

position: relative ;
left: -65px;
top: 2px;

}

.livreor
{
font-family:"Times New Roman", Georgia , "Courier New", Arial ;
font-size: 65% ;
color: #471035 ;
font-weight: bold;
text-decoration: none;

position: relative ;
left: -60px;
top: 2px;

}

.administration
{
text-decoration: none;
font-family:"Times New Roman", Georgia , "Courier New", Arial ;

font-size: 65% ;
color: #471035 ;
font-weight: bold;

position: relative ;
left: -65px;
top: 2px;
}

Les problèmes principaux rencontrés:
:colere2:

Sous IE, sous les liens ( petites icones de grenouille ) vous pouvez constater la présence de petites barres bleues inexpliquées. Elles existent aussi sous Mozilla.
:colere2:

Sous IE et sous Mozilla, les icones grenouilles sont espacées naturellement comme ci j'y avais mis un

margin: 10px;

or ce n'est pas le cas. De fait, je n'arrive pas à espacer mes icones de façon égale.
:colere2:

Bien sûr, le clou du spectacle, sous Mozilla Firefox, j'ai un soulignement sous chaque mot de chaque icone grenouille et je n'arrive pas à m'en défaire.
Réponse attendue: tu n'as qu'à faire

text-decoration: none;

Ben oui mais non! Puisque c'est déjà fait et pour preuve, je n'ai plus ce problème sur IE. Mais Mozilla fait la sourde oreille ( à beaucoup de choses d'ailleurs )
J'en profite aussi pour poser cette question:
Des class sous des id comme

<div id="blabla">
< h1 class="pouet">POUET POUET</h1>
</div>

C'est possible?
Merci d'avance à ceux qui voudront m'aider parceque sinon je deviens plombier ( j'aurais préféré pilote d'avion )

J'ai bien écouté vos conseils à toutes les deux! J'ai sauté de joie et il a fallu cinq pompiers pour me décrocher la tête du plafond! CA MARCHE!! Et je ne suis même plus ennuyé par la petite barre bleue. Par contre, l'espacement incompréhensible n'est pas dû au margin. En constatant que les "padding" et les "margin" n'étaient pas impliqués j'ai soudain eu le déclic. Au départ j'avais mis des

position: relative ;
left: valeurpx;
top: valeurpx;

sans lesquelles chaque image prend avec le texte une place considérable. La

position: relative

resserre l'image et son texte dans un espace réduit de façon virtuelle. Le CSS ne prend pas en compte cette réduction de l'espace que prend le texte. Même si celui-ci est serré contre l'image en apparence, réellement le texte et l'image s'étalent et cela produit l'effet d'écarter les icones entre elles. J'ai donc eu l'idée d'utiliser

float: left;

afin de détacher le texte des icones pour résoudre ce problème et ... ça marche aussi

EN FAIT TOUT MARCHE MAINTENANT !

FUTASELA

3 novembre 2006 à 11:15:54

xbb

3 novembre 2006 à 11:37:07

Pour les espacements, remets les margin et padding à 0, pour les soulignements, il faut le text-decoration : none pour la balise <a> (et non le span qu'elle contient), et oui, tu peux imbriquer des class dans des id

Karista