Hi Guys,
Ive got a problem with IE which is fine in FF, Chrome etc...
I have for example a 2 column layout of which for debugging ive emptied the left hand side one. The right hand side has a long list of results in a table with sortable options above it.
In this sortable options section is a select box which has options dynamically generated. On update though via $(this).html(...) the content can update fine but when I alter the status of disabled with attr() it breaks the styling of the results below it... It shortens the page height cutting off the showing of results. If I put height in the left hand column with some sort of image or any content it drops in height to the end of the content in that left hand column.
It is as though it loses its sense of what is in the right hand column those rerendering for some reason it to not show what is actually in that column.
Does anyone have a solution of how I can fix this in jQuery or even force some sort of workaround in the CSS/HTML for IE? Really annoying and im completely out of ideas :(
Just making an update with some code:
HTML
<div id="ctn"><div id="ctn_wrp"><div id="ctn_cnt">
<div class="col_l180wrp">
<div class="lay_l">
<div class="col_l180hdr"></div>
</div>
<div class="lay_mr">
<div style="height:66px;margin:0px 0px 10px 0px;background:url(/images/search/bg-pp-search.gif) no-repeat top left;">
<div style="float:left;width:504px;height:66px;font-size:11px;">
<table cellpadding="4" cellspacing="4">
<tr style="font-size:11px;color:#FFF;font-weight:bold;">
<td>Manufacturer</td>
<td>Model</td>
<td>Network</td>
<td>Phone cost</td>
</tr>
<tr>
<td>
<select id="manufacturer" name="manufacturer">
<option value="">Any</option>
<option value="18">Apple</option>
<option value="8">Blackberry</option>
<option value="14">HTC</option>
<option value="5">LG</option>
<option value="2">Motorola</option>
<option value="1">Nokia</option>
<option value="15">O2</option>
<option value="3" selected="selected">Samsung</option>
<option value="24">Sonim</option>
<option value="4">Sony Ericsson</option>
<option value="19">Three</option>
</select>
</td>
<td colspan="3">
<select id="models" name="models" disabled="disabled">
<option value="">Any</option>
</select>
</td>
</tr>
</table>
</div>
<div style="float:left;width:246px;height:66px;">
<input type="image" src="/images/search/bt-compare.gif" id="submit_button" name="submit" value="Submit" alt="Submit" title="Submit" style="margin:8px 0px 0px 12px;" />
</div>
<div class="sp"></div>
</div>
</form>
<div class="sp"></div>
<div class="split_l560">
<div id="results">
</div>
</div>
<div class="split_r180">
</div>
</div>
<div class="sp"></div>
</div>
<div class="col_l180ftr"></div>
<script type="text/javascript">
var premanufacturer=3;
var premodel=522;
</script>
</div></div></div>
The results table would usually go in the div#results but ive stripped it out for now.
The layout is a main left column (subnav) which wud be 'layl' then 'lay_mr' is the main one on the right. It has the search filter at the top then under that it splits into 2 cols with the results in the left one of those two. If content is place in the 'layl' or 'split_r180' then the table of results shows to the height of the content in those two columns. At present ive made them empty though.
It breaks when a trigger/event/run occurs on select#models. This is being handled by jQuery.
It does the callback and then I update the options using .html and once it reaches a change on attr it breaks the heights.
$("select#models").html(options);
$("select#models").attr("disabled","");
I have also tried removeAttr() with no joy. Really stumped! :-/ As I say absolutely fine with FF and Chrome! Typical IE eh? :*)
Thanks for any help guys its greatly appreciated.