IE6, XHTML & height in %

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

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"
" ">

         <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;



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


Re: IE6, XHTML & height in %

Quoted text here. Click to load it

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


Re: IE6, XHTML & height in %

Quoted text here. Click to load it

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..


Re: IE6, XHTML & height in %

Muffinman wrote:
Quoted text here. Click to load it
Quoted text here. Click to load it

"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)


Site Timeline