ansaurus

Question

Answer 1

A:

I think if you implement that design in DIVs instead of table it will work

Ahmed Khalaf 2010-09-25 18:49:36

Can you provide a simple example, I don't get it to work correctly with DIVs. Same problem - inner DIV (left side) overflows the outer DIV instead of being scrollable.

AndiDog 2010-09-25 18:56:56

Answer 2

A:

Try putting a div inside the "list of routes" td and make that scrollable instead of the td itself. Go through and make sure nothing has a padding or border. See if setting or removing a doctype changes anything (this is one of those cases where quirks and standards mode act much differently).

This works for me in chrome 6: http://jsbin.com/oxaku4/2/edit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html style="width: 100%; height: 100%; border: 0; margin: 0">
  <body style="width: 100%; height: 100%; border: 0; margin: 0">
    <table style="width: 100%; height: 100%; border-spacing: 0; border: 3px solid blue">

      <tr>
        <td colspan="2">
          <div style="border: 2px solid red">Toolbar</div>
        </td>
      </tr>

      <tr>
        <td style="width: 300px; border: 2px dashed orange; height:100%;">
        <div style="overflow-y:scroll; height:100%;"> 
          <!-- long list for testing -->
          left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
          left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
          left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
          left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
        </td>
        <td rowspan="2" style="border: 2px dashed yellow;">
          map
        </td>
      </tr>

      <tr>
        <td style="border: 2px dashed brown;">
          bottom left <br>
          some stuff <br>
          goes here <br>
        </td>
      </tr>

    </table>
  </body>
</html>

no 2010-09-25 19:16:58

Okay, that prevents the TD from overflowing over the outer DIV. But the page still doesn't fit to the browser windows - I don't want to page be scrollable but only the "list of routes". In your example solution, the table doesn't obey to `height: 100%` but grows higher so that I have to scroll the page.

AndiDog 2010-09-25 19:40:43

IE8 fits everything into the browser window, but the orange box (list of routes) is displaying as 7 pixels high. Did I say I hate HTML?...

AndiDog 2010-09-25 19:56:05

I think you're at the point where you need to start messing with doctypes. The example worked for me in chrome 6, probably needs tweaking to work with all browsers. Welcome to the wonderful world of web development ;p

no 2010-09-25 20:01:39

Correction: IE8 shows your example correctly, but Firefox does not. I played around with DOCTYPE and found that Chrome/IE8 show the page as I expect it with HTML 3.2 doctype but not with newer versions or XHTML. Firefox doesn't even show it correctly with the HTML 3.2 doctype (it says it's in quirks mode then). Why does the doctype make such a difference here?

AndiDog 2010-09-25 21:01:58

Decent explanation of the doctype thing here: http://apptools.com/examples/tableheight.php ... You might consider opening a bounty for a version of this that works in firefox; I took a stab at it but didn't get anywhere. Another option (and I hate to recommend this) is to use javascript to check the size of that div in a window.onresize event listener and make sure it's never taller than the window.

no 2010-09-26 22:01:46

Okay, I will try to make it work on Firefox, too. I'll accept your answer because you're right about the problems caused by the doctype. Thanks!

AndiDog 2010-09-29 08:16:34

ansaurus

tags:

views:

answers:

HTML fit page to screen problems

related questions