Ok I wasn't sure weather or not to put this in javascript, or CSS, but since it deals more with css, and I'm only using javascript to modify the css, I posted here.

I've got a div layer who's initial CSS attributes are, overflow: hidden; height: 0;

I'm making a javascript function to reveal the contents of this div layer, so I set overflow to visible. Which should change the height of the div layer to match the content of the div layer. Unfortunately, it displays the contents, but what is weird is the height is still 0 I seriously have no idea how a div layer with a height of 0 can display anything, but it does... I can set the height via javascript when setting the the overflow, but the problem with that is I have no idea what height to set it to. This div layer will be displaying different amounts of content at different times. I tried every possible css style attribute I know such as pixelHeight, clipBottom, I event tried style.bottom-style.top, but that still gave me 0. Is there anyway of fixing this?

So you don't waist your time suggesting fixes that wont work:

• Setting the visibility to hidden instead of the overflow and the height will not work because the div layer still is the same size, causing a big empty space
• Having the content visible at first, then have javascript record the height in a variable, then hide it wont work because I need people without javascript to not see this div layer

 

 

 

Reply

A division is nothing like a table as in it does not constrain the data, it allows it to flow beyond the border—this is one reason why i choose tables over divisions on certain designs. Suggestion: Don't change the visibilty, for that'll leave that big empty space you are talking about, but instead change the display.

Reply

Ah!! truefusion you're a genius. Thanks so much!! Resolved my problem!

Reply

Truefusion is my boy!! This is a good topic and certainly a good tip for all of us. Thank you for the question and the answer.

I'll leave this on for others, just in case.

Reply