Doctype Causes Object Height=100% Problem in Mozilla

TheKeith · Oct 16, 2003

I just discovered a problem, but I'm not sure if the problem is with mozilla
or IE and Opera which handle it differently. When I use the doctype
declaration at the top of a page with a 100% by 100% flash animation in it,
mozilla is the only one of the three browsers (latest versions) that doesn't
recognize the object height=100%. Is the problem with mozilla or the other
two browsers? Thanks.

EightNineThree · Oct 16, 2003

TheKeith said:
I just discovered a problem, but I'm not sure if the problem is with mozilla
or IE and Opera which handle it differently. When I use the doctype
declaration at the top of a page with a 100% by 100% flash animation in it,
mozilla is the only one of the three browsers (latest versions) that doesn't
recognize the object height=100%. Is the problem with mozilla or the other
two browsers? Thanks.

The problem is with your markup

--
Karl Core

At times one remains faithful to a cause only because its opponents do not
cease to be insipid.
Friedrich Nietzsche

eightninethree AT eightninethree.com

TheKeith · Oct 16, 2003

how so?

EightNineThree said:
The problem is with your markup

--
Karl Core

At times one remains faithful to a cause only because its opponents do not
cease to be insipid.
Friedrich Nietzsche

eightninethree AT eightninethree.com

Toby A Inkster · Oct 16, 2003

TheKeith said:
I just discovered a problem, but I'm not sure if the problem is with mozilla
or IE and Opera which handle it differently. When I use the doctype
declaration at the top of a page with a 100% by 100% flash animation in it,
mozilla is the only one of the three browsers (latest versions) that doesn't
recognize the object height=100%. Is the problem with mozilla or the other
two browsers? Thanks.

I am assuming your code can be summarised as:

<html>
<head><title>Blah</title></head>
<body>
<object style="height:100%"></object>
</body>
</html>

Mozilla gets it right. Opera 7 should get it right in standards mode too[1].

Put simply "height:100%" means "fill up my containing box vertically". So
object is asking to be the same size as <body>.

However, how big is <body>?

As the <body> doesn't have an explicit height set, it is set to be the
same height as its contents -- the <object>.

So what you have is a situation where <object> is saying "I want to be as
big as <body>" and <body> is saying "I want to be the same size as <object>".

The solution is to use CSS to set height:100% on <body> and <html> too.

[1] Note: In Opera 7, any Transitional DOCTYPE (even with a URL) triggers
Quirks Mode.

Matthias Gutfeldt · Oct 16, 2003

Toby said:
[1] Note: In Opera 7, any Transitional DOCTYPE (even with a URL) triggers
Quirks Mode.

Which Opera 7 did you test? Both the documentation at
<http://www.opera.com/docs/specs/doctype/> and my own test results
<http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html> indicate
that HTML Transitional and Frameset only trigger Quirks without the URL.

Matthias

TheKeith · Oct 16, 2003

Toby A Inkster said:
TheKeith said:

I just discovered a problem, but I'm not sure if the problem is with mozilla
or IE and Opera which handle it differently. When I use the doctype
declaration at the top of a page with a 100% by 100% flash animation in it,
mozilla is the only one of the three browsers (latest versions) that doesn't
recognize the object height=100%. Is the problem with mozilla or the other
two browsers? Thanks.

Click to expand...

I am assuming your code can be summarised as:

<html>
<head><title>Blah</title></head>
<body>
<object style="height:100%"></object>
</body>
</html>

Mozilla gets it right. Opera 7 should get it right in standards mode too[1].

Put simply "height:100%" means "fill up my containing box vertically". So
object is asking to be the same size as <body>.

However, how big is <body>?

As the <body> doesn't have an explicit height set, it is set to be the
same height as its contents -- the <object>.

So what you have is a situation where <object> is saying "I want to be as
big as <body>" and <body> is saying "I want to be the same size as

The solution is to use CSS to set height:100% on <body> and <html> too.

[1] Note: In Opera 7, any Transitional DOCTYPE (even with a URL) triggers
Quirks Mode.

THAT DID IT!!! Thanks a lot! I had no idea you could set the height of body
and certainly not the height of the html tag--This is news to me. One
question I do have though--why do you have to set the height of the html
tag--wouldn't setting the height of body alone logically be sufficient?
thanks again.

TheKeith · Oct 16, 2003

Toby A Inkster said:
TheKeith said:

I just discovered a problem, but I'm not sure if the problem is with mozilla
or IE and Opera which handle it differently. When I use the doctype
declaration at the top of a page with a 100% by 100% flash animation in it,
mozilla is the only one of the three browsers (latest versions) that doesn't
recognize the object height=100%. Is the problem with mozilla or the other
two browsers? Thanks.

Click to expand...

I am assuming your code can be summarised as:

<html>
<head><title>Blah</title></head>
<body>
<object style="height:100%"></object>
</body>
</html>

Mozilla gets it right. Opera 7 should get it right in standards mode too[1].

Put simply "height:100%" means "fill up my containing box vertically". So
object is asking to be the same size as <body>.

However, how big is <body>?

As the <body> doesn't have an explicit height set, it is set to be the
same height as its contents -- the <object>.

So what you have is a situation where <object> is saying "I want to be as
big as <body>" and <body> is saying "I want to be the same size as

