Form felter der ligger ovenpå hinanden

Hej!

Jeg har et problem som jeg har kæmpet med i 5 timer, så jeg må se i øjnene at jeg har brug for hjælp!

Ex.: Jeg vil liste en masse varer som man kan tilføje/fjerne fra sin indkøbskurv. Når man ser varen skal man kunne trykke "Tilføj". Efter at have tilføjet skal man kunne fjerne den igen ved tryk på "Fjern" UDEN at siden reloades (meget vigtigt). Det kan jeg nu også godt få til at virke med den kode jeg har strikket sammen (se nedenfor), men ... hvordan får jeg "Fjern" linket til at starte samme sted (x,y) som "Tilføj" linket? Man kan gøre det med en "margin-left" style, det virker fint, men når teksten til hhv. Tilføj/Fjern skal hives dynamisk ud af en database og skal kunne sprogversioneres, så virker den løsning ikke, da positioneringen så vil være forskellig afhæning af sprog (tekst). Nogle ideer til hvordan man lægger de 2 knapper ovenpå hinanden fremfor efter hinanden?

--------------- KODE START ---------------

<style>
.clsNode_link_add {FONT: 10px verdana, arial; COLOR: #000099; BACKGROUND-COLOR: #FAFAFA; BORDER-STYLE: none; position: static; TEXT-DECORATION: none}
.clsNode_link_add_onmouseover {FONT: 10px verdana, arial; COLOR: #000099; BACKGROUND-COLOR: #FAFAFA; BORDER-STYLE: none; LEFT:0; position: static; TEXT-DECORATION: underline; CURSOR: pointer;}

.clsNode_link_remove {FONT: 10px verdana, arial; COLOR: #FF0000; BACKGROUND-COLOR: #FAFAFA; BORDER-STYLE: none; position: static; TEXT-DECORATION: none}
.clsNode_link_remove_onmouseover {FONT: 10px verdana, arial; COLOR: #FF0000; BACKGROUND-COLOR: #FAFAFA; BORDER-STYLE: none; position: static; TEXT-DECORATION: underline; CURSOR: pointer;}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!--
function tree_handle_click()
{
  if (document.getElementById('remove').style.visibility != "hidden")
  {
    document.getElementById('remove').style.visibility = "hidden";
    document.getElementById('add').style.visibility = "visible";
  }
  else
  {
    document.getElementById('remove').style.visibility = "visible";
    document.getElementById('add').style.visibility = "hidden";
  }
}
// -->
</SCRIPT>

<TABLE cellspacing='0' cellpadding='0' width='100%' align='center' border='0'>
    <TR>
        <TD class='bodytext'>
            <FORM>
                Udstødning til Audi 80 2.8
                <input id="add"
                type="button"
                class="clsNode_link_add"
                value="Tilføj til indkøbskurv"
                onmouseover="this.className='clsNode_link_add_onmouseover'"
                onmouseout="this.className='clsNode_link_add'"
                onclick="tree_handle_click()"/>
                <input id="remove"
                type="button"
                class="clsNode_link_remove"
                value="Fjern fra indkøbskurv"
                style="visibility: hidden"
                onmouseover="this.className='clsNode_link_remove_onmouseover'"
                onmouseout="this.className='clsNode_link_remove'"
                onclick="tree_handle_click()"/>
            </FORM>
        </TD>
</TABLE>

--------------- KODE SLUT ---------------

Håber på en god løsning (der både skal virke i Mozilla (Netscape) og IE5+, gerne IE4+.

På forhånd tak :)

- Rasmus