Hi! All I want to do is to have such layout (that is browser compatible and valid xhtml ). I tried with divs, margins and still I am missing something for IE7 so maybe I won't tell my solution but someone can think of own. I will be grateful and I am offering a beer . It seems quite simple... [input box1] - some free space (2px) - [input box2] [---- input box 3 fitting with width ideally -----] -free- [submit1] -free space(2px)- [submit2] -free- Each input box and submit button should have a 1px border and every line should have 2px top margin. Can someone handle that with cross browser compatibility with working solution for IE7? I always was getting different input widths for IE7 and FF or wrong top margins... . 2px turned out to be 1px for IE . Font size should be preferably 10px. All input boxes and submit buttons should have 16px height.
Drop whatever you have cooked up here: http://jsfiddle.net/ and I will take a look. Have you used the 'universal selector' to remove default padding/margins from all elements (IE is particularly affected)? Do you use css reset? http://meyerweb.com/eric/tools/css/reset/
use a basic HTML table example: fix the spaces to perfection if you want. <form name="formABC" method="post" action="where_its_going.php"> <center> <table border="0" cellpadding="2" cellspacing="0"> <tr> <td> <input type="text" name="whatever_you_call_it" maxlength="50" size="30"> </td> <td width="2" colspan="2"> <input type="text" name="whatever_you_call_it2" maxlength="50" size="30"></td></tr> <tr><td colspan="4"> <input type="text" name="whatever_you_call_it" maxlength="50" size="66"></td></tr> <tr><td width="200" align="right"><input type="submit" onclick="this.form.submit"></td><td></td> <td> <input type="submit" onclick="this.form.submit"></td></tr> </table> </form>