HTML Forum

**monkey64** · 02-03-2007, 04:42 PM

Hi there

I am attempting to make a DIV resize automatically using Javascript.
I have written the code and it works in IE7, but not in Firefox.
Removing the Doctype enables it to run in FF.
I validated the code and it passed.

Here it is in action: http://www.realbabyguide.co.uk/div%20heights.html

Any ideas which Doctype to use. I have tried every one!
Thanks

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
<title>A Test</title>
<style type="text/css">
 body
 {
 background-color:#00CCFF;
 }
 
 .outer
 {
 font-size: 16px;
 background-color:#00CC00;
 padding: 10px;
 width: 100%;
 border-width: 1px;
 border-style: solid;
 border-color: #cc0000;
 }
 #inner
 {
 font-size: 16px;
 background-color:#CC6633;
 padding: 10px;
 width: 50%;
 border-width: 1px;
 border-style: solid;
 border-color: #cc0000;
 }
 
</style>
 
</head>
<body>
<script language="javascript" type="text/javascript">
function getOff()
{
 x = document.getElementById('inner');
 return x.offsetHeight;
 }
function changeOff(amount)
{
 amount = 600-getOff();
 var y = getOff();
 x.style.height = y + amount;
}
</script>
 
<div class="outer">
 <div id="inner">
 
   <h1>This script resizes my "inner" DIV height to 600px - the current height.</h1>
 
   <p>However, although it works in IE7 (haven't tried other IE versions), it will not work in Firefox (2.0.0.1).<br />
   Removing the Doctype enables it to work in Firefox, but screws up IE7 as it renders the page in Quirks mode.<br />
   The page    
   <a href="<A href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.realbabyguide.co.uk%2Fdiv%2520heights.html">validates.</a">http://validator.w3.org/check?uri=http%3A%2F%2Fwww.realbabyguide.co.uk%2Fdiv%2520heights.html">validates.</a>
   </a> 
   <br />
   Any ideas? 
   </p>
 
 </div><!-- Close inner DIV -->
 
</div><!-- Close outer DIV -->
<a href="javascript:changeOff()">Click here and the DIV should resize</a>
</body>
</html>

**LadynRed** · 02-03-2007, 05:21 PM

I suspect it has more to do with your script than the DTD, FF has no problems with DTD's that I'm aware of.
I use:

<!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">

I guess I don't see the point in the script anyway. What are you trying to achieve with it ??

There is a JS height adjustment script that does work:
http://www.ampsoft.net/webdesign-l/m...to-bottom.html