28220 sujets

CSS et mise en forme, CSS3

Pb avec overflow et hover

Ola everybody,

Habituellement avec les CSS, j'ai des problèmes avec IE mais là c'est clairement Firefox qui fait n'importe quoi. Je vais expliquer mon problème:
j'ai une page avec un menu des plus classiques, c'est à dire crée à partir d'une balise <ul> customisée (une des propriétés de ce menu fait apparaître un hover sur des balises <li> filles pour avoir un drop down).
Ensuite dans ma page, j'ai un <DIV> avec comme propriétés CSS:
height: 80px;
overflow: auto;
Je remplis mon div pour que le contenu dépasse les 80px.
Je lance mon petit firefox, je vais sur ma page: ma barre de scrolling vertical apparaît bien. Je passe alors ma souris sur mon menu et là "c'est le drame" (c) M6
=> il y a un espèce de "flick", c'est à dire que je retrouve une image de mon <DIV> au dessus de celui-ci, ce phénomène est très rapide (sorte de scintillement). Evidemment, c'est crade.
En revanche, pas de pb sous IE.
Après un petit tour sous google, j'ai trouvé quelques personnes qui avaient ce problème mais pas de réponses.
En espérant que quelqu'un ait déjà rencontré ce problème et l'ai corrigé.
Merci d'avance pour vos réponses.

Did

P.S.: description du problème: http://www.webmasterworld.com/forum83/6640.htm
Première fois que je poste sur ce forum. Ai je omis un truc ?
Stephan, qu'entends tu par "logguer" ?
D'habitude je ne suis pas un boulet (bon ok, un peu sur les bords, mais juste un peu Smiley cligne ).
dinedine31 a écrit :

Stephan, qu'entends tu par "logguer" ?

Identifié, connecté...
Modifié par Stephan (23 Jun 2005 - 01:06)
Bon ok j'ai trouvé mon problème !!!!!!!
Depuis que j'ai découvert le positionnement par les float, je ne fais presque çà. La structure de ma page était shématiquement:

...
<style>
 #title{ float: left; width: 100%; ...}
 #menu { float: left; width: 100%; ...}
 #content{ float: left; width: 100%; ...}

 #content div.overflowTest { height: 20px; overflow: auto; }

</style>
...

<div id="mainContainer">
  <div id="title">...</div>
  <div id="menu">...</div>
  <div id="content">
   blabla
   <div class="overflowTest"> bla blab bla bla</div>
  </div>
</div>


Avec cette structure, je me tape mon bug chaque fois que je survole mon menu (rappel: le bloc overflowTest est affiché 2 fois mais très rapidement d'où un scintillement).
Solution: si je vire float: left; dans mon bloc content, tout est OK !!!
Va comprendre Charles !!!
Désolé de vous avoir souler !
Sujet clos
Aller à