Peventing div stacking in IE

Discussion in 'HTML & Website Design' started by The Smoking Gun!, Mar 28, 2009.

  1. #1
    Hi helpful people,

    I recently upgraded and monetized a site for a soon to be client, and along with the regular pages a site has and an order page for the seeds she sells on it, she has some image galleries for which I used scripts to make pop, and all this works well, however in the process of adding some google ads and affiliate links for her, i used dreamweaver to generate a two column elastic layout, because i wanted to add the left column to populate with these items and not take from the rest of the site pages.

    Now the whole thing is marked up in html 4.01 loose (because some affiliates use frames) and DW generated the sylesheet for me because the original design only used one for a few font attributes and that's it.

    My problem is...when lower resolution monitors or reduced screen sizes are used the divs stack in IE rather than adding a scroll bar as FireFox does.

    Now i have done some research about handling overflow, but do not quite grasp how this applied to entire pages, as the use I see it for seems to be for specific elements.

    I used a javascript to auto-resize the page which was needed to prevent a close div mis-match between firefox and IE where one needed one more than the other, but when i added this FF then would display well along with satisfying the extra close div in IE.

    I mention this only in case it may have a bearing on the issue, but bottom line, in IE....as soon as the page is reduced some the center content drops down below the bottom of the left column.

    Any help possible here?

    Thanks to those who can!
     
    The Smoking Gun!, Mar 28, 2009 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    I would have to actually see what you have for code and what you have for a layout - since div's "stacking" is not exactly a term I'm familiar with... but resorting to javascript to address a rendering difference probably means the layout itself is fundementally flawed...

    Though you pretty much said that with this:
    99% of your problem right there.

    If you can post up an example page, we can probably talk you through fixing the problems and getting rid of that likely unneccessary javascript.
     
    deathshadow, Mar 28, 2009 IP
  3. The Smoking Gun!

    The Smoking Gun! Member

    Messages:
    19
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    38
    #3
    Well what would you prefer a link to the page(s) in question? or the pages code?

    as for the use of dreamweaver, it was only to generate a stylesheet to work off of and modify as needed, you see I hadn't intended on converting the entire table based layout in to xhtml divs and 100% css rendered, however ultimately, in hindsight, it probably would have taken less time, but what is done is done, I basically surrounded the existing tables in divs, and an reduced nesting as much as possible, I haven't gotten through validating it yet, as I said this was a courtesy, and didn't intend to spend much more time on it than i already had, once she has moved to my hosting service, with her two sites, I told her i would continue to tweak it and get it all valid as time allows between regular work, (i work in a landscape nursery) and paying web work allows, and she is fine with this, since it is already increasing her seed sales plus she is getting a decent amount of clicks on Google ads, and other affiliate ads.

    As for "div stacking" it is a term I have read about that describes a floated div that falls below the previous one instead of staying next to it when using liquid or elastic layouts that have some rigid elements in them that are beyond yor control, a Google leader board ad is one example, the page will shrink and grow with the resolution or window size but the google ad stay fixed in size and will push other elements off the page the tutorial sites also refer to this as "overflow" when the content does not fit in the size of the window it is in, this is including w3c, and other established reliable syntax information sites, however overcoming the issue sees to be vague, as i am not grasping how to apply it to a page's content, as opposed to a specific element, while Firefox, will create a scroll bar automatically, IE and I am assuming safari from what i have read, has issues with this, and needs to be prompted to provide for such circumstances, and this is what I am hoping will prevent the layout from collapsing? not sure that is an accurate term, but the left column stays in place and the center content then drops below it once the window size is too small!

    Thanks for offering to check on this!

    TSG!
     
    The Smoking Gun!, Mar 28, 2009 IP
    Smyrl likes this.