Closed Bug 67903 Opened 24 years ago Closed 21 years ago

Iframe height attribite that uses % is not functioning in XHTML

Categories

(Core :: Layout: Images, Video, and HTML Frames, defect)

defect
Not set
major

Tracking

()

RESOLVED INVALID
Future

People

(Reporter: chrispetersen, Assigned: john)

References

Details

(Keywords: testcase, xhtml)

Attachments

(3 files, 1 obsolete file)

Build: 2001020608
Platform: All
Expected result: Height of iframe , which has been assigned a %, should render
correctly.

What I got: The iframe isn't rendered at the specified size.

Steps to reproduce:

1) For a comparsion, open the HTML file that uses iframe. It has been specified
a height of 20 %

2) Resize window (horizontally)  and notice the iframe resizes accordingly.

3) Now, open the XML file with the same iframe specified.

4) Notice two things:

The iframe's height is larger than 20 % and resizing the browser window doesn't
affect it's size.
Keywords: xhtml
Sending frame(set) bugs to HTMLFrames component: these are related to XHTML, but
I believe the fix must go into other code than XML. The owner of that code is
better equipped to fix this.

If you find this should be fixed in XML code send this back to me.
Assignee: heikki → pollmann
Component: XML → HTMLFrames
Setting milestone to future.
Target Milestone: --- → Future
QA Contact update
QA Contact: petersen → amar
Nominating for beta
Keywords: nsbeta1
Keywords: testcase
Bulk reassignin HTML FRAME/IFRAME bugs to Eric.
Assignee: pollmann → evaughan
Blocks: 104166
Bulk re-assigning all of Eric's HTMLFrame bugs to John.
Assignee: eric → jkeiser
With at least Mozilla milestones 0.9.8 and 0.9.9 for Windows the IFRAME % height
also isn't functional in the attached HTML testcase
A little mistake on my side. What I meant is that it doesn't work when a HTML
4.01 DOCTYPE is specified. When you code either of the following statements as
the first line in a HTML the % height of a IFRAME no longer works:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html40/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
I attached a testcase that shows that apparently it is caused by using the
cascading stylesheet mechanism to implement the %-height when mozilla goes into
the standards-compliant mode (triggered by a correct DOCTYPE). When specifying
a % height in CSS with a surrounding block-level element that has no explicitly
stated height a %-height will change to 'auto'. As you can see in the testcase,
if you add styles to make the HTML and BODY elements have a height of 100% the
IFRAME correctly handles the %-height setting.
That would mean that 'correct' behaviour of the %-heights in a HTML4/XHTML
document would mean setting heights manually on all surrounding elements up to
HTML, something which I consider non-consistent with the HTML/XHTML-definition
of the HEIGHT-attribute for an IFRAME (a HTML %length): 'a percentage of the
available vertical space. Thus, the value "50%" means half of the available
space.'
Correction made to attachement 73858, I'm not allowed to obsolete or remove it,
but that one now is obsolete. Sorry for the spam
Attachment #73858 - Attachment is obsolete: true
IFRAME hight does not work at all when % is used. No matter how you set up the
page. This is a very old problem that,unfortunately, has never been fixed.
Well my last statement is sort of not accurate. Anytime an <IFRAME/> is placed
inside another containor, such as a <DIV/> or <TABLE/> The height attribute is
sortof ignored. I guess the real problem is tha an IFRAME will not force the
containor to a larger size. 

So if you set <IFRAME height="100%"/> in a page everything works correctly.
If you stick it inside other containor it will not unless you set the containors
height too. Example:

<HTML>
<HEAD>
    <TITLE>IBM WebSphere Portal</TITLE>
</HEAD>
<BODY>
<!-- Will Not expand to height of page -->
  <TABLE border="1" cellspacing="4" width="100%">
    <TR>
      <TD>
        <IFRAME src="http://www.yahoo.com/" frameborder="yes" id="main"
width="100%" height="100%"></IFRAME>
      </TD>
    </TR>
  </TABLE>
  <!-- Will expand to height of page -->
  <TABLE border="1" cellspacing="4" width="100%" height="100%">
    <TR>
      <TD>
        <IFRAME src="http://www.yahoo.com/" frameborder="yes" id="main"
width="100%" height="100%"></IFRAME>
      </TD>
    </TR>
  </TABLE>
</BODY>
</HTML>
I think this should be marked invalid.

http://www.w3.org/TR/html401/types.html#type-length

percentual height is defined as a percent of the available height. 


the available height is the height of the containing block; auto in this case.
The containing block stretches to accomodate its contents.

