www.webdeveloper.com
Results 1 to 7 of 7

Thread: div 100% till table row is made visible

  1. #1
    Join Date
    May 2005
    Posts
    242

    div 100% till table row is made visible

    hello all,
    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.

    any ideas??

    thanks...

  2. #2
    Join Date
    Jul 2004
    Location
    Rhode Island
    Posts
    190
    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?

  3. #3
    Join Date
    May 2005
    Posts
    242
    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....

    thanks

  4. #4
    Join Date
    Jul 2004
    Location
    Rhode Island
    Posts
    190
    *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).

    -Matt

  5. #5
    Join Date
    May 2005
    Posts
    242
    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:

    <container div>
    <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

  6. #6
    Join Date
    May 2005
    Posts
    242
    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!

    <html><body>
    <wrapper>
    <container>
    <content></content>
    <footer></footer>
    </container>
    </wrapper>

    i've tried floating #content and add clear:both to #footer...no dice :\

  7. #7
    Join Date
    May 2005
    Posts
    242

    Finally!!!!!!!!!!!!!!!

    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???

    www.juddavis.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles