Can I get NON-IE browsers to do this

**jag5311** · Jun 22, 2006, 08:17

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>

**Paul O'B** · Jun 22, 2006, 10:38

Something like this do you mean?

http://www.pmob.co.uk/temp/fixed-centred.htm
http://www.pmob.co.uk/temp/fixedagain.htm
http://www.pmob.co.uk/temp/1colcentred-fixed.htm
http://www.pmob.co.uk/temp/2col-cent...oll-centre.htm

**jag5311** · Jun 22, 2006, 13:43

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

**Paul O'B** · Jun 22, 2006, 14:23

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

**jag5311** · Jun 22, 2006, 14:45

Thanks Paul,

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

The SitePoint Forums have moved.

User Tag List

Thread: Can I get NON-IE browsers to do this

Thread Tools

Display

Can I get NON-IE browsers to do this

Bookmarks

Bookmarks

Posting Permissions