views:

2078

answers:

5

I have a DIV element that is set to contain a table element.

The table element will have anywhere from 0 to upwards of 350 rows.

I thought the easiest way to size this DIV element was to apply the max-height property so the DIV element would grow as content was added and add a scroll bar once the content exceeds the max-height property.

Code:

<div style="max-height:209px;overflow:auto;">
     <table>
         <tr><td>CONTENT</td></tr>
     </table>
</div>

What I get instead is that when the content reaches the max-height limit, instead of applying the overflow property, the div element just keeps growing.

Of course this is only happening in IE7. Firefox and Safari work as designed.

Thanks.

edit: okay, here's the entire HTML page, ctrl+f "distances" for the area that I'm having problems with.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
 <title>Voyage Planning | Tools | Discharge Ports</title>
    <link rel="shortcut icon" type="image/x-icon" href="/vp/favicon.ico" />
 <!--[if gte IE 6]><!-->
  <link rel="stylesheet" type="text/css" href="/vp/_assets/css/screen.css" media="screen,projection,print" />
  <script type="text/javascript" src="/vp/_assets/js/jquery-1.2.3.min.js"></script>
     <script type="text/javascript" src="/vp/_assets/js/main.js"></script>
    <!--<![endif]-->
</head>
<body>
<script language="javascript" type="text/javascript">
<!-- 
 function dischargeport_selected()
 {
  if (document.postform.dpid.value == "")
   { window.location.href = "/vp/tools/dischargeports.asp"; }
  else
   { window.location.href = "/vp/tools/dischargeports.asp?dpid=" + document.postform.dpid.value; }
 }

 function submitform()
 {
  if (validateform() && confirm("Are you sure you want to update this discharge port?"))
  {
   document.getElementById("spinner").style.display = "block";
   document.getElementById("update").style.display = "none";
   document.getElementById("spinner").innerHTML = "<img src='/vp/_assets/img/spinner.gif' alt='' />"; 
  }
  else
   { return false; }
 }
 function validateform()
 {
  var isformcomplete = true;
  message = "The following tasks need to be completed     \nbefore continuing:\n\n";

  if (document.postform.name.value == "")
  {
   message += "* Enter the discharge port's name\n";
   isformcomplete = false;
  }
  if (!is_numeric(document.postform.transittime.value))
  {
   message += "* Transit times must be numeric\n";
   isformcomplete = false;
  }  
  if ( !is_numeric($("#port_costs").val()) )
  {
   message += "* Port costs must be numeric\n";
   isformcomplete = false;
  }   
  if (isformcomplete == false)
  {
   alert(message);
  }
  return isformcomplete;
 }
//-->
</script>
<div id="container">
 <div id="content">
     <div id="header">

  <div id="development">
   WEB SERVER:&nbsp;
   <span class="highlight">&nbsp;DEV&nbsp;</span> 
   &nbsp;SQL SERVER:&nbsp;
   <span class="highlight">&nbsp;DEV&nbsp;</span>
  </div>

 <span class="logo"><img src="/vp/_assets/img/header/logo.gif" /></span>
    <span class="randomPics"><img src="/vp/_assets/img/header/header4.gif" /></span>
