I have a php page with an HTML form that works fine in chrome and firefox, but in IE this popup shows up upon submitting the form:
It's confusing because I don't have any sort of validation on the page, so what is it that returns false?
<form name="qualityform" action="" method="post">
<input type="hidden" name="process" value="yes" />
<input type="hidden" name="ref" value="<?=$refvalue?>" />
<input type="hidden" name="email" value="<?=$emailvalue?>" />
<input type="hidden" name="interface" value="<?=$interface?>" />
<input type="hidden" name="cemail" value="<?=$cemail?>" />
<input type="hidden" name="greeting" value="<?=$greeting?>" />
<table border="0" width="100%">
<tbody>
<tr class="dq_allTravelers " id="tr_qid12" height="30">
<td width="30%"><font style="font-size: 12px;" face="Verdana"><?=$language[$interface]['over_all_Satisfaction']?>:</font></td>
<td width="10%" class="detailsRatings" onMouseOver="ta.call('ta.userreview.addDynamicRatingObject', event, this)"><label class="visuallyHidden"> <?=$language[$interface]['over_all_Satisfaction']?>
<select name="over_all_Satisfaction" id="over_all_Satisfaction">
<option value="">Select one</option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</label>
<span id="qid12_bubbles" class="rate rate_s gs00 qid12"> <img src="<?php echo $pageURL;?>images/ratings-v7.png"> </span></td>
<td width="20%" id="AMENITY_RATING_BUBBLE_TEXT_qid12" style="color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;"></td>
</tr>
<tr class="dq_allTravelers " id="tr_qid12" height="30">
<td><font style="font-size: 12px;" face="Verdana"><?=$language[$interface]['Will_you_hire']?>?</font></td>
<td><input type="radio" name="will_you_hire_us" value="Yes" /> <font style="font-size: 12px;" face="Verdana">Yes</font> <input type="radio" name="will_you_hire_us" value="No" /> <font style="font-size: 12px;" face="Verdana">No</font></td>
<td> </td>
</tr>
<tr class="dq_allTravelers " id="tr_qid12" height="30">
<td><font style="font-size: 12px;" face="Verdana"><?=$language[$interface]['Will_you_recommend']?>?</font></td>
<td><input type="radio" name="will_you_recommend" value="Yes" /> <font style="font-size: 12px;" face="Verdana">Yes</font> <input type="radio" name="will_you_recommend" value="No" /> <font style="font-size: 12px;" face="Verdana">No</font></td>
<td> </td>
</tr>
<tr><td class="3">
</td></tr>
<tr class="dq_allTravelers " id="tr_qid13" height="30">
<td><font style="font-size: 12px;" face="Verdana"><?=$language[$interface]['Communication']?>:</font></td>
<td class="detailsRatings" onMouseOver="ta.call('ta.userreview.addDynamicRatingObject', event, this)"><label class="visuallyHidden"> <?=$language[$interface]['Communication']?>
<select name="Communication" id="Communication">
<option value="">Select one</option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</label>
<span id="qid13_bubbles" class="rate rate_s gs00 qid13"> <img src="<?php echo $pageURL;?>images/ratings-v7.png"> </span></td>
<td id="AMENITY_RATING_BUBBLE_TEXT_qid13" style="color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;"></td>
</tr>
<tr class="dq_allTravelers " id="tr_qid14" height="30">
<td><font style="font-size: 12px;" face="Verdana"><?=$language[$interface]['Quality']?>:</font></td>
<td class="detailsRatings" onMouseOver="ta.call('ta.userreview.addDynamicRatingObject', event, this)"><label class="visuallyHidden"> <?=$language[$interface]['Quality_of_our_work']?>
<select name="Quality" id="Quality">
<option value="">Select one</option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</label>
<span id="qid14_bubbles" class="rate rate_s gs00 qid14"> <img src="<?php echo $pageURL;?>images/ratings-v7.png"> </span></td>
<td id="AMENITY_RATING_BUBBLE_TEXT_qid14" style="color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;"></td>
</tr>
<tr class="dq_allTravelers " id="tr_qid15" height="30">
<td><font style="font-size: 12px;" face="Verdana"><?=$language[$interface]['Speed_of_our_work']?>:</font></td>
<td class="detailsRatings" onMouseOver="ta.call('ta.userreview.addDynamicRatingObject', event, this)"><label class="visuallyHidden"> <?=$language[$interface]['Speed']?>
<select name="Speed" id="Speed">
<option value="">Select one</option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</label>
<span id="qid15_bubbles" class="rate rate_s gs00 qid15"> <img src="<?php echo $pageURL;?>images/ratings-v7.png"> </span></td>
<td id="AMENITY_RATING_BUBBLE_TEXT_qid15" style="color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;"></td>
</tr>
<tr class="dq_allTravelers " id="tr_qid16" height="30">
<td><font style="font-size: 12px;" face="Verdana"><?=$language[$interface]['Value']?>:</font></td>
<td class="detailsRatings" onMouseOver="ta.call('ta.userreview.addDynamicRatingObject', event, this)"><label class="visuallyHidden"> <?=$language[$interface]['Value']?>
<select name="Value" id="Value">
<option value="">Select one</option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
</label>
<span id="qid16_bubbles" class="rate rate_s gs00 qid16"> <img src="<?php echo $pageURL;?>images/ratings-v7.png"> </span></td>
<td id="AMENITY_RATING_BUBBLE_TEXT_qid16" style="color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;"></td>
</tr>
<tr height="25">
<td valign="top"><font style="font-size:12px;" face="Verdana"><?=$language[$interface]['comment']?>:</font></td>
<td colspan="2"><textarea name="comment" class="element text medium" style="width:200px; height:100px;font-family: Lato;font-size: 13px;"></textarea></td>
</tr>
<tr><td> </td></tr>
<tr><td colspan="3">
<input type="submit" name="submit_form" value="<?=$language[$interface]['Submit']?>" class="button_text" style="font: bold 16px Lato;color: #fff;background-color: #09bef2;width: 286px;border:0;height:26px"/>
</td></tr>
</tbody>
</table>
</form>
Thanks
Related
I have a Bootstrap table with 2 columns which appears correctly as follows:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<tr>
<td>Address One:</td>
<td><input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td>
</tr>
<tr>
<td>Address Two:</td>
<td><input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td>
</tr>
<tr>
<td>Suburb:</td>
<td><input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td>
</tr>
<tr>
<td>State:</td>
<td>
<select class="form-control shipmentState" name="shipToState" id="shipToState">
<option value=""></option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="NT">NT</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
</select>
</td>
</tr>
<tr>
<td>Postcode:</td>
<td><input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td>
</tr>
<tr>
<td>Country:</td>
<td>
<select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry">
<option value=""></option>
<option value="Australia">Australia</option>
<option value="Japan">Japan</option>
</select>
</td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td>
</tr>
</table>
I would now like to combine the State and Postcode so they appear on the same line as they don't require a lot of space each, but when I combine these they stretch outside of the other rows like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<tr>
<td>Address One:</td>
<td><input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td>
</tr>
<tr>
<td>Address Two:</td>
<td><input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td>
</tr>
<tr>
<td>Suburb:</td>
<td><input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td>
</tr>
<tr>
<td>State:</td>
<td>
<select class="form-control shipmentState" name="shipToState" id="shipToState">
<option value=""></option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="NT">NT</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
</select>
</td>
<td>Postcode:</td>
<td><input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td>
</tr>
<tr>
<td>Country:</td>
<td>
<select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry">
<option value=""></option>
<option value="Australia">Australia</option>
<option value="Japan">Japan</option>
</select>
</td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td>
</tr>
</table>
and I can't work out how to keep the original width and combine the state/postcode into that original width.
I have tried this by adding colspan="2" in each element. So that each td takes a width of 2 columns in each row except State and Postcode row.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<tr>
<td colspan="2">Address One:</td>
<td colspan="2"><input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td>
</tr>
<tr>
<td colspan="2">Address Two:</td>
<td colspan="2"><input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td>
</tr>
<tr>
<td colspan="2">Suburb:</td>
<td colspan="2"><input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td>
</tr>
<tr>
<td>State:</td>
<td>
<select class="form-control shipmentState" name="shipToState" id="shipToState">
<option value=""></option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="NT">NT</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
</select>
</td>
<td>Postcode:</td>
<td><input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td>
</tr>
<tr>
<td colspan="2">Country:</td>
<td colspan="2">
<select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry">
<option value=""></option>
<option value="Australia">Australia</option>
<option value="Japan">Japan</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">Phone:</td>
<td colspan="2"><input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td>
</tr>
</table>
Further to make it look better you can right-align the labels.
I am using the chosen select plugin in a bootstrap site and in a table. My problem is, as u can see on the picture, the width will be bigger in each row.
The bootstrap and the chosen css is the basis.
The generated html in the page source:
<table class="table table-hover table-bordered list"><thead style="font-weight:bold;">
<tr class="tr_bold">
<td style="text-align: center;">ID</td>
<td class="left">Megnevezés</td>
<td style="text-align: center;">Egység</td>
<td>Bruttó ár</td>
<td>Akciós ár</td>
<td style="text-align: center;">Akciós</td>
</tr>
</thead><tbody> <tr id="sor52">
<input type="hidden" name="sav_id[]" class="sav_input" value="52" />
<td style="text-align: center;">52</td>
<td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=52">Barabás Gerecse térkő őszilomb</a></td>
<td style="text-align: center;">m2</td>
<td><input type="text" name="a[52]" value="1000" class="form-control" /></td>
<td><input type="text" name="b[52]" value="500" class="form-control" /></td>
<td style="text-align: center;">
<select name="termek_akcio[52]" class="input input-select form-control">
<option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select>
</td>
</tr>
<tr id="sor117">
<input type="hidden" name="sav_id[]" class="sav_input" value="117" />
<td style="text-align: center;">117</td>
<td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=117">Barabás Patent térkő 222</a></td>
<td style="text-align: center;">m2</td>
<td><input type="text" name="a[117]" value="1000" class="form-control" /></td>
<td><input type="text" name="b[117]" value="500" class="form-control" /></td>
<td style="text-align: center;">
<select name="termek_akcio[117]" class="input input-select form-control">
<option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select>
</td>
</tr>
<tr id="sor50">
<input type="hidden" name="sav_id[]" class="sav_input" value="50" />
<td style="text-align: center;">50</td>
<td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=50">Barabás Somló Trió térkő holdfény</a></td>
<td style="text-align: center;">m2</td>
<td><input type="text" name="a[50]" value="1000" class="form-control" /></td>
<td><input type="text" name="b[50]" value="500" class="form-control" /></td>
<td style="text-align: center;">
<select name="termek_akcio[50]" class="input input-select form-control">
<option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select>
</td>
</tr>
</tbody></table>
Edit:
If i delete the form-control class from the select, it will be like this:
select {
width: inherit !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover table-bordered list"><thead style="font-weight:bold;">
<tr class="tr_bold">
<td style="text-align: center;">ID</td>
<td class="left">Megnevezés</td>
<td style="text-align: center;">Egység</td>
<td>Bruttó ár</td>
<td>Akciós ár</td>
<td style="text-align: center;">Akciós</td>
</tr>
</thead><tbody> <tr id="sor52">
<input type="hidden" name="sav_id[]" class="sav_input" value="52" />
<td style="text-align: center;">52</td>
<td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=52">Barabás Gerecse térkő őszilomb</a></td>
<td style="text-align: center;">m2</td>
<td><input type="text" name="a[52]" value="1000" class="form-control" /></td>
<td><input type="text" name="b[52]" value="500" class="form-control" /></td>
<td style="text-align: center;">
<select name="termek_akcio[52]" class="input input-select form-control">
<option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select>
</td>
</tr>
<tr id="sor117">
<input type="hidden" name="sav_id[]" class="sav_input" value="117" />
<td style="text-align: center;">117</td>
<td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=117">Barabás Patent térkő 222</a></td>
<td style="text-align: center;">m2</td>
<td><input type="text" name="a[117]" value="1000" class="form-control" /></td>
<td><input type="text" name="b[117]" value="500" class="form-control" /></td>
<td style="text-align: center;">
<select name="termek_akcio[117]" class="input input-select form-control">
<option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select>
</td>
</tr>
<tr id="sor50">
<input type="hidden" name="sav_id[]" class="sav_input" value="50" />
<td style="text-align: center;">50</td>
<td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=50">Barabás Somló Trió térkő holdfény</a></td>
<td style="text-align: center;">m2</td>
<td><input type="text" name="a[50]" value="1000" class="form-control" /></td>
<td><input type="text" name="b[50]" value="500" class="form-control" /></td>
<td style="text-align: center;">
<select name="termek_akcio[50]" class="input input-select form-control">
<option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select>
</td>
</tr>
</tbody></table>
Best solution
Remove style="text-align:center" from last td. Because, inside
that td, any element can be center.
Also add css to your stylesheet from below code snippet.
.input-select{
width:100% !Important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover table-bordered list"><thead style="font-weight:bold;">
<tr class="tr_bold">
<td style="text-align: center;">ID</td>
<td class="left">Megnevezés</td>
<td style="text-align: center;">Egység</td>
<td>Bruttó ár</td>
<td>Akciós ár</td>
<td style="text-align: center;">Akciós</td>
</tr>
</thead><tbody> <tr id="sor52">
<input type="hidden" name="sav_id[]" class="sav_input" value="52" />
<td style="text-align: center;">52</td>
<td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=52">Barabás Gerecse térkő őszilomb</a></td>
<td style="text-align: center;">m2</td>
<td><input type="text" name="a[52]" value="1000" class="form-control" /></td>
<td><input type="text" name="b[52]" value="500" class="form-control" /></td>
<td style="text-align: center;">
<select name="termek_akcio[52]" class="input input-select form-control">
<option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select>
</td>
</tr>
<tr id="sor117">
<input type="hidden" name="sav_id[]" class="sav_input" value="117" />
<td style="text-align: center;">117</td>
<td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=117">Barabás Patent térkő 222</a></td>
<td style="text-align: center;">m2</td>
<td><input type="text" name="a[117]" value="1000" class="form-control" /></td>
<td><input type="text" name="b[117]" value="500" class="form-control" /></td>
<td style="text-align: center;">
<select name="termek_akcio[117]" class="input input-select form-control">
<option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select>
</td>
</tr>
<tr id="sor50">
<input type="hidden" name="sav_id[]" class="sav_input" value="50" />
<td style="text-align: center;">50</td>
<td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=50">Barabás Somló Trió térkő holdfény</a></td>
<td style="text-align: center;">m2</td>
<td><input type="text" name="a[50]" value="1000" class="form-control" /></td>
<td><input type="text" name="b[50]" value="500" class="form-control" /></td>
<td >
<select name="termek_akcio[50]" class="input input-select form-control">
<option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select>
</td>
</tr>
</tbody></table>
I have searched in google but i don't find any solution of my issue.Could anyone tell me how to merge Group and GPA/CGPA, Out of rows?
For better view of my code see: BOOTPLY.
What i want:
This is my code, so far:
<table class="table table-bordered table-hover table-condensed table-responsive">
<thead>
<tr>
<th class="tg-yw4l" rowspan="2">Level</th>
<th class="tg-yw4l" rowspan="2">Name of Examination</th>
<th class="tg-yw4l" rowspan="2">Year of Study</th>
<th class="tg-yw4l" rowspan="2">Group /Subject</th>
<th class="tg-yw4l" rowspan="2">Division/
Class/Grade </th>
<th class="tg-yw4l" colspan="2">Grade</th>
<th class="tg-yw4l" rowspan="2">Board /University</th>
<th class="tg-yw4l" rowspan="2">Year of Passing
[yyyy]</th>
<th class="tg-yw4l" rowspan="2">Result Published by Controller of Exam [dd/mm/yyyy]</th>
</tr>
</thead>
<tbody>
<tr>
<td>
SSC/Equivalent
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<th>GPA/CGPA</th>
<th>Out of</th>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
HSC/Equivalent
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
Graduation
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
<select name="Gradnoyear" id="Gradnoyear" class="breadcrumbcombo1" tabindex="38" style="visibility: visible;">
<option value="-1" selected="selected">--Select--</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
Post Graduation
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
</tbody>
</table>
I think you just need to move your headings from the tbody, into the theader and then add a couple of normal columns to the tbody to replace the headings we just moved (comments in code as to what I have moved and added):
<table class="table table-bordered table-hover table-condensed table-responsive">
<thead>
<tr>
<th class="tg-yw4l" rowspan="2">Level</th>
<th class="tg-yw4l" rowspan="2">Name of Examination</th>
<th class="tg-yw4l" rowspan="2">Year of Study</th>
<th class="tg-yw4l" rowspan="2">Group /Subject</th>
<th class="tg-yw4l" rowspan="2">Division/ Class/Grade</th>
<th class="tg-yw4l" colspan="2">Grade</th>
<th class="tg-yw4l" rowspan="2">Board /University</th>
<th class="tg-yw4l" rowspan="2">Year of Passing [yyyy]
</th>
<th class="tg-yw4l" rowspan="2">Result Published by Controller of Exam [dd/mm/yyyy]</th>
</tr>
<!-- put your other two headers from tbody here: -->
<tr>
<th>GPA/CGPA</th>
<th>Out of</th>
</tr>
</thead>
<tbody>
<tr>
<td>
SSC/Equivalent
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<!-- replace those headers we have moved with a couple of normal columns: -->
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
HSC/Equivalent
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
Graduation
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
<select name="Gradnoyear" id="Gradnoyear" class="breadcrumbcombo1" tabindex="38" style="visibility: visible;">
<option value="-1" selected="selected">--Select--</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
Post Graduation
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
</tbody>
</table>
Updated bootply
I am trying to add a drop down box in a table as a part of registration form.
Here is my code below :-
<html>
<body></body>
<h1>Cab</h1>
<TABLE BORDER="0">
<TR>
<TD>Name</TD>
<TD ALIGN="left"><INPUT TYPE="text" SIZE="25" NAME="fname">
</TD>
</TR>
<TR>
<TD>Phone Number</TD>
<TD ALIGN="left"><INPUT TYPE="text" SIZE="25" NAME="phnnum">
</TD>
</TR>
<TR>
<TD class = "select">Online Password (Repeated)
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<TD ALIGN="center"></TD>
</TD>
</TR>
</TABLE>
<INPUT TYPE="submit" VALUE="Submit">
<INPUT TYPE="reset" VALUE="Clear">
</html>
When I do this the drop down box doesn't come in a format as the other fields come.
I want the drop down box right below the Text Field above it.
its because you have put "Online Password (Repeated)" text and drop down in a same column td
and the second TD is blank..
<TR>
<TD class = "select">Online Password (Repeated)
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<TD ALIGN="center"></TD>
</TD>
</TR>
replace above code with below
<TR>
<TD class = "select">Online Password (Repeated)
</TD>
<TD ALIGN="center">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</TD>
</TR>
I hope u can now find where u made mistake
check the jsfiddle
<html>
<body>
<h1>Cab</h1>
<TABLE BORDER="0">
<TR>
<TD>Name</TD>
<TD ALIGN="left">
<INPUT TYPE="text" SIZE="25" NAME="fname">
</TD>
</TR>
<TR>
<TD>Phone Number</TD>
<TD ALIGN="left">
<INPUT TYPE="text" SIZE="25" NAME="phnnum">
</TD>
</TR>
<TR>
<TD>Online Password (Repeated)</TD>
<TD ALIGN="left">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</TD>
</TR>
</TABLE>
<INPUT TYPE="submit" VALUE="Submit">
<INPUT TYPE="reset" VALUE="Clear">
</body>
</html>
I have a 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.
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:
<span class="highlight"> DEV </span>
SQL SERVER:
<span class="highlight"> DEV </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">
Main Menu >
Tools >
Discharge Ports
</span>
<span class="icons"><img src="/vp/_assets/img/icons/new.gif" alt="New" /><span class="spacer"></span><img src="/vp/_assets/img/icons/logoff.gif" alt="Logoff" /></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] MEXICO - VITRO</option>
<option value="59" >MX [MX] 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] 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] 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] CAI LAN</option>
<option value="34" >VN [HO] 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" /> <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>
http://msdn.microsoft.com/en-us/library/ms530809(VS.85).aspx
says that max-height doesn't work with tables. try removing the table that is inside your div.
IE has supported max-height since IE7 — but only in Standards (AKA Strict) mode.
Make sure you have a Doctype that triggers standards mode as the first thing in your document. (Quirks mode can screw up a lot of things, so never write a document without a Standards mode triggering Doctype unless you have a very very good reason to do so).
In addition to max-wdith, you may use the following expression to make sure it is cross browser compatible:
width: expression(this.width > 400 ? "400px" : true);
height: expression(this.height > 400 ? "400px" : true)
reference: http://www.fastechws.com/tricks/web/image-max-width-height.php
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.
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?
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.