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

RESOLVED INVALID

Status

()

Core
Layout: View Rendering
RESOLVED INVALID
14 years ago
14 years ago

People

(Reporter: Jude Cooks, Assigned: roc)

Tracking

Trunk
x86
Windows XP
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

14 years ago
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

Comment 1

14 years ago
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
Last Resolved: 14 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.