DIV expanding vertically in Firefox?

[Josefu]

My code is a bit too complicated to post here (a mix of absolute-ly positioned div's and tables (border placeholders); everything is working fine, save for one DIV, in all browsers.

Basically I have a table (nested within another) with two vertical td's (one being a javascript-controlled placeholder), one of which contains a div text/html content. Everything in the 'parent chain' above it is set to 100% height, all the way up to html and body.

My problem is the text-holding div: if it is empty (with a reference border around it), it fills its parent <td> nicely to its 100% height (so I know the browser has all the vertical references it needs to render the <div> correctly), yet should I fill it with text beyond its capacity, no matter what I set the 'overflow' css to, it will always expand vertically. This problem only occurs in Firefox thus far. I'm pulling my hair out at this point - has anyone had a similar problem?

Thanks for any advice - cheers.

[Josefu]

Still unable to find a solution - was my question unclear? Basically Firefox will expand a 100% hight div if its content overflows (regardless of the 'overflow' setting), but won't behave the same way for fixed-pixel heights (these display (scroll, hidden) correctly). Is there a css setting to correct this?

Thanks again.

[4css]

You probably need to post your css. The only way that we can help you is to view it.

Sometimes there could be some things in there that someone else might see that you aren't because you are viewing it so much.

Also, make sure that it, along with your (x)html validates.

[SuzyUK]

don't think the CSS will be necessary, I think likely because there is no way constrain the height of the table. Tables stretch by default, if your content stretches so does the table cell, therefore so will the div

[Josefu]

Okay, I cut my code down to a minimum for clarity - this is working in all browsers save Opera and IE (7&8):

.div_fullscreen {
position:absolute;
height:100%;
width:100%;
overflow:hidden;
}

.table_fullscreen {
position:relative;
height:100%;
width:100%;
overflow:hidden;
}

.td_c_15 {
width:15px;
height:15px;
line-height:10px;
}
.td_hor_15 {
height:15px;
line-height:10px;
}
.td_vert_15 {
width:15px;
}

#border_table {
position:relative;
width:100%;
height:100%;
border: 5px double #3b2313;
}



<div class="div_fullscreen" style="z-index:7;">
 <table border="0" cellpadding="0" cellspacing="0" class="table_fullscreen">
 <tr>
 <td class="td_c_15">&nbsp;</td>
 <td class="td_hor_15">&nbsp;</td>
 <td class="td_c_15">&nbsp;</td>
 </tr>
 <tr>
 <td class="td_vert_15">&nbsp;</td>
 <td style="vertical-align:top;">
<!-- border holder table -->
  <table id="border_table" border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td></td>
  </tr>
  </table>
<!-- end border holder table -->
 </td>
 <td class="td_vert_15">&nbsp;</td>
 </tr>
 <tr>
 <td class="td_c_15">&nbsp;</td>
 <td class="td_hor_15">&nbsp;</td>
 <td class="td_c_15">&nbsp;</td>
 </tr>
 </table>
</div>

I think the above is pretty straightforward, but I can explain the role of the fullscreen table: it is a placeholder for the border'd table (the container div is at a higher z-index than another below it, containing a table with 'paper borders'); the 5px border overlaps this (pm me if you would like to see).

Thanks for your insight, guys ; )

[SuzyUK]

I'll send for a look to see what you're trying to achieve, but my guess is it can't be done using tables, tables do not act the same cross browser, e.g. this is not working at all in IE 7 or 8. The row/cell heights cannot be controlled the same way. Height in tables acts like min-height.. In fact to re-iterate above post even if as you say you can get it working in FF with an empty cell.. as soon as that cell gets enough content to make it stretch beyond your 100%.. it will stretch.. it doesn't matter if the div inside it is set to overflow.. the divs height is 100% of the table cell, but it's the table cell that is expanding ;)

as an aside you haven't got the full "parent chain" set to 100%, with tables the chain includes <tr> and also <tbody> or <thead>.. (even if they're not explicitly in the HTML) you can imagine that if you were to include them it is no longer possible to get 100% minus the other rows.. much the same as CSS calc() - this is why it won't work in IE and it's only "working" in FF due to their wrong handling, never a good idea to design based on a browser flaw..

If this is a UI design (the usual reason for a fixed 100% design) then pure CSS is the way to go.. if it's just to get fancy borders in place the CSS backgrounds should somehow be usable

oh, could you also let us know how cross browser this is going to need to be

Suzy

[Josefu]

Thanks for your insightful input ; )

It has to be 'major modern browser' compatible - I'm not going to bother with banging my head against the wall for the likes of IE 6 or 7; as I am using jQuery this time around, I can just send those users to the old version of the website.

The fact is, tables do best what I am trying to achieve: esthetics are important to me. My goal is to keep a 20px border (paper texture background + the border in the above example) around a (stylised) google map - I think doing that with div's would be very difficult. But I may give it a try, as I'm also having problems with 'placeholder div's' (containing similar tables) and the 'pointer-events' css function (of course, with IE). I think you neeed to see though, rather than me giving an explanation here.

Thanks again.

[SuzyUK]

I can see your point and am really trying not be anti-tables, here however I think this really is a case where they really aren't the right tool for the job, an external div or 3 (lack of multiple background support) with padding should take care of the paper borders

absolute positioning with all four co-ordinates should take care of the 100% height/width(less the borders) in IE8 and other modern browsers, and you can then put a scrolling div to hold your map inside that.. or that's my thinking anyway

sorry I had a try and look back a some old table tricks but FF, opera et al have deprecated the height of tables, which makes sense as it's really just min-height anyway

I'm off out for a while but if you want to PM me a link or image of what you'd like to achieve, feel free :)

[Josefu]

Hokay will do - incoming - I need to sleep on this for tonight anyways. I've tried 'dancing with div's' to achieve the same result as tables (div's always obey the 100% command before anything else) but no success until now. Thanks again ; )

[Josefu]

I did it! At least so far... I think my "table mania" was a residue from the days when many browsers didn't support the "right:0px" and "bottom:0px" css declaration. All I did was position my border and shadow-holding divs 'absolute'-ly within a wrapper div... thanks all for your patience with my table obstinacy.

[SuzyUK]

WooHoo!

np with the table thing, and yes positioning with all four co-ordinates is much better in IE8 which once you stated that as your support level, sealed the deal ;)

PS: I've seen the code.. and it's very pretty (the source and the effect!) :)