Hello,
I am designing a CMS and am using a table, with cell, within a dialog to gather information from the user. When the user clicks the 'OK' button the information entered into inputs within the table cells is sent off to be inserted into a MySql database. My problem is that I cannot get the table to display in the dialog correctly. This problem only occurs in IE (what a surprise!). I cannot constrain the width of the table to be the same size as the dialog window. The width of the table is around a third wider than the dialog window so around a third of my table isnt visible.
Here's the HTML for the dialog:
<div id=\"dialog\" title=\"Batch Editing\" style=\"position:relative;top:0px;left:0px;width:580px;height:350px;\">
<form style=\"width:600px;height:320px;\">
<table id=\"textareas\" style=\"float:right;width:580px;height:320px;\" >
<tr styler=\"width:580px;max-width:580px;\">
<td style=\"width:130px;max-width:130px;height:320px;\">
<div id=\"div2\" style=\"height:280px;\">
<p style=\"text-align:center;background:#333333;color:#ccc;padding:6px 0px;\" class=\"ui-corner-top\">Photographer</p>
<input type=\"text\" name=\"photographer\" class=\"ui-corner-bottom\" id=\"photographer\" value=\"".$Global_User_Name."\" />
<p style=\"text-align:center;background:#333333;color:#ccc;padding:6px 0px;\" class=\"ui-corner-top\">Property Release</p>
<select name=\"property\" class=\"ui-corner-bottom\" id=\"property\" >
<option value=\"yes\">Yes</option>
<option value=\"no\">No</option>
</select>
<p style=\"text-align:center;background:#333333;color:#ccc;padding:6px 0px;\" class=\"ui-corner-top\">Model Release</p>
<select name=\"model\" class=\"ui-corner-bottom\" id=\"model\" >
<option value=\"yes\">Yes</option>
<option value=\"no\">No</option>
</select>
<p style=\"text-align:center;background:#333333;color:#ccc;padding:6px 0px;\" class=\"ui-corner-top\">Usage</p>
<select name=\"usage\" class=\"ui-corner-bottom\" id=\"usage\" >
<option value=\"editorial\">Editorial</option>
<option value=\"commercial\">Commercial</option>
</select>
<p style=\"text-align:center;background:#333333;color:#ccc;padding:6px 0px;\" class=\"ui-corner-top\">Colour Space</p>
<select name=\"cspace\" class=\"ui-corner-bottom\" id=\"cspace\" >
<option value=\"AdobeRGB(1988)\">AdobeRGB(1988)</option>
<option value=\"CMYK\">CMYK</option>
<option value=\"sRGB\">sRGB</option>
</select>
</div>
</td>
<td style=\"width:225px;max-width:225px;height:350px;\">
<div id=\"div3\"><p style=\"text-align:center;background:#333333;color:#ccc;padding:6px 0px;\" class=\"ui-corner-top\">Caption</p>
<textarea rows=\"20\" cols=\"40\" name=\"caption\" class=\"ui-corner-bottom\" id=\"caption\" ></textarea>
</td>
<td style=\"width:225px;max-width:225px;height:350px;\">
<p style=\"text-align:center;background:#333333;color:#ccc;padding:6px 0px;\" class=\"ui-corner-top\">Keywords</p>
<textarea rows=\"20\" cols=\"40\" name=\"keywords\" class=\"ui-corner-bottom\" id=\"keywords\" ></textarea>
</div>
</td>
</tr>
</table>
</form>
</div>
And here's the Javascript:
$(\"#dialog\").dialog({
autoOpen:false,
bgiframe: true,
width:640,
height:400,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.1
},
buttons: {
'Finish': function() {
photographer = $(\"#photographer\").val();
model = $(\"#model\").val();
property = $(\"#property\").val();
usage = $(\"#usage\").val();
caption = $(\"#caption\").val();
keywords = $(\"#keywords\").val();
Submission(photographer,model,property,usage,caption,keywords);
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
$('#process').click(function() {
$('#dialog').dialog('open');
});
});
Any help much appreciated as time is pressing.
Link to the testing page is here (problem exists in IE6):
http://www.bluejune.co.uk/VAAgency/cms-submit.phpTerry