Issue with positioning across browsers zoom - div and table(?)

Question

Finally I managed to make this little site look acceptable in ff/ie/chrome

-But when I zoom in/out ff/chrome the positions changes while in ie it doesnt.

my code:

<div id="parent">
  <b>Favor Emitir Cheques, Depostiso o Tramsferencias <br />
  a Nombre de "xxxxxxx xxxxxxxxxx, C.A." <br />
  en xxxxxxxx xxxx, CTA CTE, No. xxxx-xxxx-xx-xxxxxxxxxx</b>
  <div id="child1">
    BASE IMPONIBLE BS.
    <table border="1" cellspacing="0">
        <tr>
            <td>I.V.A. <input id="iva" type="text" name="iva" size="5" value="{{iva}}"/> % B.s.</td>
        </tr>
    </table>
    IMPORTE TOTAL Bs.
    <table id="child1Table">
      ...Text Display...
    </table>
  </div>
<div id="child2">
  ...
</div>

on the .css im using meyers reset and apart from that whats following:

#parent    {
font-size:80%;
width: 100%;

position:relative;
top:0%;
} 

#child1
{
position:absolute;
left:35%;
top:0%;
}

#child1Table    {
position:absolute;
left:120%;
top:0%;
}

#child2
{
position:absolute;
top:150%;
left:0%;
}

the link show IE7 FF and Chrome pics in normal and zoom (sorry for weird pic posting): https://docs.google.com/drawings/d/1tKIAkGs4kXbTEUW95mPu7Q5OMe3uEzJSbXetLAbDdJo/edit

any tip on how to manage this from this source? or should start over different approach to this?

Answer 1

It looks as though FF and Chrome are zooming the elements but are not recalculating the positions based on the new page size.

I would use a different approach like floating child1, child1Table, and child2 and using margins to space them out to where they need to be.