View Full Version : Auto-Resize Div.

08-09-2006, 05:15 AM
I'm a member on the following site: http://www.coltsgeeks.com, and following discussions with the site owner we've discovered an issue in Windows XP Firefox . When on the message board threads:


You may have to click through a few pages to find the problem, it randomly happens.

Javascript is here: (bottom of page source)

<script type="text/javascript">
//division containing the content- transparent background
var contentHeight2 = document.getElementById("holder1").offsetHeight;
//White Background = cbc
var cbc = document.getElementById("cntBak_cnt");
//Black Background
var cb = document.getElementById("cntBak");
//Page background Image
var pg = document.getElementById("page_content");
// bottom left box of stats
var sb = document.getElementById("statBak");
//set white background Content + 10
cbc.style.height = parseInt(contentHeight2)+10+"px";
//set white background Content + 73
cb.style.height = parseInt(contentHeight2)+73+"px";
//set background Image = content + 73
pg.style.height = parseInt(contentHeight2)+300+"px";
//pg.style.height = parseInt(cb.style.height)+227+"px"

//extend background image div if page content is greater than 700
if (parseInt(contentHeight2)-300 > 700){
//pg.style.height = parseInt(contentHeight2)+300+"px";
var cb1 = document.getElementById("cntBak").offsetHeight;
var cb2 = document.getElementById("cntBak").offsetTop;
pg.style.height = (parseInt(cb1)+parseInt(cb2)+100)+"px";


//set minimum heights on Black & white backgrounds
if (parseInt(cb.style.height) < 442){
cb.style.height = 442+"px";
cbc.style.height = 379+"px";
var cb3 = document.getElementById("cntBak").offsetHeight;
var cb4 = document.getElementById("cntBak").offsetTop;
pg.style.height = (parseInt(cb3)+parseInt(cb4)+100)+"px";
//pg.style.height = parseInt(contentHeight2)+300+"px";

I know the page does not validate (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcoltsgeeks.com%2Fforum_posts.asp%3FTID%3D29%26PN%3D6), and frankly there is nothing I can do about this. I'd appreciate your help in this thorny problem, if you suspect a specific problem in the validation that may be causing the problem then thats fine, if you just say validate the page, I'm not sure I can convince the owner to do so.

Thanks in advance.

08-16-2006, 08:40 PM
Anyone have any ideas as to how I can fix this baby up.

08-16-2006, 09:06 PM
Maybe you should tell us exactly what the problem is rather than just saying there is a problem.

08-16-2006, 09:13 PM
My bad, I thougtht I had included a description in the orginal post.

At times the white slides off the bottom and moves over the gray area and the background picture.

08-16-2006, 09:34 PM
I'm a little confused as to why you need the resize script in the first place. Why not just let the div expand with the content? Who coded the forum? The absolute positioning seems to be the gist of your problem.

08-16-2006, 09:49 PM
But removing the height's from the CSS in the <div>'s we are talking about, the content still runs over the edges. How would that be rectified.

I see your point - but now we are almost getting into a CSS issue here. Because by disabling JS you'd have the same problem.

08-16-2006, 09:51 PM
I see that which means there is a height set somewhere in the CSS preventing the containing divs from sizing to the content. #cntBak has a set height of 600px, #cntBak_cnt has a set height of 538px. If you are able to wrap #cntBak_cnt around the content and then wrap #cntBak around #cntBak_cnt you shouldn't need the JS of course you would need to remove the heights from those divs.

08-16-2006, 09:53 PM
Looks like its time to scour the code. Fun! Especially, when you didn't build the site. hehe.