SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Jun 22, 2006, 08:17 #1
- 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>
-
Jun 22, 2006, 10:38 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Jun 22, 2006, 13:43 #3
- 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
-
Jun 22, 2006, 14:23 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 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>
-
Jun 22, 2006, 14:45 #5
- 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