1 reply [Last post]
jwheeler
Offline
newbie
Last seen: 10 years 7 weeks ago
Timezone: GMT-7
Joined: 2009-10-12
Posts: 5
Points: 6

I'm having trouble achieving the following cross-browser in IE7 and Firefox 3.5:

I want a viewport div with y-scrolling only. The viewport div should be able to contain divs and tables that are 100% of the viewport's width.

What is the right way to do this?

Here are my attempts in a test page:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Page</title>
  </head>
  <body>
Bad in IE7
      <div id="viewport" style="overflow:auto; height:200px; width:60%; background-color:pink;">
       <div id="scroll-region" style="border:1px dashed green;">
        <div style="width:auto; background-color:cyan;">Hello Div</div>
        <table style="width:100%; height:300px; background-color:yellow;">
          <tr><td>Hello Table</td></tr>
        </table>
       </div>
      </div>
Bad in FF 3.5
      <div id="viewport" style="overflow:auto; height:200px; width:60%; background-color:pink;">
       <div id="scroll-region" style="float:left;border:1px dashed green;">
        <div style="background-color:cyan;">Hello Div</div>
        <table style="width:100%; height:300px; background-color:yellow;">
          <tr><td>Hello Table</td></tr>
        </table>
       </div>
      </div>
Kind of lame in both.
      <div id="viewport" style="overflow:auto; height:200px; width:60%; background-color:pink;">
       <div id="scroll-region" style="width:97%;border:1px dashed green;">
        <div style="width:auto; background-color:cyan;">Hello Div</div>
        <table style="width:100%; height:300px; background-color:yellow;">
          <tr><td>Hello Table</td></tr>
        </table>
       </div>
      </div>              
  </body>
</html>

Thanks a bunch. I tried to search this forum and Google for an answer, and couldn't find anything.

jwheeler
Offline
newbie
Last seen: 10 years 7 weeks ago
Timezone: GMT-7
Joined: 2009-10-12
Posts: 5
Points: 6

I finally found something

I finally found something that seems to work pretty reliably in IE7 and FF3.5:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Page</title>
  </head>
  <body>
      <div id="viewport" style="overflow:auto; height:200px; width:60%; background-color:pink;">
       <div id="scroll-region" style="overflow:hidden;padding-right:4px;border:1px dashed green;">
        <div style="background-color:cyan;">Hello Div      
        </div>
          <table style="height:300px; padding:0px; margin:0px; table-layout:inherit; background-color:#FFFFCC;">
            <tr><td>Hello Table</td></tr>
          </table>  
       </div>
      </div>             
  </body>
</html>