Closed Bug 257172 Opened 20 years ago Closed 20 years ago

Firefox/Mozilla does not inheret CSS height element for nested div

Categories

(Core :: Web Painting, defect)

Product:
Core
Component:
Web Painting
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: ubuntu, Assigned: roc)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.2) Gecko/20040826 Firefox/0.9.1+
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.2) Gecko/20040826 Firefox/0.9.1+

If you set the height (using inline CSS, external stylesheet, etc.) for the
external div to 10, and set the internal div's height to 15, Firefox/Mozilla
incorrectly displays the code.  IE will display this correctly, using the 15 for
the height.

Here's the sample code:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
	#nestedbox
	{
		position: relative;
		width: 170px;
		height: 10px;
		border: solid #990000 1px;
		background-color: #ffffff;
		font-family: arial, helvetica, sans-serif;
		font-size: 10px;
		color: #000000;
		text-align: left;
	}
	#topnestedbox
	{
		position: relative;
		width: 170px;
		height: 15px;
		border: solid #000000 0px;
		background-color: #990000;
		font-family: arial, helvetica, sans-serif;
		font-size: 16px;
		color: #ffffff;
		text-align: left;
		text-indent:5px;
	}

</style>

</head>
<body>

<div id="nestedbox">


<a href="" style="color:white;cursor:move;"><div id="topnestedbox">Link 1<div
style="position:absolute;left:150px;">+</div></div></a>

</div> <div id="nestedbox">


<a href="" style="color:white;cursor:move;">
<div id="topnestedbox">Link 2<div style="position:absolute;left:150px;">
+</div></div></a>


</div>
<div id="nestedbox">


  <a href="" style="color:white;cursor:move;">
<div id="topnestedbox">Link 3<div style="position:absolute;left:150px;">
+</div></div></a>

</div>
<div id="nestedbox">


  <a href="" style="color:white;cursor:move;">
  <div id="topnestedbox">Link 4<div
style="position:absolute;left:150px;">+</div></div></a>


</div>
<div id="nestedbox">


  <a href="" style="color:white;cursor:move;">
<div id="topnestedbox">Link 5<div style="position:absolute;left:150px;">
 +</div></div></a>

</div> <div id="nestedbox">


  <a href="" style="color:white;cursor:move;">
<div id="topnestedbox">Link 6<div style="position:absolute;left:150px;">
 +</div></div></a>

</div>
<div id="nestedbox">


<a href="" style="color:white;cursor:move;"> <div id="topnestedbox">Link 7<div
style="position:absolute;left:150px;">+</div></div></a>

</div> <div id="nestedbox">


<a href="" style="color:white;cursor:move;">  <div id="topnestedbox">Link 8<div
style="position:absolute;left:150px;">+</div></div></a>


</div>

Reproducible: Always
Steps to Reproduce:
1. Use different heights for nested divs
2. Load the page in IE and watch how it uses the larger size
3. Load the page in FX/Mozilla and see how it attempts to use both sizes (and
displays wrong)

Actual Results:  
Nested divs are displayed incorrectly.

Expected Results:  
Used the larger height for both divs
What Mozilla is doing is correct, per the spec.

Height is an absolute.  You set the height to X, that's the height you get.  IE
treats height like min-height, and expands to accomodate content that is too
large for the stated size.

That is incorrect per the spec and an IE bug.
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID
Component: Layout: View Rendering → Layout: Web Painting
You need to log in before you can comment on or make changes to this bug.