0

Full fiddle: http://jsfiddle.net/kenyu73/TqLH4/3/

I've been through alot of Overflow postings and there seems just as many solutions as version of browsers and browser versions!

I've tried using Height:100%; Overflow: hidden; on all parent elements too. (, , etc)

If I set my (row4 > td) = 75% or so, the overflow is obviously gone.

Ideas, suggestions?

Thanks!

#row0,#row1,#row2,#row3{
    height: 1%;
}
#row4{
}
#row4 > td{
    height: 100%; /*** UGH, todo...***/
    overflow: hidden;
}


#divContainer{
    height: 100%; /*** UGH, todo...***/
    border: 1px solid #C8C8C8;
    margin: 2px;
    overflow: auto;
}

. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

.

<tr id="row4">
    <td>
        <div id="divContainer">
            <div class="results" id="div_search_results"></div>
            <div class="results" id="div_content_results"></div>
            <div class="results" id="div_top_results"></div>
        </div>
    </td>
    <td>
        <div id="divContainer">
            <div id="div_contents"></div>
        </div>
    </td>
</tr>

IE9 - Blah --> getting "browser" scrollbars since body goes off page!

IE9 Overflow: hidden not working

Chrome - Perfect!

Chrome Overflow OK

kenyu73
  • 671
  • 6
  • 16
  • Is your not inside a table? Is that intentional, or a shortcut? I would imagine that something unusual like a table row without a table would be rendered differently by all browsers. – thelr Apr 04 '13 at 18:30
  • @Seth - its only partial code – kenyu73 Apr 04 '13 at 18:34
  • `overflow: hidden` on `` does nothing as far as I know. – Linus Caldwell Apr 04 '13 at 18:36
  • @LinusCaldwell - I'm pretty sure it does something. If I remove it, I get no overflow scrollbars in the TD at all. Whether its the right way, well.. that's what I'm hoping to find out! (= – kenyu73 Apr 04 '13 at 18:41
  • 1
    With the code you show it should not because per default `display: table-cell` ignores `overflow` styles. BUT, maybe you are using something like this: http://stackoverflow.com/questions/509711/why-does-overflowhidden-not-work-in-a-td (or the browser ignores the rule) – Linus Caldwell Apr 04 '13 at 18:45
  • @LinusCaldwell - actually, you are right. I disabled it in TD and I get the same overflow behaviour it looks. So I dont have any overflow cropping..., just the "auto"... hmmm – kenyu73 Apr 04 '13 at 18:46
  • So, as of this post, I only have "overflow: auto;" in the ".divContainer". Same exact behavior with Chrome and IE9. I tried moving "auto" to the child .div and hidden to the .divContainer and that just made things worse. – kenyu73 Apr 04 '13 at 18:51
  • @LinusCaldwell - yes, I am using - "table-layout: fixed;" – kenyu73 Apr 04 '13 at 19:22
  • http://stackoverflow.com/questions/11328931/table-layout-fixed-not-working-in-ie-9 Maybe you could create a fiddle so it's easier to play around. – Linus Caldwell Apr 04 '13 at 19:25
  • @LinusCaldwell - here you go ( i added a bunch of overflows to it, so most can be removed) - http://jsfiddle.net/WraYL/1/ – kenyu73 Apr 04 '13 at 19:41
  • So unless I find a miracle, I'm just dealing with the overflow creating vertical browser scrollbars in IE9. I removed the :hidden at the table level and just letting it overflow the viewport. Chrome still stops :auto at the viewport which is good. – kenyu73 Apr 05 '13 at 22:05

0 Answers0