div 100% till table row is made visible
i have a table in a form in a div. the div stretches 100% of the viewport and looks well in both IE and FF. on my form i have a dropdown list that has a "other" option and once selected it sets a hidden table row to 'block' so the user can enter a value not available in the dropdown. well, once this table row is made visible it adds length to the layout and pushes everything below down past the viewport...which means you have to scroll down and when you do the 100% background stops and doesn't keep going.
Just to clarify: is this an IE-only problem, because if it's a problem in Fx too, then there might be something else going on.
Could we possibly have a link?
yes, it's happening in IE, FF and Safari. but i'm testing locally at the moment, don't have a connection to upload my changes...i'll upload as soon as i can, got a wedding today, not mine , but i'll upload the changes and post a URL as soon as i can....
*jumps and claps* Yay, a Mac user
OK, sounds good... the fact that it's happening in Safari troubles me, makes me think there may be another issue causing it (Safari is one of the only two browsers that passed the ACID2 test, so the way something renders in Safari is generally the way it should render).
ok, well, i think its a viewport issue. on the contact page, the unhiding of the table row pushes any content below it down and if your viewing @ 1024x768 then it will push below the viewport just like what happens on the home page when content goes below the viewport.
another thing, i have a 'footer' div that is absolutely positioned at bottom: 0px of the 'container' div and so it doesn't move when 'content' div grows.
looks like this:
<content div>page content<end content div>
<footer div><end footer div>
<end container div>
here's the link: http://www.juddavis.com/contact.php
btw, in IE, once you unhide the table row the container div(has the bg img) does stretch but the footer doesn't move.
would floating the container div and the clear the floats with the footer div help? the more i type, the more i confuse myself...going to bed now
here's an extra piece!
there is a #wrapper div that all other divs are nested in and it too is stopping at the bottom of the viewport - which prolly causes the rest to stop. maybe??? i'm thoroughly confused!
i've tried floating #content and add clear:both to #footer...no dice :\
got it figured out!! after confusing my thoroughly it finally dawned on me to take out the height specifications in everything but the #wrapper and #container. it worked perfectly. i don't even think i need the #wrapper! but settiing min-height(FF) and height(IE) to 100% lets the content inside it determine the height it needs to be...and if it's there's less content the div has the 'min-height' to keep it stretched to 100%...and of course, IE just does it incorrectly, but to my advantage.
raise your hand if you're reading this saying, "DUH!"
the only thing that worries me is safari. i don't have it so i can't test it till i get in my boss's office. anybody feel like checkin' it out for me???
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)