I'm designing a new page to show picture one after the other. it uses Div tags all on the same page to display them: heres the code:

<style type=text/css>.slides {align: center; position: absolute; top: 227px; left: 88; visibility: hidden}</style>
<A href="javascript:showPreviousSlide()" target="_self">
<img alt="Previous Slide" border=0 src="/Photo_Essay/photo_essay_back.gif"></A>
<A href="javascript:showNextSlide()" target="_self">
<img alt="Next Slide" border=0 src="/Photo_Essay/photo_essay_next.gif"></A>

<div class=slides id=image1 style="VISIBILITY: visible"><img border=1 src="/Photo_Essay/christmas_walk01/christmaswalk01_11.jpg"></div>
<div class=slides id=image2><img src="/Photo_Essay/christmas_walk01/christmaswalk01_02.jpg" border=1></div>
<div class=slides id=image3><img border=1 src="/Photo_Essay/christmas_walk01/christmaswalk01_03.jpg"></div>
<div class=slides id=image4><img border=1 src="/Photo_Essay/christmas_walk01/christmaswalk01_04.jpg"></div>

Of course there is a javascript part but i'm having problems getting this to align correctly. It has a major discrepency in positioning in different browsers. Any ideas?
and also if i put this inside a cell can i use relative position and if so how?

Hope thats not too much to ask.