cross browser issue with css top margin

cross browser issue with css top margin

i am fed-up with this CSS designing part, i am very poor in this.. i have
done my coding, to write a text on my sliding image (slider), here how i
have tried, working fine in firefox but when opening in chrome the slider
image has gone to very top of the browser, i guess it is a cross-browser
issue can any one suggest me how to fix it..?
here is my code :
CSS :
.image {
position:relative;
float:left; /* optional */
}
.image .text {
position:absolute;
top:85px; /* in conjunction with left property, decides the text
position */
left:220px;
width:300px; /* optional, though better have one */
}
HTML :
<div class="image">
<img alt=""
src="http://static.adzerk.net/Advertisers/d893babe671c41118c1fece177e0a21a.jpg"
/>
<div class="text">
<p><a href="" style="text-decoration: none ; font-family: Brush
Script Std ; font-size: 25px ; color: #000000 " >Welcome
Freshers</a><img src="http://vgi.ac.in/notice.gif" /></p>
</div>
</div>
Tried on Fiddle too.