12 replies [Last post]
Jough
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-03-06
Posts: 7
Points: 0

...I have searched for and found the answers to many similar problems but none just like this. It is yet another IE bug Oups

I want to make a div display 100% of the height of the div it is nested in. The parent div has margins determined by the window size of the user and does not have a set height. This works fine in FF but not in IE (of course). How do i get around it?

Example:

<div id="parent">
     <div id="child">
     </div>
</div>

div#parent{
	position: absolute;
	display: inline;
	padding: 0 0 0 0;
        margin: 10 10 15 10;
}

div#child{
        position: absolute;
        display: inline;
        width: 300px;
        height: 100%;
}

Thank you for putting up with my ignorance! Laughing out loud [/code]

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I'm sure this has been asked hundreds of times...

It works in FF?

I am not sure what you are trying to achieve, but the html & css doesn't look right.

The parent element has no inflow content, so its height will be zero. The child element bases its height on its parent, but since it is not inflow, it can't affect its parent's height.

Why are you using position:absolute?

As a general rule, for block elements, height is best set on an inner element and let the outer elements expand to surround its descendents. Width is best set on outer elements and the default behaviour is for the inner elements to fit the available width.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm sure this has been asked hundreds of times...

Shock position absolute, display inline, no margin value units,

You probably need to start over with this from scratch, there is a sticky in one of the sub forums on why not to use position absolute and you most definitely do not want display inline as for one thing inline elements can not express width or height although absolute would overule this as would float property.

Height needs to set on the body,html element as the initial div/element cannot know what it is supposed to be 100% of otherwise and then only the initial element may have that height percentage.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Jough
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-03-06
Posts: 7
Points: 0

Just an example.

Ok. The code that I had displayed was just an example. I should have stressed that more to save you the trouble of bashing me. My actual code is several hundred lines long and I would much rather not paste the entire thing in here.

So, my question (again) in short is:

How do I get IE to display a div as 100% the height of the div it is nested in when the parent div's height is unknown and changes due to window size?

Anonymous
Anonymous's picture
Guru

Re: Just an example.

Jough wrote:
... I should have stressed that more to save you the trouble of bashing me. ...
What is it with all the sensitive types lately?

Sorry that you consider helping you to be "bashing". You should ask for a full refund.

Jough
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-03-06
Posts: 7
Points: 0

Sorry

Sorry, I think I was just surprised that they had actually thought my example code was my actual code. I have taken the liberty of creating a DEMONSTRATION of the problem I am having at www.yourcelebritygossip.com. As you can see, it works fine in FF but the left 'menu' does not stretch the full amount in IE. The only reason I need it to is because of the reapeated background image. Like I said before: this has probably been asked many many times before.[/url]

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I'm sure this has been asked hundreds of times...

It looks like you are trying to achieve something akin to position:fixed. Google on "position fixed IE", you'll find some links that explain how to achieve that. It isn't a common page format but it can be done.

Jough
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-03-06
Posts: 7
Points: 0

Expressions are evil.

Yes, I am familiar with IE expressions to accomplish simple tasks like fixed positions. But my case here is a little different. Is there no other way to achieve this without using a CSS expression? I would rather not use one if I don't have to.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I'm sure this has been asked hundreds of times...

Was that all that came up?

Its not something I have really had to do besides experimentally. This example may help.

Jough
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-03-06
Posts: 7
Points: 0

Well, not really...

I've dealt with similar problems in the past. About two years ago is when I first had to use an expression to display a fixed position in order to display a "floating" graphic without the use of javascript. This current problem is just a slight bit different and I didn't think I would have to go as far as using an expression. The example you provided me is perfect. It seems as though it displays correctly in all browsers. I will have to spend a little time looking it over to see what they had done differently than I had in order to make it work. Thank you very much Chris - I'll let you know how it turns out.

Jough
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-03-06
Posts: 7
Points: 0

Nope...

If you look at the top of the source you will see:

<!--[if IE]>
  <style>
    body {behavior: url(/csshover.htc);}
  </style>
<![endif]-->

When you open /csshover.htc you will see about 50 lines of javascript that make IE do what it is supposed to. Unfortunately, it looks like I will have to use a CSS expression to get it to do what I want. But, I wont have to use a 50 line one like in the example Laughing out loud a simple...

height: expression(document.body.offsetHeight - 110 + "px");

... will work. I know that IE7 fixes most of these problems, and lets hope that gets released soon! Thanks for the help, anyway!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I'm sure this has been asked hundreds of times...

That is whatever:hover. It provides :hover functionality for IE. There are no :hover style rules in that page so it does nothing. Its only there as it is part of a standard test page template I use. Just for you I have now removed it. Wink

Jough
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-03-06
Posts: 7
Points: 0

My bad!

:? Maybe I should have read through the contents of the file before I made my assumption. Laughing out loud Sorry about that! I also just noticed you are using strict.dtd. This really does help and it's starting to come together now... I just have to tweak it and make it work with my format! Thanks for putting up with me! Cool