Overflow:visible makes elements ovelap

GoogleCodeExporter commented 8 years ago

What steps will reproduce the problem?
1. Markup an unordered list
2. In <head>, set CSS property "overflow" to "visible" for list items

What is the expected output? What do you see instead?
Expected: An unordered list, one item beneath the other.
I see: All items on the same row, as if they all were
"position:absolute;top:0;left:0;". The same in MSIE 5.55-7. (IE8.js
generates errors in MSIE5.01, btw)

What version of the product are you using? On what operating system?
.../trunk/lib/IE8.js
WinXPSP2

Please provide any additional information below.

This is a copy-paste setup:

<!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" xml:lang="en" lang="en" />
<head>
  <!--[if lt IE 8]>
  <script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE8.js"
type="text/javascript"></script>
  <![endif]-->
  <style type=text/css><!--
    li{overflow:visible;}
  --></style>
</head>
<body>
  <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  </ul>
</body>
</html>

Original issue reported on code.google.com by svar...@gmail.com on 8 Apr 2008 at 2:06

GoogleCodeExporter commented 8 years ago

I can confirm this issue.  Here is another test case, with DIVs instead of list 
items.

<!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" xml:lang="en" lang="en" />
<head>
  <!--[if lt IE 8]>
  <script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE8.js"
type="text/javascript"></script>
  <![endif]-->
  <style type=text/css><!--
    /* overflow:visible overlapping test */

    div.visible { overflow: visible; }
    div.hidden { overflow: hidden; }

    /* float clearing test*/

    div.floatContainer { background: #999; overflow: hidden; }
    div.float { background: red; float: left; }
  --></style>
</head>
<body>

  <h4>overflow: visible is broken (ie6/ie7):</h4>
  <div id="thing" class="visible">First div!</div>
  <div class="visible">SECOND DIV</div>

  <br /><br /><br />

  <h4>overflow: hidden is OK (ie6/ie7):</h4>
  <div class="hidden">First div, auto!</div>
  <div class="hidden">SECOND DIV, auto!</div>

</body>
</html>

Original comment by geo...@gmail.com on 27 Jan 2009 at 8:22

GoogleCodeExporter commented 8 years ago

Original comment by dean.edw...@gmail.com on 12 Feb 2010 at 2:40

Changed state: Accepted

GoogleCodeExporter commented 8 years ago

[deleted comment]

GoogleCodeExporter commented 8 years ago

[deleted comment]

GoogleCodeExporter commented 8 years ago

If you just want this bug to be repaird as quick and dirty possible simple 
comment out the block of this function in the source file (search and find in 
IE9.js) 

IE7.CSS.addRecalc("overflow", "visible", function(element) {
/*

...

*/

The next obvious step for me was to take the whole src file script copy and 
paste it into google closure (the best javascript minifier and obfuscator in 
the world) http://closure-compiler.appspot.com/home and compile it.

By this you even save 5 kb file size to the original compressed file. (37kb)

have fun,
don't take everything for granted!

Original comment by dominik....@gmail.com on 17 Aug 2010 at 4:03

Nimther / ie7-js

Overflow:visible makes elements ovelap #65