The solution is to use CSS to set height:100% on <body> and <html> too.

[1] Note: In Opera 7, any Transitional DOCTYPE (even with a URL) triggers
Quirks Mode.

I tried to validate that code on the w3 site, and even though it works on
every browser I tested it on so far (netscape, mozilla, opera, and ie --
latest versions) with:

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

at the top of every page, the validator says that there is no attribute
"STYLE" for the html tag. Should I just disregard?

Steve Pugh · Oct 16, 2003

TheKeith said:
I tried to validate that code on the w3 site, and even though it works on
every browser I tested it on so far (netscape, mozilla, opera, and ie --
latest versions) with:

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

at the top of every page, the validator says that there is no attribute
"STYLE" for the html tag. Should I just disregard?

The validator is correct, there is no style attribute for <html>.

Get rid of the style attribute and use a stylesheet instead.

Steve

TheKeith · Oct 16, 2003

wait now I'm confused--what's the difference between setting the style right
at the tag or setting the style on a separate sheet? Doesn't it have the
same effect? Maybe I was a little unclear--I used <html
style="height:100%"> -- how should I do it?

EightNineThree · Oct 16, 2003

TheKeith said:
wait now I'm confused--what's the difference between setting the style right
at the tag or setting the style on a separate sheet? Doesn't it have the
same effect? Maybe I was a little unclear--I used <html
style="height:100%"> -- how should I do it?

The validator quite clearly told you that there is no "style" attribute for
the <html> element.
However, the style element is appropriate for <body>, which is the most
appropriate element for you to place your desired height property style to.

--
Karl Core

At times one remains faithful to a cause only because its opponents do not
cease to be insipid.
Friedrich Nietzsche

eightninethree AT eightninethree.com

TheKeith · Oct 16, 2003

EightNineThree said:
The validator quite clearly told you that there is no "style" attribute for
the <html> element.
However, the style element is appropriate for <body>, which is the most
appropriate element for you to place your desired height property style

to.

ys but as Toby A. Inkster said in his reply, you have to put it in booth. I
tested this and indeed, ity has to be in both to work.

TheKeith · Oct 16, 2003

TheKeith said:
to.

ys but as Toby A. Inkster said in his reply, you have to put it in booth. I
tested this and indeed, ity has to be in both to work.

I mean *both* -- sorry.

Steve Pugh · Oct 16, 2003

TheKeith said:
wait now I'm confused--what's the difference between setting the style right
at the tag or setting the style on a separate sheet?

In terms of effect. None. Unless you have conflicting style rules.

Maybe I was a little unclear--I used <html
style="height:100%"> -- how should I do it?

As the validator told you the style attribute does not exist for the
html element therefore that is invalid and you rely on browser error
recovery for it to do anything.

On the other hand
html {height: 100%;}
in a stylesheet is valid.

If you wanted valid code, and as you bothered to validate we must
presume that you do, why would you not use the valid method?

Now please stop top posting.

Steve

TheKeith · Oct 16, 2003

Steve Pugh said:
In terms of effect. None. Unless you have conflicting style rules.

As the validator told you the style attribute does not exist for the
html element therefore that is invalid and you rely on browser error
recovery for it to do anything.

On the other hand
html {height: 100%;}
in a stylesheet is valid.

If you wanted valid code, and as you bothered to validate we must
presume that you do, why would you not use the valid method?

Now please stop top posting.

sorry about the top-posting.

I do, absolutely, want valid code. I just didn't know that there was a
difference between doing it the stylesheet way versus doing it at the tag
itself. I always thought the two (or 3 including external sheets) were all
interchangeable. Thanks.

Toby A Inkster · Oct 17, 2003

TheKeith said:
THAT DID IT!!! Thanks a lot! I had no idea you could set the height of body
and certainly not the height of the html tag--This is news to me. One
question I do have though--why do you have to set the height of the html
tag--wouldn't setting the height of body alone logically be sufficient?
thanks again.

In older browsers <body> represents the top-level visible element, but in
newer browsers <html> does, so the <html> element can potentially be
smaller than the canvas.

Toby A Inkster · Oct 17, 2003

Matthias said:
Which Opera 7 did you test? Both the documentation at
<http://www.opera.com/docs/specs/doctype/>

Hmm... right you are. I wonder whay the OP was experiencing problems then.

Table Cell height 100% causes scroll??	6	Feb 9, 2006
CSS styles with 100% height	11	Oct 23, 2007
<td> height problem	4	Jul 13, 2008
Border problem: ie7 versus Mozilla Firefox 3.0.1	12	Aug 30, 2008
Problem: CSS 100% height	4	Nov 23, 2004
Object html page embeds allow use of any Doctype codes as inserts	1	Jan 28, 2011
Help with Visual Lightbox: Scripts	2	May 3, 2023
navbar 100% height	5	Jul 9, 2004

Doctype Causes Object Height=100% Problem in Mozilla

TheKeith

EightNineThree

TheKeith

Toby A Inkster

Matthias Gutfeldt

TheKeith

TheKeith

Steve Pugh

TheKeith

EightNineThree

TheKeith

TheKeith

Steve Pugh

TheKeith

Toby A Inkster

Toby A Inkster

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads