IE7 Div 100% Height Issue

Div 100% height works on Firefox but not in IE. What to do?

Page 1 of 1

4 Replies - 3718 Views - Last Post: 27 April 2010 - 11:36 PM

#1 shalutomar  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 23-April 10

IE7 Div 100% Height Issue

Posted 23 April 2010 - 04:57 AM

I set internal div to 100% height. That works fine in Firefox, however in IE the divs do not stretch to 100% height.:(

Here the 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=utf-8" />

<title>Untitled Document</title>


<style type="text/css">

html, body { height:100%; } 
#treediv { height:100; } 

body {
	margin-left: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;	
}  
   
.font11 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	background-color:#EFF1F1;	
}

.textboxstyle{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#333;
border:1px solid #555555;
float:right;
}

.link{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#0000FF;
font-style:normal;
font-variant:normal;
font-weight:normal;
padding:5px 2px 5px 0px;
}

.DropDownall{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#333;
border:1px solid #555555;
}
.border{ 
border:1px solid #B9BCC0;  border-collapse:collapse;
background-color:#FAFAFA;
}

.TBLborder{ 
border:1px solid #B9BCC0;  border-collapse:collapse;
padding:5px 0px 5px 2px;
background-color:#ffffff;
}

.TBLborder-name{ 
border:1px solid #B9BCC0;  border-collapse:collapse;
padding:5px 0px 5px 2px;
background-color:#DADADA;
}


.heading-bg{
font-size:12px;
padding:8px 0px 8px 2px;
background-color:#DADADA;
}

.advance-search-bgwhite{
padding:8px 0px 8px 2px;
background-color:#ffffff;
}
.advance-search-bggrey{
padding:8px 0px 8px 2px;
background-color:#F3F3F4;
}

  #treediv{
	  BORDER-bottom:1px solid #999999; 
	  OVERFLOW-x:scroll; 
	  OVERFLOW-y:hidden; 
	  WIDTH:150px; 
	  height: 100%;
	  *height:100;
	}

   ul.tree, ul.tree ul {
     list-style-type: none;
	 text-decoration:none;
     margin: 0;
     padding: 0;
	 white-space:nowrap;
	 display:inline;
   }
   
   ul.tree ul {
     margin-left:20px;
     text-decoration:none;	 
   }

   ul.tree li {
     margin: 0;
     padding: 0 12px;
     line-height: 22px;
     color: #3a77b4;
     font:12px Verdana, Arial, Helvetica, sans-serif;
     background: white url(list.gif) no-repeat left center;
	 
   }

</style>

 <script type="text/javascript">
        <!--
            function initNodes(){
            var uls = document.getElementsByTagName("ul");
            var i;
                for(i = 0; i < uls.length; i++)
                    if(uls[i].id != "root")
                        uls[i].style.display = "none";
            }

            function clickNode(id){
            var node = document.getElementById(id);
                if(node.style.display == "none")
                    node.style.display = "block";
                else
                    node.style.display = "none";
                return false;
            }
        -->
        </script>
        
</head>
<body onload="initNodes()">

