Bonjour, voici mon code :
Et voici le HTML
Voici mon problème :
J'ai un menu, et lorsqu'on survolle le menu il y a l'icone au dessus du menu qui change vers l'icone qu'aura la nouvelle page.
Pour les personnes qui n'ont pas de souris, firefox met une bordure de 2 pixels à gauche et en haut de mes icones.
Comme vous pouvez le voir dans mon code, j'ai l'icone de la page sur lequel je suis actuellement (icon_1.jpg) qui est déclaré en arrière plan sans répétitions et placé verticalement (15px) et horizontalement (0px)
Les icones qui apparaissent lors du survol sont déclaré au départ comme 1px par 1px avec overflow: none; pour qu'on ne les voient pas. Puis lors du survol elles reprennent leur taille normale et se placent par dessus l'icone de la page ouverte.
Hors voici mon problème : Pour les icones qui s'affichent lors du survol des differents éléments du menu firefox rajoute une bordure à gauche et en haut, opéra ajoute une bordure mois épaisse et IE pas de tout.
Je peux colorier la bordure de la couleur de l'arrière plan (avec color: couleur ) mais l'icone du survol se décale toujours par rapport à l'icone d'origine qui est positioné verticalement et horizontalement.
J'ai essayé plusieurs méthodes pour dire à firefox de ne pas afficher cette bordure... en déclarant #container a.gallery:hover span ave border: 0; et padding: 0; sans resultat, ensuite j'ai essayé avec outline:none; toujours rien...
Merci par avance,
Richard [code]
Modifié par wonker (24 Jun 2007 - 19:30)
#container {
position: relative;
float:left;
background-image: url(images/icon_1.jpg);
background-repeat: no-repeat;
background-position: 15px 0px;
}
#container a.gallery span {
position:absolute;
width:1px;
height:1px;
top:-1px;
left:-1px;
overflow:hidden;
}
#container ul {
list-style-type: none;
margin: 163px 0 0 0;
padding: 0px;
float: left;
}
#container a.gallery:hover span {
position:absolute;
width:142px;
height:139px;
top:0px;
left:15px;
}
#container a.gallery, #container a.gallery:visited {
display:block;
height:27px;
width:159px;
color:#BEBFB3;
text-decoration:none;
text-align:left;
background-image: url(images/square.gif);
background-repeat: no-repeat;
padding-left: 30px;
line-height: 27px;
font-size: 90%;
}
Et voici le HTML
<div id="container">
<ul>
<li>
<a class="gallery" href="news.php">NEWS
<span><img src="images/icon_2.jpg"/></span>
</a>
</li>
<li>
<a class="gallery" href="aboutus.php">ABOUT US
<span><img src="images/icon_1.jpg"/></span>
</a>
</li>
<li>
<a class="gallery" href="products.php">PRODUCTS
<span><img src="images/icon_4.jpg"/></span>
</a>
</li>
<li>
<a class="gallery" href="contact.php">CONTACT US
<span><img src="images/icon_3.jpg"/></span>
</a>
</li>
</ul>
</div> Voici mon problème :
J'ai un menu, et lorsqu'on survolle le menu il y a l'icone au dessus du menu qui change vers l'icone qu'aura la nouvelle page.
Pour les personnes qui n'ont pas de souris, firefox met une bordure de 2 pixels à gauche et en haut de mes icones.
Comme vous pouvez le voir dans mon code, j'ai l'icone de la page sur lequel je suis actuellement (icon_1.jpg) qui est déclaré en arrière plan sans répétitions et placé verticalement (15px) et horizontalement (0px)
Les icones qui apparaissent lors du survol sont déclaré au départ comme 1px par 1px avec overflow: none; pour qu'on ne les voient pas. Puis lors du survol elles reprennent leur taille normale et se placent par dessus l'icone de la page ouverte.
Hors voici mon problème : Pour les icones qui s'affichent lors du survol des differents éléments du menu firefox rajoute une bordure à gauche et en haut, opéra ajoute une bordure mois épaisse et IE pas de tout.
Je peux colorier la bordure de la couleur de l'arrière plan (avec color: couleur ) mais l'icone du survol se décale toujours par rapport à l'icone d'origine qui est positioné verticalement et horizontalement.
J'ai essayé plusieurs méthodes pour dire à firefox de ne pas afficher cette bordure... en déclarant #container a.gallery:hover span ave border: 0; et padding: 0; sans resultat, ensuite j'ai essayé avec outline:none; toujours rien...
Merci par avance,
Richard [code]
Modifié par wonker (24 Jun 2007 - 19:30)
</> )
)