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: 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.