<table width="570px" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr height="100%">
    <td style="width:20%; height:100%;" valign="top">
    <DIV id="treediv">
     <ul id="root" class="tree">
        
        <li><a href="" onclick="return clickNode('r1n1')">Root 1</a>
            <ul id="r1n1">
            
                <li> Node 1.1 </li>
                
                <li><a href="" onclick="return clickNode('r1n2n1')">Node 1.2</a>
                    <ul id="r1n2n1">
                        <li> Node 1.2.1 </li>
                        <li><a href="" onclick="return clickNode('r1n2n1n1')">Node 1.2.2</a>
                            <ul id="r1n2n1n1">
                                <li> Node 1.2.1.1 </li>
                                <li> Node 1.2.1.2</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        
        <li><a href="" onclick="return clickNode('r2n1')">Root 2</a>
            <ul id="r2n1">
                <li> Node 1 </li>
                <li> Node 2 </li>
            </ul>
        </li>
        
        
        <li><a href="" onclick="return clickNode('r3n1')">Root 3</a>
            <ul id="r3n1">
                <li> Node 1 </li>
            </ul>
        </li>
        
        
    </ul>
     </DIV>   
    </td>
    <td width="80%" height="100%"><table width="100%"  border="0" align="center" cellpadding="1" cellspacing="5" class="border">

  <tr>
    <td colspan="2"><input  name="search" type="text" class="textboxstyle" id="S1" value="Search.." /></td>
  </tr>
  <tr>
    <td class="link" colspan="2" align="right"><a href="#">Advanced Search </a></td>
  </tr>
  <tr class="bgcolor">
    <td colspan="2">
	<table width="100%" border="0" align="center" cellpadding="2" cellspacing="0" class="font11 border">
      <tr>
        <td colspan="5" class="heading-bg"><strong>Advanced Search</strong></td>
        </tr>
     
      <tr >
        <td width="15%"  class="advance-search-bggrey"><b>Key words  : </b></td>
        <td colspan="4"  class="advance-search-bggrey"><table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="102" ><select name="select2" id="select2" class="DropDownall" style="width:85px">
              <option>Keyword1</option>
                </select></td>
            <td width="252">
              <input type="text" class="textboxstyle" id="contains" value="Field" style="width:249px" /></td>
          </tr>
        </table></td>
      </tr>
	  
	  <tr>
        <td class="advance-search-bggrey"><b>Key words  : </b></td>
        <td colspan="4" class="advance-search-bggrey"><table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="102" ><select name="select2" id="select2" class="DropDownall" style="width:85px">
              <option>Keyword1</option>
                </select></td>
            <td width="128">
              <input type="text" class="textboxstyle" id="contains" value="Field" style="width:249px" /></td>
          </tr>
        </table></td>
      </tr>
	  <tr>
        <td  class="advance-search-bggrey"><b>Key words  : </b> </td>
        <td colspan="4"  class="advance-search-bggrey"><table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="102" ><select name="select2" id="select2" class="DropDownall" style="width:85px">
              <option>Keyword1</option>
                </select></td>
            <td width="128">
              <input type="text" class="textboxstyle" id="contains" value="Field" style="width:249px" /></td>
          </tr>
        </table></td>
      </tr>
	  
      <tr>
        <td class="advance-search-bggrey"><b>Key words  : </b></td>
        <td colspan="4" class="advance-search-bggrey"><select name="select" id="select" class="DropDownall" style="width:355px">
          <option>-Select-</option>
        </select></td>
        </tr>
	  <tr>
        <td class="advance-search-bggrey">&nbsp;</td>
        <td width="31%" align="right" class="advance-search-bggrey"><input type="submit" name="Submit" value="Search" /></td>
        <td width="14%"class="advance-search-bggrey"><input type="submit" name="Submit" value="Search" /></td>
        <td width="40%"align="left" class="advance-search-bggrey"><input type="submit" name="Submit2" value="Clear" /></td>
	  </tr>
    </table></td>
  </tr>
   <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
    <tr>
    <td width="100%">
	<table width="100%" border="0" cellspacing="0" cellpadding="3" class="border font11">
      <tr >
        <td  width="20%" class="TBLborder-name" ><b>Name</b></td>
        <td  width="20%" class="TBLborder-name"><b>Description</b></td>
        <td  width="20%" class="TBLborder-name"><b>Version</b></td>
        <td width="20%"  class="TBLborder-name"><b>Last Updated</b> </td>
        <td width="20%"  class="TBLborder-name"><b>Owner</b> </td>
      </tr>
      <tr>
        <td class="TBLborder" >Policy.doc</td>
        <td class="TBLborder" >Policy for abc </td>
        <td class="TBLborder" >1.7</td>
        <td class="TBLborder" >2009-09-09</td>
        <td class="TBLborder" >&nbsp;</td>
      </tr>
      <tr>
        <td class="TBLborder" >Policy.doc</td>
        <td class="TBLborder" >Policy for abc </td>
        <td class="TBLborder" >1.7</td>
        <td class="TBLborder" >2009-09-09</td>
        <td class="TBLborder" >&nbsp;</td>
      </tr>
      
    </table></td>
  </tr>
    <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
</table></td>
  </tr>
</table>
</body>
</html>



Is there something I am doing wrong? Or any Firefox/IE quirks I am missing out?

Help!!!!


Admin Edit: Please use code tags when posting your code. Code tags are used like so => :code:

Thanks,
PsychoCoder :)

This post has been edited by PsychoCoder: 23 April 2010 - 11:02 AM


Is This A Good Question/Topic? 0
  • +

Replies To: IE7 Div 100% Height Issue

#2 Sn0wBum  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 9
  • View blog
  • Posts: 178
  • Joined: 04-February 10

Re: IE7 Div 100% Height Issue

Posted 23 April 2010 - 06:52 AM

Two things... one, [rules][/rules]


Two, what version of IE are you using?
Was This Post Helpful? 0
  • +
  • -

#3 oomlaut  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 27
  • Joined: 07-April 09

Re: IE7 Div 100% Height Issue

Posted 23 April 2010 - 11:00 AM

Judging from the post title, I'm guessing it's IE7.

Here was the number 1 result when I entered "100% height div" into good ol Google. That's a freebie.

Working with height in modern browsers is not always intuitive, but essentially unless you have specified a height attribute or style for the parent element "100%" will only render the element to the minimum dimensions to show any non-overflowing content. Your best bet might be Javascript.
Was This Post Helpful? 0
  • +
  • -

#4 shalutomar  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 23-April 10

Re: IE7 Div 100% Height Issue

Posted 25 April 2010 - 10:06 PM

View PostSn0wBum, on 23 April 2010 - 05:52 AM, said:

Two things... one, [rules][/rules]


Two, what version of IE are you using?


I'm using IE7.
Was This Post Helpful? 0
  • +
  • -

#5 sam_benne  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 16
  • View blog
  • Posts: 732
  • Joined: 16-January 08

Re: IE7 Div 100% Height Issue

Posted 27 April 2010 - 11:36 PM

From looking at your CSS i'm guessing its #treediv that you are having a problem with. first on the IE8 fix its needs to have a % after the 100. Secondly I would try adding a clear: both; in case it is inheriting a float from somewhere.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1