same css position different results in diff browsers - css

Question

How is it possible that there is a 3 px difference in the vertical position of textfields in a form when seen in those 3 diff. browsers?
I am going insane. It is not good trying to fix it in the CSS because if I change it, it is fine in one but not in the others.
#pricefromR
{width:75px;
position:relative;
right:40px;
top: 50px;
}
#pricetoR
{width:75px;
position:relative;
right:-45px;
top: 24px;
}
So this corresponds to two texfields which are supposed to be paralell, at the same leve with each other, but they are not in different browsers, by a difference of 3 px and it happens the same with the other pairs which are each in a LI
<li>
<input type ="text" id = "areafromR" placeholder="area from" name = "areafrom" maxlength = "5">
<input type ="text" id = "areatoR" placeholder="area to" name = "areato" maxlength = "5">
</li>

Answer 1

All browsers are different, they have different defaults, and different wu=idths/heights. The best way that I know of is to either use percents, but that can get complicated. You can make a the CSS seperate for different browsers. For example ...... That is for internet explorer

Answer 2

You should try to reset your CSS
In case you didn’t know, every browser has its own default ‘user
agent’ stylesheet, that it uses to make unstyled websites appear more
legible. For example, most browsers by default make links blue and
visited links purple, give tables a certain amount of border and
padding, apply variable font-sizes to H1, H2, H3 etc. and a certain
amount of padding to almost everything. Ever wondered why Submit
buttons look different in every browser? It limits the difference
between browsers
Using a CSS Reset, you can force every browser to have all its styles reset to null, so less cross-browser differences
With this code:
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
A common practice is to put this in another CSS file.