JavaScript Forum

**monkey64** · 02-03-2007, 04:51 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>

**saadatshah** · 12:54 AM

Read these:

http://www.w3.org/TR/html4/sgml/dtd.html

http://www.htmlhelp.com/tools/validator/doctype.html

and figure out the right doctype for you. Hope it helps

**willcode4beer** · 02-05-2007, 08:11 AM

Does the page validate when using the XHTML Doctype?

I noticed the line

Code:

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

in your post.

OTOH, guessing that the posting is contrived, and the real page correct (your link gave me a 404) I think you may be having problems with the offsetheight prop.
Take a look at the following for some more info:
http://www.killersites.com/mvnforum/...ad?thread=4063

**Tudor.b** · 02-05-2007, 08:58 AM

Problem solved here: http://www.webmaster-talk.com/html-f...efox-look.html

**logic ali** · 02-05-2007, 09:07 AM

Quote:

Originally Posted by monkey64

Code:

 x.style.height = y + amount;

Specify the units.

Code:

x.style.height = y + amount + 'px';

and the link should be written:

Code:

<a href="#" onclick="changeOff();return false">