IE6, XHTML & height in %

Muffinman · Nov 1, 2005

Howdy,

A while ago I created a little website which has a little problem. I
have defined all layers and frames in percentages, so if somebody
reduces the size of the browser, it still looks fine. This works very
well in Mozille and alike. However, in Internet Explorer 6 it doesn't.
Somehow the height attribute in both the CSS and xhtml tag is ignored if
it is given in percentages. I have written it as below. Is there anyway
I can solve this without having to go back to the html doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Thanks in advance, Maarten

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>

<style type="text/css">

#frame_menu {
position: absolute;
left: 2%;
top: 2%;
width: 22%;
height: 80%;
border: none;
visibility: visible;
background: #ffffff;
z-index: 4;
}

</style>
</head>

<body>

<iframe src="5004230661" id="frame_menu" name="frame_menu"
scrolling="auto" marginwidth="0" marginheight="0" frameborder="0"></iframe>

</body>
</html>

Spartanicus · Nov 1, 2005

Muffinman said:
Howdy,

Don't multi post, we heard you the first time. Post a "Anyone?"
follow-up to the original if you want to draw attention to an unanswered
post.

Muffinman · Nov 1, 2005

Don't multi post, we heard you the first time. Post a "Anyone?"
follow-up to the original if you want to draw attention to an unanswered
post.

Well, since I figured out what the real problem was, I canceled the last
post -even though I'm not really shure if that worked- and created a new
one with a more appropriate subject and contents..

Maarten

Mitja Trampus · Nov 1, 2005

Muffinman said:
Howdy,

A while ago I created a little website which has a little problem. I
have defined all layers and frames in percentages, so if somebody
reduces the size of the browser, it still looks fine. This works very
well in Mozille and alike. However, in Internet Explorer 6 it doesn't.
...
<style type="text/css">
#frame_menu {
position: absolute;
height: 80%;
}
</style>
<iframe src="5004230661" id="frame_menu" name="frame_menu"
scrolling="auto" marginwidth="0" marginheight="0" frameborder="0"></iframe>

"height: 80%" means "make that 80% of the parent element".
The parent element, however, is body, and according to
specs, height of the body is that of the contained elements.
In your case the only elemnet contained within body is
iframe which takes up 0 height (because it's absolutely
positioned), so the iframe itself is made 0 times 80% tall.

To achieve what you want:
1) set body's height to 100% (of its parent, the html element)
2) set html's height to 100% (has no parent, so setting this
causes the element to span the viewport)

Mitja

XHTML - how extend/create ELEMENT body in my DTD?	0	Oct 29, 2019
IE6, CSS & height in %	0	Oct 31, 2005
IE6 ignoring "height" CSS attribute?	3	Jun 4, 2007
Can't get DIV height in IE6 to set appropriately (IE7 works fine)	1	Sep 23, 2008
Newbie XHTML question.	5	Sep 16, 2009
Help with code	0	Jun 12, 2022
Table height inside form	2	Nov 1, 2006
Table height issue in IE7	8	Feb 12, 2007

IE6, XHTML & height in %

Muffinman

Spartanicus

Muffinman

Mitja Trampus

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads