Changing Backgrounds of a table

[bpops]

I have this little code that changes the background of a table depending on the URL input in to a form (instantaneously). It works great in firefox, but throws out an error in Internet Explorer.. any tips?

[code]
function change_bg(){

image_url = create.background.value;
color = create.bg_color.value;
repeat = create.bg_repeat.value;
position_vert = create.bg_position_vert.value;
position_hor = create.bg_position_hor.value;

box = document.getElementById('box');
position = position_vert+' '+position_hor;

box.style.backgroundImage = 'url("'+image_url+'")';
if (color){
box.style.backgroundColor = color;
}
box.style.backgroundRepeat = repeat;
box.style.backgroundPosition = position;


}
[/code]

thanks in advance!

[bpops]

oh, I should clarify. the form name is "create", the entires are a background url ("background"), a color ("bg_color"), a repeat option, vertical alignment and horizontal alignment ("bg_repeat", "bg_position_vert", "bg_position_hor")

the ID of the table is "box"

[pr0x]

it may be a minor problem with your html, because the new implementation of firefox has html quick fix, your javascript looks straight, would you mind posting your html form?

[bpops]

Sure, here's the HTML code for that part of the page. Of course, it is enclosed in the <form name="create"></form> tags.

thanks for your help!

[code]
<table border="0" width="100%" style="font-family:Georgia,Times New Roman;font-size:12px;color:#000000;" cellspacing="0" cellpadding="3">
<tr>
<td colspan="2" align="center" valign="middle" style="font-family:Georgia,Times New Roman;font-size:11px;color:#FFFFFF;background-color:#3a5721;font-weight:bolder;">
BACKGROUND
</td>
</tr>
<tr>
<td align="left" valign="middle">

Background Image [<a href="javascript:;" onClick="window.open('help_bgimage.html','Help','width=300,height=300')" style="font-weight:bold;font-size:13px;">?</a>]:
</td>
<td align="right" valign="middle">
<input type="text" size="20" name="background" style="font-family:Georgia,Times New Roman;font-size:12px;width:150px;" onChange="change_bg();" onClick="change_bg();">
</td>
</tr>
<tr>
<td align="left" valign="middle">

Background Color [<a href="javascript:;" onClick="window.open('help_bgcolor.html','Help','width=300,height=300')" style="font-weight:bold;font-size:13px;">?</a>]:
</td>
<td align="right" valign="middle">
<input type="text" size="20" name="bg_color" style="font-family:Georgia,Times New Roman;font-size:12px;width:150px;" onChange="change_bg();" onClick="change_bg();">
</td>
</tr>
<tr>
<td align="left" valign="middle">

Tile:
</td>
<td align="right" valign="middle">
<select style="font-family:Georgia,Times New Roman;font-size:12px;width:150px;" name="bg_repeat" id="bg_repeat" onChange="change_bg();" onClick="change_bg();" onkeyup="change_bg();">
<option value="no-repeat" selected>None</option>
<option value="repeat-x">Tile in X</option>
<option value="repeat-y">Tile in Y</option>
<option value="repeat">Tile X &amp; Y</option>

</select>
</td>
</tr>
<tr>
<td align="left" valign="middle">
Vertical Position:
</td>
<td align="right" valign="middle">
<select style="font-family:Georgia,Times New Roman;font-size:12px;width:150px;" name="bg_position_vert" onChange="change_bg();" onClick="change_bg();" onkeyup="change_bg();">

<option value="top">Top</option>
<option value="center" selected>Center</option>
<option value="bottom">Bottom</option>
</select>
</td>
</tr>
<tr>

<td align="left" valign="middle">
Horizontal Position
</td>
<td align="right" valign="middle">
<select style="font-family:Georgia,Times New Roman;font-size:12px;width:150px;" name="bg_position_hor" onChange="change_bg();" onClick="change_bg();" onkeyup="change_bg();">
<option value="left">Left</option>
<option value="center"selected>Center</option>
<option value="right">Right</option>

</select>
</td>
</tr>
</table>

[/code]

[pr0x]

You don't have an ID tag on the last two select menu's, but on the first you do. Try replacing that.

[bpops]

Ah, I wasn't aware that was required. I'll give it a try (when I get home). thanks