SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I get NON-IE browsers to do this

    Copy and paste this code, run it in IE, and then do the same for Firefox, Safari, or whatever.

    The effect IE gives me, where I have a fixed height for the header, a 100% height for the content, and a fixed height for the footer, and the content is set to overflow: auto and expands upon page stretch.

    Can I get this to work in FF or Safari, etc...

    Thanks

    Code:
    <!-- -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {padding: 0px; margin: 0px;}
    html, body {height: 100%; max-height:100%;}
    div#wrap {height: 100%;}
    table {border: none;}
    td {vertical-align: top; width: 200px;}
    td#topsegment {height: 50px;}
    td#middlesegment {height: 100%; background: #eee;}
    td#bottomsegment {height: 50px;}
    div#chatWrap {overflow: auto; height: 100%;}
    </style>
    </head>
    
    <body>
    <div id="wrap">
    <table style="height: 100%;" cellpadding="0" cellspacing="0">
    
    <tr>
    <td id="topsegment">top segment</td>
    </tr>
    <tr>
    <td id="middlesegment">
    <div id="chatWrap">
    	<div id="chatForm">
    	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />Text text text text text<br />Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />
    	
    	Text text text text text<br />
    	Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />Text text text text text<br />Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />
    	Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />
    	
    	Text text text text text<br />
    	Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />Text text text text text<br />
    	</div>
    </div>
    </td>
    </tr>
    <tr>
    <td id="bottomsegment">bottom segment</td>
    </tr>
    </table>
    </div>
    </body>
    </html>

  2. #2

  3. #3
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not really. I was hoping a solution could come about from the specific code I posted.

    In a nutshell, that snippet of code you see will end up being "fixed" position so the user can use the browsers scrollbar and it holds upon scrolling.

    Currently, i am able to get this to work using an IFrame OR a textarea box, but a DIV would be ideal for what we are trying to do.

    I wish there was a javascript way with the above so there could just be an onresize event change.

    There "has" to be a way to get that to work like IE.

    btw - its literally giong to be like 200 pixels wide and fixed positioned.

    Thanks

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,872
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    HI,

    Well the excamples I showed all do the same thing so the techniques you needed were in there.

    Something like this:
    Code:
    <!-- -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {padding: 0px; margin: 0px;}
    html, body {height: 100%; max-height:100%;}
    div#wrap {height: 100%;}
    table {border: none;}
    td {vertical-align: top; width: 200px;}
    td#topsegment {height: 50px;}
    td#middlesegment {height: 100%; background: #eee;}
    td#bottomsegment {height: 50px;}
    * html div#chatWrap {overflow: auto;height:100%}
    html>body div#chatWrap{
    position:absolute;
    top:50px;
    bottom:50px;
    overflow:auto;
    width:200px
    }
    </style>
    </head>
    <body>
    <div id="wrap">
     <table style="height: 100%;" cellpadding="0" cellspacing="0">
      <tr>
       <td id="topsegment">top segment</td>
      </tr>
      <tr>
       <td id="middlesegment"><div id="chatWrap">
    	 <div id="chatForm"> Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	  Text text text text text<br />
    	 </div>
    	</div></td>
      </tr>
      <tr>
       <td id="bottomsegment">bottom segment</td>
      </tr>
     </table>
    </div>
    </body>
    </html>
    Hope it helps

  5. #5
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    I am giong to give this a run and see if it efficiently works.


Bookmarks

Posting Permissions

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