?
Solved

scrolling div 100% height - ie error

Posted on 2011-04-23
2
Medium Priority
?
446 Views
Last Modified: 2012-05-11
I have the following code which works perfectly in all browsers except for IE. IE doesn't do what it's supposed to do (stretch the div to 100% height, and scroll), and also gives me the error 'object expected'.

Please help. Or does somebody have some replacement code that will achieve the same result without errors?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>photos</title>
<link href="css/chatt.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function clearText(field){

    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;

}
</script>
<script type="application/javascript">

function align(x)
{
     var divx = document.getElementById(x);
	newHeight = window.innerHeight-385;
	divx.style.height=newHeight+"px";
}



</script>
<style type="text/css">
#scroll_wrapper2 {overflow:auto; z-index:3;}
}
</style>
</head>
<body onload="align('scroll_wrapper2');" onresize="align('scroll_wrapper2');"> 
<table width="30%" border="0" cellpadding="0" cellspacing="0" class="main_table">
  <tr>
    <td align="left" valign="top">
    <form id="search" name="search" method="post" action="">
    <div class="search_box"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
      <tr>
        <td>
          <div class="search_middle">
           
            <input name="textfield" type="text" class="profile_input" id="textfield" value="search..." onFocus="clearText(this)" onBlur="clearText(this)"/>
            
          </div>
        
          </td>
        <td width="38" align="right" valign="top"><a href="#"><img src="images/search_button.jpg" width="38" height="38" border="0" /></a></td>
      </tr>
    </table></div></form></td>
  </tr>
  <tr class="table_spacer">
    <td align="left" valign="top"><div class="table_spacer"></div></td>
  </tr>
  <tr>
    <td align="left" valign="top"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" width="571" height="308" border="0" class="photo_box"><div id="scroll_wrapper2">
      <div class="photos_box">
        <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0" class="thumbnail_table">
          <tr>
            <td align="left"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
            <td align="center"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
            <td align="right"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
          </tr>
          <tr>
            <td align="left"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
            <td align="center"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
            <td align="right"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
          </tr>
          <tr>
            <td align="left"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
            <td align="center"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
            <td align="right"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
          </tr>
          <tr>
            <td align="left"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
            <td align="center"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
            <td align="right"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
          </tr>
          <tr>
            <td align="left"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
            <td align="center"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
            <td align="right"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
          </tr>
          <tr>
            <td align="left"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
            <td align="center"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
            <td align="right"><img src="http://www.rapturegraphicsolutions.net/images/friend_thumbnail.gif" border="0" class="thumbnail_box"></td>
          </tr>
        </table>
      </div>
    </div></td>
  </tr>
  <tr>
  <tr class="table_spacer">
    <td align="left" valign="top"><div class="table_spacer"></div></td>
  </tr>
  <td align="center">
    <div class="edit_profile_box" onclick="location.href='edit_photos.html';">
  <div class="edit_middle"><a href="edit_photos.html" target="_self" class="edit_link">Edit Photos</a></div>
      </div>
    </td>
  </tr>
</table>
</body>
</html>

Open in new window

0
Comment
Question by:brettacvh
2 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 35456469
This seems a bit odd:

<script type="application/javascript">

Found this at http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

window.innerHeight/Width
    Provided by most browsers, but not Internet Explorer 8-, and even in Internet Explorer 9+, it is not available in quirks mode.
0
 
LVL 22

Accepted Solution

by:
Mrunal earned 2000 total points
ID: 35475014
IE does not support div's height as 100%.

Best way, you can use table instead of div.
This would work perfect in all browsers.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question