</div>
<div class="clear"></div>
        <div id="menu">
         <span class="nav">
             <a href="/vp/index.asp">Main Menu</a>&nbsp;&gt;
                <a href="/vp/tools.asp">Tools</a>&nbsp;&gt;
                Discharge Ports
            </span>
            <span class="icons"><a href="/vp/tools/dischargeports.asp" class="tooltip" title="Add discharge port"><img src="/vp/_assets/img/icons/new.gif" alt="New" /></a><span class="spacer"></span><a href="/vp/scripts/logoff.asp" class="tooltip" title="Logoff"><img src="/vp/_assets/img/icons/logoff.gif" alt="Logoff" /></a></span>
        </div>
        <table>
         <caption>Edit discharge port</caption>
        </table>

        <br />
        <form method="post" action="/vp/tools/scripts/updatedischargeport.asp" name="postform" onSubmit="return submitform();">
        <input type="hidden" name="fromsubmit" value="true" />
        <input type="hidden" name="edit" value="true" />
        <table class="form fourcolumn">
            <tr>
                <th><span class="tooltip long" title="To edit an existing discharge port, select one from the drop down list">Discharge ports</span></th>
                <td>
                 <select name="dpid" class="large" onChange="dischargeport_selected();">
                    <option value="" ></option>

                  <option value="14" >AG [BUE] BUENOS AIRES</option>

                  <option value="126" >AG [ZZZ] Test</option>

                  <option value="107" >AG [ZAR] ZARATE</option>

                  <option value="4" selected="selected">AL [ALG] ALGERIA</option>

                  <option value="15" >AR [BUE] BUENOS AIRES</option>

                  <option value="109" >AR [CAM] CAMPANA</option>

                  <option value="27" >AR [DEL] DETLA DOCK</option>

                  <option value="55" >AR [MON] MONTEVIDEO</option>

                  <option value="108" >AR [ZAR] ZARATE</option>

                  <option value="3" >AU [ADE] ADELAIDE</option>

                  <option value="13" >AU [BRI] BRISBANE</option>

                  <option value="53" >AU [MEL] MELBOURNE</option>

                  <option value="116" >AU [NWC] NEW CASTLE</option>

                  <option value="65" >AU [PTK] PORT KEMBLA</option>

                  <option value="95" >AU [SYD] SYDNEY</option>

                  <option value="102" >AU [WEL] WELLINGTON</option>

                  <option value="5" >BL [ANT] ANTOFAGASTA</option>

                  <option value="8" >BL [ARI] ARICA</option>

                  <option value="110" >BR [ANG] ANGRA DOS REIS</option>

                  <option value="7" >BR [ARA] ARATU</option>

                  <option value="86" >BR [SEP] ITAGUAI</option>

                  <option value="63" >BR [PAR] PARANAGUA</option>

                  <option value="76" >BR [REC] RECIFE</option>

                  <option value="77" >BR [RGR] RIO GRANDE</option>

                  <option value="114" >BR [SAL] SALVADOR</option>

                  <option value="81" >BR [SAN] SANTOS</option>

                  <option value="113" >BR [FRA] SAO FRANCISCO DO SUL</option>

                  <option value="83" >BR [SAO] SAO SEBASTIAO</option>

                  <option value="78" >CA [RIJ] RIJEKA</option>

                  <option value="6" >CH [ANT] ANTOFAGASTA</option>

                  <option value="9" >CH [ARI] ARICA</option>

                  <option value="48" >CH [LIR] LIRQUEN</option>

                  <option value="82" >CH [SAN] SAN ANTONIO</option>

                  <option value="11" >CL [BAR] BARRANQUILLA</option>

                  <option value="16" >CL [BUE] BUENAVENTURA</option>

                  <option value="121" >CL [CAR] CARTAGENA</option>

                  <option value="25" >CN [DAL] DALIEN</option>

                  <option value="29" >CN [FNC] FANGCHENG</option>

                  <option value="120" >CN [LIA] LIANYUNGANG</option>

                  <option value="60" >CN [NAN] NANJING</option>

                  <option value="111" >CN [NTG] NANTONG</option>

                  <option value="73" >CN [QIN] QINHUANGDAO</option>

                  <option value="87" >CN [SHA] SHANGHAI</option>

                  <option value="88" >CN [SHE] SHEKOU</option>

                  <option value="18" >CR [CAL] CALDERA</option>

                  <option value="80" >DR [RIO] RIO HAINA</option>

                  <option value="32" >EC [GUA] GUAYAQUIL</option>

                  <option value="125" >EG [ALX] ALEXANDRIA</option>

                  <option value="17" >EG [CAI] CAIRO</option>

                  <option value="2" >ES [ACA] ACAJUTLA</option>

                  <option value="68" >GU [PTQ] PUERTO QUETAZAL</option>

                  <option value="69" >HN [PTQ] PUERTO QUETZAL</option>

                  <option value="36" >ID [JAK] JAKARTA</option>

                  <option value="40" >ID [KAU] KUATAN</option>

                  <option value="52" >ID [MED] MEDAN</option>

                  <option value="85" >ID [SEM] SEMARANG</option>

                  <option value="94" >ID [SUR] SURABAYA</option>

                  <option value="19" >IN [CAL] CALCUTTA</option>

                  <option value="38" >IN [KAN] KANDLA</option>

                  <option value="33" >IS [HAI] HAIFA</option>

                  <option value="42" >JM [KIN] KINGSTON</option>

                  <option value="21" >JP [CHI] CHIBA</option>

                  <option value="122" >JP [HAK] HAKATA</option>

                  <option value="41" >JP [KAW] KAWASAKI</option>

                  <option value="43" >JP [KOK] KOKURA</option>

                  <option value="49" >JP [MAI] MAIZURU</option>

                  <option value="54" >JP [MIZ] MIZUSHIMA</option>

                  <option value="61" >JP [NAN] NAN-YO  TOSOH</option>

                  <option value="119" >JP [NII] NIIHAMA</option>

                  <option value="123" >JP [ONA] ONAHAMA</option>

                  <option value="62" >JP [OSA] OSAKA</option>

                  <option value="89" >JP [SHI] SHIKIMA</option>

                  <option value="96" >JP [TAC] TACHIBANA</option>

                  <option value="104" >JP [YOK] YOKKAICHI</option>

                  <option value="35" >KR [INC] INCHEON</option>

                  <option value="46" >KR [KUN] KUNSAN</option>

                  <option value="71" >KR [PUS] PUSAN</option>

                  <option value="50" >KR [MAI] TRANSHIP TO MAIZURU</option>

                  <option value="101" >KR [ULS] ULSAN</option>

                  <option value="12" >ML [BIN] BINTULU</option>

                  <option value="45" >ML [KUA] KUANTAN</option>

                  <option value="64" >ML [PAS] PASIR GUDANG</option>

                  <option value="66" >ML [PTK] PORT KLANG</option>

                  <option value="58" >MV [MV] &nbsp;MEXICO - VITRO</option>

                  <option value="59" >MX [MX] &nbsp;MEXICO - NON-VITRO</option>

                  <option value="47" >NI [LAG] LAGOS</option>

                  <option value="57" >NZ [MTM] MT MANGANUE</option>

                  <option value="99" >NZ [TAU] TAURANGA</option>

                  <option value="103" >NZ [WEL] WELLINGTON</option>

                  <option value="10" >PA [BAL] BALBOA</option>

                  <option value="20" >PE [CAL] CALLAO</option>

                  <option value="72" >PK [QAS] </option>

                  <option value="39" >PK [KAR] KARACHI</option>

                  <option value="51" >PL [MAN] MANILA</option>

                  <option value="30" >PO [GDA] GDANSK</option>

                  <option value="91" >PO [STE] STETTIN</option>

                  <option value="84" >PO [SCZ] SZCZECIN</option>

                  <option value="117" >RA [KLA] KLAIPEDA</option>

                  <option value="115" >RA [SPT] ST. PETERSBURG</option>

                  <option value="79" >RJ [RIJ] RIJEKA WAREHOUSE</option>

                  <option value="23" >SA [CT] &nbsp;CAPE TOWN</option>

                  <option value="28" >SA [DUR] DURBAN</option>

                  <option value="90" >SG [SIN] SINGAPORE</option>

                  <option value="26" >SI [DAM] DAMMAM</option>

                  <option value="37" >SI [JED] JEDDAH</option>

                  <option value="74" >SI [RAK] RAK</option>

                  <option value="92" >TG [SUA] SUAO</option>

                  <option value="97" >TG [TAI] TAICHUNG</option>

                  <option value="1" >TH [01] &nbsp;KOS</option>

                  <option value="44" >TH [KOS] KOSICHANG</option>

                  <option value="31" >TK [GEM] GEMLIK</option>

                  <option value="100" >TK [TEK] TEKIRDAG</option>

                  <option value="70" >TR [PTS] PORT OF SPAIN</option>

                  <option value="124" >TW [KEE] KEELUNG</option>

                  <option value="93" >TW [SUA] SUAO</option>

                  <option value="98" >TW [TAI] TAICHUNG</option>

                  <option value="75" >UE [RAK] RAS AL KHAIMAH</option>

                  <option value="56" >UR [MON] MONTEVIDEO</option>

                  <option value="22" >VN [CL] &nbsp;CAI LAN</option>

                  <option value="34" >VN [HO] &nbsp;HO CHI MIN</option>

                  <option value="24" >VZ [CUM] CUMANA</option>

                  <option value="67" >VZ [PTO] PUERTO CABELLO</option>

                 </select>
                </td>
                <td colspan="2"></td>
            </tr>
            <tr><td class="break" colspan="4"><hr /></td></tr>  
            <tr>
             <th>Country</th>
                <td>

                      <strong>AL [Algeria]</strong>

                </td>
                <td colspan="2"></td>
           </tr>
            <tr>
             <th>Code</th>
                <td>

                      <strong>ALG</strong>

               </td>
                <td colspan="2"></td>
           </tr>
            <tr><td class="break" colspan="4"><hr /></td></tr>
            <tr>
             <th>Name<span class="required">*</span></th>
                <td><input type="text" class="large" name="name" value="ALGERIA" maxlength="30" /></td>
                <td colspan="2"></td>
           </tr>
            <tr><td class="break" colspan="4"><hr /></td></tr>
            <tr>
             <th>Surveyor</th>
                <td><input type="text" class="large" name="surveyor" value="SGS" maxlength="30" /></td>
                <td colspan="2"></td>
           </tr>
            <tr>
             <th>Ship agent</th>
                <td><input type="text" class="large" name="shipagent" value="EUROMAR" maxlength="30" /></td>
                <td colspan="2"></td>
           </tr>   
            <tr>
             <th>Transit time</th>
                <td><input type="text" class="small" name="transittime" value="0" maxlength="3" /></td>
                <td colspan="2"></td>
           </tr>
            <tr><td class="break" colspan="4"><hr /></td></tr>
            <tr>
             <th>Port costs</th>
                <td><input type="text" class="small" name="port_costs" id="port_costs" value="0" maxlength="10" />&nbsp;<strong>($)</strong></td>
                <td colspan="2"></td>
           </tr>              
        </table>

          <br />
          <table><caption class="subcaption">Distance to load ports</caption></table>
                <br />

                <table class="form fourcolumn">
                 <tr>
                     <th>Load ports</th>
                     <td>
                         <select name="add_loadport" class="large">
                      <option value="" selected="selected"></option>

                              <option value="BEA" >BEA [BEAUMONT]</option>

                              <option value="BRO" >BRO [BROWNSVILLE]</option>

                              <option value="CAS" >CAS [CASTELLON ESP]</option>

                              <option value="LAR" >LAR [LAREDO]</option>

                              <option value="LBC" >LBC [LONG BEACH CA.]</option>

                              <option value="LON" >LON [LONGVIEW WA]</option>

                              <option value="LOS" >LOS [LOS ANGELES]</option>

                              <option value="OTH" >OTH [OTHER]</option>

                              <option value="POR" >POR [PORT ARTHUR TX]</option>

                              <option value="PTL" >PTL [PORTLAND OR.]</option>

                              <option value="RAK" >RAK [RAS AL KAIMAH]</option>

                              <option value="RIJ" >RIJ [RIJEKA]</option>

                              <option value="SAN" >SAN [SAN DIEGO CA]</option>

                              <option value="TRO" >TRO [TRONA]</option>

                              <option value="ZZZ" >ZZZ [Test]</option>

                      </select>
                        </td>
                        <th>Nautical miles</th>
                        <td><div style="float:left;"><input type="text" class="small" name="add_loadport_nauticalmiles" id="add_loadport_nauticalmiles" value="0" maxlength="10" /></div><div style="float:right;"><img src="/vp/_assets/img/buttons/add.gif" name="add_loadport_btn" id="add_loadport_btn" alt="" /></div></td>
                    </tr>
    </table>          
                <br />
                <div style="max-height:197px;overflow:auto;">
                 <table class="distances">

                     <tr>
                         <th>To</th>
                         <td>[BRO] BROWNSVILLE</td>
                            <th>Nautical miles</th>
                            <td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
                        </tr>

                     <tr>
                         <th>To</th>
                         <td>[BRO] BROWNSVILLE</td>
                            <th>Nautical miles</th>
                            <td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
                        </tr>

                     <tr>
                         <th>To</th>
                         <td>[BRO] BROWNSVILLE</td>
                            <th>Nautical miles</th>
                            <td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
                        </tr>

                     <tr>
                         <th>To</th>
                         <td>[BRO] BROWNSVILLE</td>
                            <th>Nautical miles</th>
                            <td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
                        </tr>

                     <tr>
                         <th>To</th>
                         <td>[BRO] BROWNSVILLE</td>
                            <th>Nautical miles</th>
                            <td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
                        </tr>

                     <tr>
                         <th>To</th>
                         <td>[BRO] BROWNSVILLE</td>
                            <th>Nautical miles</th>
                            <td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
                        </tr>

                     <tr>
                         <th>To</th>
                         <td>[BRO] BROWNSVILLE</td>
                            <th>Nautical miles</th>
                            <td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
                        </tr>

                     <tr>
                         <th>To</th>
                         <td>[BRO] BROWNSVILLE</td>
                            <th>Nautical miles</th>
                            <td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
                        </tr>

                     <tr>
                         <th>To</th>
                         <td>[BRO] BROWNSVILLE</td>
                            <th>Nautical miles</th>
                            <td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
                        </tr>

                     <tr>
                         <th>To</th>
                         <td>[BRO] BROWNSVILLE</td>
                            <th>Nautical miles</th>
                            <td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
                        </tr>

                     <tr>
                         <th>To</th>
                         <td>[BRO] BROWNSVILLE</td>
                            <th>Nautical miles</th>
                            <td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
                        </tr>

                     <tr>
                         <th>To</th>
                         <td>[BRO] BROWNSVILLE</td>
                            <th>Nautical miles</th>
                            <td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
                        </tr>

                     <tr>
                         <th>To</th>
                         <td>[BRO] BROWNSVILLE</td>
                            <th>Nautical miles</th>
                            <td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
                        </tr>

                     <tr>
                         <th>To</th>
                         <td>[BRO] BROWNSVILLE</td>
                            <th>Nautical miles</th>
                            <td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
                        </tr>

                     <tr>
                         <th>To</th>
                         <td>[BRO] BROWNSVILLE</td>
                            <th>Nautical miles</th>
                            <td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
                        </tr>

                    </table>
                </div>              
                <br />
                <table><caption class="subcaption">Distance to discharge ports</caption></table>
                <br />

                <table class="form fourcolumn">
                 <tr>
                     <th>Discharge ports</th>
                     <td>
                         <select name="add_dischargeport" class="large">
                      <option value="" selected="selected"></option>

                              <option value="14" >AG [BUE] BUENOS AIRES</option>

                              <option value="126" >AG [ZZZ] Test</option>

                              <option value="107" >AG [ZAR] ZARATE</option>

                              <option value="4" >AL [ALG] ALGERIA</option>

                              <option value="15" >AR [BUE] BUENOS AIRES</option>

                              <option value="109" >AR [CAM] CAMPANA</option>

                              <option value="27" >AR [DEL] DETLA DOCK</option>

                              <option value="55" >AR [MON] MONTEVIDEO</option>

                              <option value="108" >AR [ZAR] ZARATE</option>

                              <option value="3" >AU [ADE] ADELAIDE</option>

                              <option value="13" >AU [BRI] BRISBANE</option>

                              <option value="53" >AU [MEL] MELBOURNE</option>

                              <option value="116" >AU [NWC] NEW CASTLE</option>

                              <option value="65" >AU [PTK] PORT KEMBLA</option>

                              <option value="95" >AU [SYD] SYDNEY</option>

                              <option value="102" >AU [WEL] WELLINGTON</option>

                              <option value="5" >BL [ANT] ANTOFAGASTA</option>

                              <option value="8" >BL [ARI] ARICA</option>

                              <option value="110" >BR [ANG] ANGRA DOS REIS</option>

                              <option value="7" >BR [ARA] ARATU</option>

                              <option value="86" >BR [SEP] ITAGUAI</option>
