28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je fais appel à vos regards neufs pour m'aider à trouver ce qui cloche dans mon menu avec un effet de rollover. (les chiffres blancs deviennent verts au survol de la souris).

http://charlotte.flibuste.net/sites/stefandefago/page2.html

Celui-ci est construit sur une grille de 168 x 81 px, et il comprend 20 liens de 24 x 19 px.

Tout allait pour le mieux jusqu'à ce que je le regarde sous IE windows :
On dirait qu'il agrandit la zone de mes liens. Quand je passe la souris sur un lien ils sont 4 à devenir vert.

Je cherche je cherche, mais je ne comprend toujours pas, et c'est moi qui commence à devenir verte.

Merci de votre aide !

Charlotte

----------------------------------------------------------------

voici le code HTML

<div class="menu">
    <div class="thumb">
       <ul>
	<li id="th1">
	  <a href="../01.html"><span>image 1</span></a>
	</li>

	<li id="th2">
	  <a href="../02.html"><span>image 2</span></a>
	</li>

[...]

 </ul>
    </div>
 </div>


voici la css :


/*-----------lien thumbnail-------*/
.thumb{
        position: absolute;
        top:30px;
        left: 103px;
        height: 130px;
        width: 168px;
        background: transparent url(../images/thumb.jpg) no-repeat 0px 6px;

        }
/*---rollover---*/
.thumb ul{  
             height: 81px;
             width: 168px;      
             margin: 6px 0 0 0; 
             padding: 0;
             position: relative; 
             }

.thumb span { visibility: hidden; }

.thumb li {
            margin: 0; 
            padding: 0; 
            list-style: none; 
            position: absolute;           
            }

.thumb li, .thumb a { 
                      height: 19px; 
                      width: 24px;
                      display: block;
                      }

/*---ligne 1----*/
#th1 { left: 0px; top: 0px;} 
#th1 a:hover {background: transparent url(../images/thumb.jpg) -168px 0px no-repeat;}

[...]
Bonjour,

C'est bien compliqué tout ça! Pourquoi ne pas le réaliser simplement par des liens texte ?

Bon sinon, regarde du côté de :

.thumb li, .thumb a { 
                      height: 19px; 
                      width: 24px;
                      display: block;
                      }


24 par 19px correspond à la zone de ton problème sous IE, il ya sûrement une relation cause à effet.