Crossbrowser Input element CSS - html

Question

I have an input box and a button on a website which i'm trying to align correctly in my CSS. Initially it looked fine on firefox 22.0, safari 5.1.9 and chrome 29.0.1547.57(mac) but not chrome 28.0.1500.95 on windows so i added some code that only targeted chrome , however now it looks odd in safari and chrome (mac) but fine in firefox and chrome on windows. How would i fix this?
This is what happens: http://i754.photobucket.com/albums/xx182/rache_R/image_zpsd746de67.jpg
CSS code:
input#image {
position: relative;
top: 20px;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
input#image {
position: relative;
top: -2px;
left: 106px;
}
}
input#box {
position: relative;
width: 30px;
height: 25px;
top: 25px;
left: -60px;
border:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px #666 inset;
-moz-box-shadow:0 0 5px #666 inset;
box-shadow:0 0 5px #666 inset;
text-align: center;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
input#box {
position: relative;
width: 30px;
height: 25px;
top: 30px;
left: -60px;
border:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px #666 inset;
-moz-box-shadow:0 0 5px #666 inset;
box-shadow:0 0 5px #666 inset;
text-align: center;
}
}

Answer 1

try make this
css
*{
padding: 0;
margin: 0;
outline: 0;
}
#first {
}
#first li {
list-style-type: none;
float: left;
}
#first li a {
background-color: #333333;
display: block;
margin: 1px;
padding: 5px;
color: #CCCCCC;
text-decoration: none;
font-family: Tahoma;
}
#first li a:hover {
background-color: #666666;
}
html
<ul id="first">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>