+1  A: 

Try setting just the height, and overflow to 'scroll'. Visually, there may not be a difference between the outter-box being full-height, and it not being full-height. If that is the case, I would simply refrain from using max-height in place of height.

Could you show us a bit more of your code, or perhaps an online demonstration? I'd be interested in seeing some of the css, and the doctype.

Jonathan Sampson
That works but I was hoping to avoid that as doing so the div container will be 200px height even if there is only one element contained therein.
Tom
Could you show us more of your code? Primarily your doctype?
Jonathan Sampson
I don't have a doctype declared.
Tom
Uh-oh. I won't say that your present issue is caused by that, but you should start selecting and adhering to a doctype.
Jonathan Sampson
I suggest Strict. You can read more about doctypes at http://stackoverflow.com/questions/255470/what-are-the-different-doctypes-in-html-and-what-do-they-mean
Jonathan Sampson
A: 

What version of IE7 are you using? Max-height support wasn't added until beta 2.

The scrollbar shows up in the Compatibility View (the IE7 engine) in IE8.

Are you sure you aren't using IE6?

Emily
Yeah, I'm using version 7.0.5730.13
Tom
+3  A: 
David Dorward
While I completely agree with the statement to use standards mode ... I just tested this in xhtml strict and html 4.01 transitional in IE7 and it behaves properly in both--his problem is elsewhere.
rpflo
max-height works in both standards and almost standards modes. As long as you declare the doctype with a system identifier (the dtd link) IE7 will render the page in almost standards mode.
Sam DeFabbia-Kane
Almost standards mode is a Gecko concept. IE just has two modes. Strict can be triggered with an HTML 4.01 Transitional Doctype (you just need to use the system identifier as well as the public identifier). XHTML 1.0 Strict will trigger Standards mode with or without a system identifier (but the Doctype given in the spec uses one so you should too).
David Dorward
A: 

I just copy and pasted your code, and then dropped in a php loop to create 200 rows or just 2 and it behaves the same in IE 7, Safari, and Firefox.

You probably aren't declaring a doctype, that creates the problem you're describing in my test.

Or in your real code you haven't properly defined overflow:auto. Your issue is exactly what would happen if that was the case.

It's defined here in the question, but maybe not your code.

rpflo
Yeah, I'm stumped, cannot get it to work in IE7 for me. I'll post the entire page.I am pretty clueless about declaring doctypes, have never used it.
Tom
A: 

http://msdn.microsoft.com/en-us/library/ms530809%28VS.85%29.aspx

says that max-height doesn't work with tables. try removing the table that is inside your div.

davidw