If the containing block does not have a defined height property, then the height
of the element takes on the value of 'auto'.
(see: http://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property )


Giving the initial containing block a height will effectively solve the problem
that is termed here as a bug. 

Yes this works fine if put in a table that is set to 100% height.

But if you wrap the table in a form, the iframe will no longer be 100% size.

For example:

<table height="100%">
<tr><td height="100%"><iframe src="allIsFine.html" /></td></tr>
</table>

Change this to:

<form>
<table height="100%">
<tr><td height="100%"><iframe src="notFineAtAll.html" /></td></tr>
</table>
</form>

and the iframe no longer resizes in the y-direction.

You'd think after 2 YEARS that this bug would have been fixed!
I should have mentioned this is still in Mozilla 1.4b build 2003050108.
This bug is STILL not fixed in the released version of 1.4, build 20030624

I have a few additional pages to help the devlopers diagnose this general
problem with the sizing of IFRAME objects...

This one shows a workaround to the IFRAME not taking the proper height, unless
the surrounding elements do so as well. It works on IE and Mozilla:

http://www.xaotec.com/bugs/mozilla/iframes/sample1.html

This one shows that the workaround doesn't work if the IFRAME is in a DIV tag,
even if the DIV tag has 100% height and width:

http://www.xaotec.com/bugs/mozilla/iframes/sample2.html

This one shows something that I personally would LOVE to be able to do with
mozilla, a tabbed IFRAME widget. Even if you use the 'proper' method described
in sample1, the height of the IFRAME goes back to zero if you set the display to
'none', then back to 'block'.  Highly irksome:

http://www.xaotec.com/bugs/mozilla/iframes/sample3.html
I think this bug is INVA.

http://bugzilla.mozilla.gr.jp/attachment.cgi?id=1724&action=view
this test case is body>iframe element is same "height: auto;".

And see next case.
http://bugzilla.mozilla.gr.jp/attachment.cgi?id=1726&action=view
this test case have height of html and body element.
> body, html{ height: 100%; }

So, this problem is not bug of mozilla,
this problem is mistake of website designers.
I see, if I give the FORM tag the height-style, then it works:

<HTML>
<body>
<form style="height:100%">
<table height="100%">
<tr><td><iframe height="100%" src="about:mozilla" /></td></tr>
</table>
</form>
</body>
</HTML>

So this is my mistake after all. Just got confused because it doesn't work like 
this in another (inferior) browser...
fine and dandy for your situation... but what about this one I mentioned:

http://www.xaotec.com/bugs/mozilla/iframes/sample2.html

a DIV tag will squish an IFRAME, even if the height and width attributes are set
to 100% for it and all other parent elements.

I still believe that there's a bug somewhere... either in the IFRAME code, or
the DIV code, or a little of both.
That's exactly what I thought, but try this code:

(Using the style attribute on the div to set height and width)

<table width="100%" height="100%">
<tr width="100%" height="100%">
  <td width="100%" height="100%">
  	<div style="width:100%;height:100%">
	  <iframe width="100%" height="100%" src="http://google.com"></iframe>
	</div>
  </td>
</tr>
</table>

then it works!
true enough...

but then this just means that the 'width' and 'height' attributes do not work
like the 'style.width' and 'style.height' attributes... which is still an
annoying bug.
I agree it's annoying, but checking with the HTML4.01 spec,
there are no width and height attributes on the DIV-element:

http://www.w3.org/TR/html401/struct/global.html#h-7.5.4

But is has a style attribute...
This problem is relation of root element and iframe element.
Because this bug's summary is 
"Iframe height attribite that uses % __is not functioning in XHTML__",
This means standard mode only.

See this case,
http://bugzilla.mozilla.gr.jp/attachment.cgi?id=1725&action=view
this is Quirks mode.
And This case(in Comment 20) is Standard mode.
http://bugzilla.mozilla.gr.jp/attachment.cgi?id=1724&action=view

These differences are only differences between "Quirks mode" and "Standard mode".

# Height of body element is same Viewport in Quirks mode.
# But Height of body element and html element is "height: auto;" in Standard mode.
*** Bug 218479 has been marked as a duplicate of this bug. ***
This bug as initially filed is invalid, so marking it so.  The discussion covers
a variety of bugs, which are about evenly split into "invalid" and "fixed" in
current builds.
Status: NEW → RESOLVED
Closed: 21 years ago
Resolution: --- → INVALID
Product: Core → Core Graveyard
Component: Layout: HTML Frames → Layout: Images
Product: Core Graveyard → Core
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: