Closed Bug 281667 Opened 20 years ago Closed 20 years ago

:hover and "overflow:auto" divs conflict

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Version:
1.0 Branch
Platform:
x86
Linux
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED WORKSFORME

People

(Reporter: nayco, Assigned: bugzilla)

Details

Attachments

(1 file)

Minimized testcase
1.55 KB, text/html
Details 
User-Agent:       Mozilla/5.0 (X11; U; Linux i686; fr-FR; rv:1.7.5) Gecko/20041108 Firefox/1.0
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; fr-FR; rv:1.7.5) Gecko/20041108 Firefox/1.0

Consider the following code, take mostly care of the two DIVs (Classes "menu"
and "report_page") and the two CSS declarations at the end of the CSS section.
Then try the code (Hover the two menu items), and comment the "overflow: auto"
in the source (At the end of the "style" section). try again, enjoy... More
infos in the code's comments.

<Test.html--------------

<!--
   This file is a bug-report for Mozilla Firefox 1.0 (1), bug I found
  while coding a page including a list-based CSS Dropdown menu. The
  thing is that when hovering a menu, it disappears when leaving the
  containing element (The "div.menu" here) if the latter is followed
  by a sibling for which the CSS "overflow" statement is set to "auto".
  
   Well, I dunno if this is really a bug...
   
   
  (1)Mozilla/5.0 (X11; U; Linux i686; fr-FR; rv:1.7.5) Gecko/20041108 Firefox/1.0
-->

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Firefox CSS Bug ?</title>
    <style type="text/css">
    
/* Here begins the CSS code. The problem is documented
  at the end of this style section.
*/
div.menu h2 {
  display: none;
}
div.menu > ul {
  padding: 2px;
  display: inline;
}

div.menu > ul > li {
  position: relative;
  cursor: pointer;
  color: #BBBBBB;
  padding: 0px 4px 0px 4px;
  margin: 2px;
  text-align: center;
  display: inline;
}
div.menu > ul > li:hover {
  border: solid 1px #7ddca1;
  background: #DDFFEE;
  margin: 1px;
  color: #7ddca1;
}

div.menu ul > li > ul {
  border: 1px solid #BBBBBB;
  position: absolute;
  background: white;
  list-style: none;
  display: none;
  top: 1.2em;
  left: 0.1em;
  z-index: 2;
  margin: auto;
  padding: 0px;
  width: 20em;
}
div.menu ul > li > ul > li {
  padding: 2px;
  text-align: left;
}
div.menu > ul > li:hover > ul {
  display: block;
  left: 0;
  padding: 1px;
}
div.menu > ul > li > ul > li:hover {
  border: solid 1px #7ddca1;
  background: #DDFFEE;
  padding: 1px;
}
div.menu a{
  text-decoration: none;
  color: #BBBBBB;
}
div.menu li:hover> a{
  color: #7ddca1;
}

/* Here are the problematic declarations... Comment
  either one and everything will return fine.
   In fact, the REAL problem is the "overflow: auto"
  statement below... Commenting it is the _good_ way.
   Is it a bug ? A feature ? Me not understanding the
   boxing model ? Konqueror hasn't got this problem...
*/

div.menu{
  padding: 2px;
  height: 1.5em;
  background-color: #F5F5F5;
  border-bottom: #BBBBBB 1px solid;
}
div.report_page{
  padding-top: 5px;
  //overflow: auto;  /* Comment THIS line ;) */
}

/* End CSS code */

    </style>
  </head>
  <body>   
    <div class="menu">

      <h2>Menu</h2>
      <ul>
        <li id="menu_general">
          Général
          <ul>
            <li>
              <a href="index.php" title="Aller à l'accueil">Accueil</a>
            </li>

            <li>
              <a href="index.php?section=help">Aide</a>
            </li>
            <li>
              <a href="index.php?section=help">Ligne vachement longue, trop
grave !</a>
            </li>
          </ul>
        </li>

        <li id="menu_reports">
          Rapports
          <ul>
            <li>
              <a href="index.php?section=report" title="Consulter les rapports
généraux">Rapports Généraux</a>
            </li>
	    <li>
              <a href="index.php?section=report" title="Consulter les rapports
généraux">Rapports Généraux</a>

            </li>
	    <li>
              <a href="index.php?section=report" title="Consulter les rapports
généraux">Rapports Généraux</a>
            </li>
	    <li>
              <a href="index.php?section=report" title="Consulter les rapports
généraux">Rapports Généraux</a>
            </li>
          </ul>

        </li>
      </ul>
    </div>
    <div class="report_page">
      <p>
        Hover the above menus... The comment the <code>overflow: auto;</code>
line in the source of this page and try again. Bug ? Feature ? ;)
      </p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis...
    </div>

  </body>
</html>

---------------/Test.html>



Reproducible: Always

Actual Results:  
The menus disappear when leaving the "menu" div (They shouldn't), when this div
is followed by another div which has "overflow:auto")

Expected Results:  
It should do what it does when "oveflow:auto" is commented. (Ie. display the
menus when hovering them, on all their surface)

It works with Konqueror, but this may not help. Is this really a bug, or I have
missed something in the boxing model ?
I forgot: This is reproductible on both GNU/Linux and Windows (2000 server here).
Version: unspecified → 1.0 Branch
Attached file Minimized testcase — 
This testcase shows the problem and compares to overflow: hidden. Destroys page
http://www.timpelen.com/.
Also happens on Windows XP - Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; 
rv:1.7.5) Gecko/20041107 Firefox/1.0.
The search feature works!  I was going to report the exact same bug.  I have a
demo for the people investigating the bug.

My tables on my demo have a class with this defined "overflow: auto".  When the
dropdown menu is used (the "2004 season" item), the menu only works from Weeks 1
through Weeks 7.  When you try to select Week 8 or any link below that, the menu
disappears.  I'm guess the hover property classes with the "overflow: auto"
property.

    doesn't work:
http://www.marino.st/revolution/statics/fantasy_schedule.php?skin=GorbGreenII&override_gecko=true
    
I currently have a workaround set where PHP detects a gecko browsers and changes
the table class to "overflow: hidden".  As you can see with the same exact page,
the menu now works.  The url variable "override_gecko" turns off the workaround.

    works:
http://www.marino.st/revolution/statics/fantasy_schedule.php?skin=GorbGreenII

Use the above link with Opera - it works just fine.  This should help confirm
the status of this report as a bug.  I discovered this 2 days ago, about the
same time as the original poster.
I ran into this too. It's not Firefox-specific as it happens on Netscape 7 and Mozilla, but does seem to 
be Gecko-specific as Konq/Safari are fine. My menuing code doesn't work on Opera or IE yet.
Test case at http://student.santarosa.edu/~dturover/case/281667.html
overflow: scroll has the same problem; inherit, visible, and hidden are fine. Also, the menu div stays 
alive when you are over the main section's border. It doesn't disappear until you're over the main 
section's padding or content box.
This bug looks like a dupe of bug 184077 and bug 234788. 234788 is said to be
fixed in the trunk. Someone check this.
Both this bug and bug 234788 work OK in Mozilla/5.0 (Windows; U; Windows NT 5.
1; en-US; rv:1.8b) Gecko/20050217.
Yeah, this has been fixed on trunk for a while now.
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: