IE not picking up 100% height...

[IndigoDragon]

Hi there,

I've got an empty div inside a div with content. The 'empty' (only a 'nbsp') div has a background image that functions as a border for the container div. The border-div has height set to 100%. In FF the div picks up the (variable) height of the div it's in. In IE however, it does not! (So it stays at line-height height.)

Anyone any ideas?

Thanks in advance for your answer!

[WebJoel]

Could we see your code? I have a few ideas what is going on, but would need to test this...

[IndigoDragon]

Hi,

Yes, you can: www( dot )classicus( dot )nl
You can see the problem occurring on the left side of the 'content modules'...

thx!

[WebJoel]

I am not sure what I'm looking at... do you mean that overlapping footer?
(I edited your URL to make it not Google-searchable. -There have been recent indicences of people not wanting their posts here to show up on SEARCH engines. If you disapproive of my edit, I'll change it back..)

[IndigoDragon]

Well, in IE6 there is a gap in the left-side border... I've attached a screenshot for reference. The screenshot's from: www(dot)classicus(dot)nl/aanbod

Overlapping footer? Hmmm. In which browser/version?

[WebJoel]

Well, in IE6 there is a gap in the left-side border... I've attached a screenshot for reference. The screenshot's from: www(dot)classicus(dot)nl/aanbod...
I am not seeing that in IE7 or Firefox 2.0.0.xx, so it's IE6 and that makes me think 'doubled border' or something like that...

...Overlapping footer? Hmmm. In which browser/version?
Firefox 2.0.0.13 screenshot image attached.

This at first visual glance looks like fixed-height containers that contains content. The container are not permitted to expand, so they over-write the footer. IE's incorrect behaviour would be to expand vertically these fixed-height containers... while Firefox would correctly (and to a detriment of the intended look), merely allow the content to 'spill over' outside of the container...
-Are there any floats in these three containers?

[IndigoDragon]

Hi,

Below's the XHTML for the modules.


<div class="yui-ge">
<div class="yui-u first">
<div class="dialog">
<div class="content">
<div class="t">&nbsp;</div>
<h2>Title</h2>
<p>Content</p>
<br class="clear" />
</div>
<div class="b">
<div></div>
</div>
</div>
</div>
</div>


Below's the relevant CSS for the elements:


.dialog .t {
background-position: left top;
height: 100%;
left: 0px;
margin-left: -12px;
position: absolute;
top: 0px;
width: 12px;
}
.dialog .content {
padding: 0px 12px 57px 2px;
position: relative;
}
.dialog .content, .dialog .t, .dialog .b, .dialog .b div {
background: transparent url(images/blocks-bg.png) no-repeat scroll right top;
}
.dialog {
margin: 0px auto 0em 12px;
max-width: 760px;
min-width: 8em;
position: relative;
z-index: 1;
}


Hope it helps pointing out a possible cause for this...
Could it be: one of the elements not 'having layout'?
By the way: what did you mean with "doubled border"?

About the overlapping footer: yes, that's right. It's the fixed height + content... So, it's a 'content thing' that'll have to be corrected... :) (Or a different or no 'fixed height' strategy...)

Thanks again!

[IndigoDragon]

Hi WebJoel!

I've found why it leaves a gap on the homepage:
It's because of the good old 'box model'...! IE doesnt add the padding! That's why the 'calculated height' is lower for IE than for Ff.

Now I'll have to figure out why it's nog picking up any height on classicus(dot)nl/aanbod... That still puzzles me...