So, I thought if I place the arrows within the images it won't matter what the image dimensions are -- the arrows will appear to be anchored.
This is not copy and paste code, but something like this should work.
You need the outer container to change size with the photos - one way to do that is to float it and have the container within that float. This gives a "shrink wrap" effect due to the fact that a floated element will contain all it's floated children. The only down side is you may not be able to assign a width to the floated elements, which can sometimes be problematic (especially in - you guessed it - Internet Destroyer.) If you can assign the container div a width dynamically as you output the images (probably from getting the image size,) that solves that piece.
Once you sort that out, you assign position: relative to the outer container, allowing you to assign position: absolute to the arrows.
.photo-outer { float: left;
position: relative; }
.photo-outer img { float: left; border: none; position: relative; }
.arrows {
position: absolute; width; 60px; height: 25px; bottom:12px; right: 12px; } /* or even top 50%, which would be 50% of the relative div */
.arrows .left, .arrows .right,
.arrows .left a, .arrows .right a { width: 25px; height: 25px; padding:0; display: block; text-indent:-50000px; outline: none; text-decoration: none; }
.arrows .left, .arrows .right { float: left; margin: 0 0 0 5px; }
.arrows .left a, .arrows .right a { background-position: top left; background-repeat: no-repeat; }
.arrows .left a:hover, .arrows .right a:hover { background-position: bottom left; }
.arrows .left a { background-image: url(/images/left-arrow.gif); z-index: 500; }
.arrows .right a { background-image: url(/images/right-arrow.gif); z-index: 501; }
<div class="photo-outer">
<div class="arrows">
<p class="left"><a href="your-prev-url.html">Previous</a></p>
<p class="right"><a href="your-next-url.html">Next</a></p>
<img src="/images/gallery/your-image.jpg" alt="Image one">
</div>
</div>
Hmm, could/should wrap the image in a P but something like that will work . . . the images left and right are a stacked image, allowing you to get a mouseover state by background-position, and the text-indent allows you to use real text in the source code.
non-mouseover part of image
---------------------------
mouseover part of image
(so the actual image is 50px tall)
Better, if you can get at the image widths as you're outputting:
<div class="photo-outer"
style="width: [width of the image];">
