IE 6 & 7 - Relative input boxes out of bounds

Stuck a layout problem with IE 6 & 7. Most (but not all) input elements are placed outside of their parent layer for some reason. I have used position: relative on both parent and child, and as soon as I set the child's position to absolute it positions itself properly.

Example of problem: http://www.justcarl.co.uk/work/apto/LiveCycleHTML/page.html

Essentially...

parent:

position: relative;
width: 12em;
margin-bottom: 6px;
margin-left: 开发者_JAVA技巧9em;

child:

position: relative;
width: 80%;
z-index: 3;

The HTML is generated using a server-side component, so I'm after some CSS genius here. I have tried messing around with z-index, float, clear, display, widths and heights, (all changed using firebug lite) but nothing. Any new ideas welcome, after a day of frustration I don't know if I'm able to solve this >.<

---

Okay, solved though not the way I wanted. For some reason declaring any width what-so-ever on the parent container causes some strangeness (never come across this before though). Didn't notice before when experimenting because Firebug Lite doesn't show results instantly.

In the end I set the width to the parent's parent, which made the parent fill the rest of the space, and the input fill by percentage.

---

Try to add this to the child:

margin-left: 0px;

It might be that the child inherits the parent's margin-left: 9em;