extra strip is added at the bottom when using a table and two divs

RESOLVED INVALID

Status

()

Core
Layout: Tables
RESOLVED INVALID
13 years ago
4 years ago

People

(Reporter: Jeroen, Unassigned)

Tracking

({testcase})

Trunk
x86
All
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(4 attachments)

(Reporter)

Description

13 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1

With the following code Firefox (1.0.1 WinXP) shows an extra strip of body at
the bottom of the page that is always the height of "div1". I think it shouldn't
be there. Opera and IE don't show this strip.

Is this a bug or a feature?

---------
<html><head>
<style>
body{
  background-color:#FF0000;
  }
table.main{
  background-color:#BBBBBB;
  width:100%;
  height:1000px;
  }
#td2{
  background-color:#888888;
  width:500px;
  }
#div1{
  background-color:#444444;
  height:100px;
  }
#div2{
  background-color:#666666;
  height:100%;
  }
</style></head><body>

<table class=main >
<tr>
<td>td1</td>
<td id=td2 valign=top>

<div id=div1>div1</div>
<div id=div2>div2</div>

</td>
<td>td3</td>
</tr>
</table>
</body></html>


Reproducible: Always

Steps to Reproduce:
1. na
2. na
3. na

Actual Results:  
extra strip at the bottom of the page

Expected Results:  
no extra strip at the bottom of the page

Comment 1

13 years ago
Created attachment 178002 [details]
Testcase #1 (quirks)

Comment 2

13 years ago
Created attachment 178003 [details]
Testcase #2 (strict)

Updated

13 years ago
Keywords: testcase
OS: Windows XP → All
Whiteboard: DUPEME
(Reporter)

Comment 3

13 years ago
Created attachment 178031 [details]
<div> with 100% height also behaves strange inside another <div>

<div> with 100% height also behaves strange inside another <div>

The bottom div won't show and it's text is showed directly in the body
(Reporter)

Comment 4

13 years ago
Created attachment 178032 [details]
The same behaviour is exhibited when the height of div2 is 1000px instead of 100%

Both testcases are tested with quirky and strict mode.
(Reporter)

Comment 5

13 years ago
The problem whas that I used "height" instead of "min-height"...

The solution:

//height:1000px;  /* this is necessary for IE */
min-height:1000px;

Status: UNCONFIRMED → RESOLVED
Last Resolved: 13 years ago
Resolution: --- → INVALID

Updated

4 years ago
Whiteboard: DUPEME
You need to log in before you can comment on or make changes to this bug.