Welcome to WebmasterWorld Guest from 100.26.182.28

Forum Moderators: open

Message Too Old, No Replies

help with 100% height div for IE

contained div is not stretching in size in IE

     
6:35 am on Mar 29, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 18, 2007
posts:671
votes: 0


This is a very common problem AFAIK, but everyone has their problem is slightly a different way. It seems mine is a little more different than most, because I try searching the 'net (including the forums here), and couldn't come up with much useful info (there's tons to search, indeed, but a man only has limited time in his life).

Anyway, I'll get to the point:

Here's the layout. Don't worry, I'll post code later on.


[pre]
Container
Div__div 1 (content)
¦_div 2 (border)
[/pre]

Div container has 10em width, so should it's contained elements. Height is not set.
Div 2 (border) is position:absolute,0,0, should span 100% height (and width).
Div 1 (content) is essentially position:static, auto height (depending on content height), should have max width.

Here's code of the full thing... it is a nav menu I'm converting from table form to table-less form. It has more than what I mentioned, but the same basic layout and content is there.


[pre]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">
<html>
<head>
<title>MIE_HTML</title>
<style type="text/css">
*{font-family: "Arial", sans-serif; margin:0; padding:0}
body{background-color:black; color:white; height:100%}
#lnav{width:10em;}
#menucontainer{position:relative; top:0; left:0; width:10em}
#menu{position:relative; left:2em; width:10em; z-index:2;}
#menuborder{position:absolute; top:0; left:0; width:10em; height:100%; z-index:1;}
a{display:block;}
</style>
</head>
<body>
<div id="lnav">
<div style="width:10em;">
<img src="lnavt.gif" height="40px" width="100%" alt="">
</div>
<div id="menucontainer">
<div id="menuborder">
<img src="lnavlr.gif" style="width:100%; height:100%" alt="">
</div>
<div id="menu">
<a>content1</a>
<a>content2</a>
<a>content3</a>
<br>
<a>content1</a>
<a>content2</a>
<a>content3</a>
<br>
<a>content1</a>
<a>content2</a>
<a>content3</a>
</div>
</div>
<div style="width:10em;">
<img src="lnavb.gif" height="40px" width="100%" alt="">
</div>
</div>
</body>
</html>
[/pre]

I was playing around with a few potential fixes... I think I removed them all except body{height:100%}, which I don't think there's anything wrong in keeping (even though I don't have any children of body which will use relative heights.)

The way it is in IE is pretty bad. It doesn't look as bad as I think it is though. I should have colored my divs so I could analyze their size and positions but I have a good idea of how they are. (for FF I have tools to see their size without doing that stuff)

There's also a tiny problem for FF (and maybe other browsers), where there's a small gap inbetween the topnav image and the border image. I'm unsure why this is.

There's also a tiny problem for FF (and maybe other browsers), where there's a small gap inbetween the topnav image and the border image. I'm unsure why this is.

edit: god damn, what the hell is with the thing keep killing my spaces? I guess it's intentional? I thought the whole reason to use pre was to keep stuff like tabs and spaces intact! Every time I even edit my post, it eats up more and more spaces!?
Oh well, you'll just have to put up with ugly code...

[edited by: Xapti at 6:58 am (utc) on Mar. 29, 2007]

4:04 pm on Mar 29, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


I think you'll have an easier time cross-browser if you use a full doctype - and make it html 4.01 (perhaps 4.1 was a typo?)

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

4:27 am on Mar 30, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 18, 2007
posts:671
votes: 0


I thought I copy and pasted it directly from the W3C, :P, but whatever happened, happened. Strange though, because even the link is missing, not just a typo.
And just to add a coment: I don't know if it's just me, but it seems like a fix should be pretty easy to get... I'm just not familiar with all of IE's quirks and what needs to be done to satisfy it.

And by the way, Ted... changing doctype changed a bit of things... I'll get back on that.

FYI, anyone should be able to test this code quite well... it's self-standing code, just no images. The images are pretty simple though, and are sized all in the code, so you could use any image, or no image (just the placceholders).

[edited by: Xapti at 4:39 am (utc) on Mar. 30, 2007]

5:01 am on Mar 31, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 18, 2007
posts:671
votes: 0


Here's what I ended up doing:

<!--[if IE 6]>
<style type="text/css">
#menuborder{height: expression(document.getElementById("menu").clientHeight + "px")}
</style>
<![endif]-->

Can somone test it with IE7 too? I'm not sure if it will work well, might need to change the conditional comment to include IE7 as well.

It took me a long time to figure out the expression though, because I'm not good with Javascript, and unfamiliar with the attribute tag thingies. I tried numerous other ones like "offsetheight" and "style.height".

Changing the doctype removed the strange space inbetween the top image, and the middle image, but IE still has it, even with the fix. Perhaps it's not running in standards-compliant mode, hence the same problem as FF had before the Doctype fix? What could be done to get it complying?

[edited by: Xapti at 5:03 am (utc) on Mar. 31, 2007]

7:02 am on Mar 31, 2007 (gmt 0)

New User

10+ Year Member

joined:Mar 25, 2007
posts:8
votes: 0


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<style>
* { margin:0; padding:0; border:0;}
html,body { height:100%;}
#tugang { height:100%; background:#000;}
</style>
</head>
<body>
<div id="tugang"></div>
</body>
</html>
6:47 pm on Mar 31, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 18, 2007
posts:671
votes: 0


Woah somone didn't read my topic, or my other posts.
Anyone can do a div 100% height to body (I noticed WebMasterWorld still gets people asking for help on this, which I think is funny), without (much?) problems with IE.
I want, as in the code, 100% div inside a container div which is auto height, inside another div which is auto height.
I found an answer (I don't mind using JS as long as it's just for an IE fix), but a CSS one would also be nice (particularly without a nasty hack)
Lastly, and unimportantly... not only do I not want to use XHTML, but AFAIK your code there isn't valid XHTML.

[edited by: Xapti at 6:53 pm (utc) on Mar. 31, 2007]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members