The following code is supposed to make the right 60% of the display red. It does in Chrome, but does not in Firefox. In Firefox, it makes the whole screen red. Can anybody help me fix this?
<table border="0" width="100%">
<tr>
<td id="l" width="30%" height="200px"></td>
<td id="m" width="3%" style="background-color:green"></td>
<td id="r" width="60%" height="200px"></td>
</tr>
</table>
<script>
w = $('#r').width();
h = $(window).height();
$("#r").css({'width' : w, 'height' : h, 'position': 'relative', 'top': '0px', 'left': '0px'});
$("#r").append("<div style='width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color:red;'></div>");
</script>
ps: I cannot use 'background-color:red' in 'td'; I need to append the new 'div' to the table cell as you can in the code (since this is a part of a bigger design). Thank you very much.
try this:
<table border="0" width="100%">
<tr>
<td id="l" width="30%" height="200px">
</td>
<td id="m" width="3%" style="background-color: green;">
</td>
<td id="r" width="60%" height="200px" style="vertical-align:top;">
</td>
</tr>
</table>
<script>
w = $('#r').width();
h = $(window).height();
$("#r").css({ 'width': w, 'height': h, 'position': 'relative' });
$("#r").append("<div style='width: 100%; height: 100%; position: absolute; background-color:red;'></div>");
</script>