css - Issue with positioning across browsers zoom - div and table(?) -
finally managed make little site acceptable in ff/ie/chrome
-but when zoom in/out ff/chrome positions changes while in ie doesnt.
my code:
<div id="parent"> <b>favor emitir cheques, depostiso o tramsferencias <br /> 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 .css im using meyers reset , apart 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 , chrome pics in normal , zoom (sorry weird pic posting): https://docs.google.com/drawings/d/1tkiakgs4kxbteuw95mpu7q5ome3uezjsbxetlabddjo/edit
any tip on how manage source? or should start on different approach this?
it looks though ff , chrome zooming elements not recalculating positions based on new page size.
i use different approach floating child1, child1table, , child2 , using margins space them out need be.
Comments
Post a Comment