How can i position a jqueryui slider below an image

I am trying to construct a range slider to select an interval of geological time so a want a range slider accurately positioned below an image. I have almost got this working, in fact I have a version which works so long as I do not include the declaration, otherwise the slider resolutely stays above the image -which is alsowhat it does in jsfiddle. I have probably mixed up the css but some advice would be really welcome - and a good solution could be applied widely.

There is a jsfiddle here jsfiddle of timescale selctor

HTML

Current window 
<input type="text" name="amount" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
<div class="geoframe">
<div class="sliderpos_inframe">
<div id="geoslider-range"></div>
<img id="tscaleimage" src="http:www.mikrotax.org/Nannotax3/graphics/timescale-narrow-rotated.png"/>
</div>

$(document).ready(function() {
var gettop, getbase; 
gettop=12; getbase=50;

 $( "#geoslider-range" ).slider({
  range: true, min: 0, max: 210,
  values: [gettop, getbase ],
  slide: function( event, ui ) {
  $ ( "#top" ).val( ui.values[ 0 ]);
    $ ( "#base" ).val( ui.values[ 1 ]);
    $( "#amount" ).val( ui.values[ 0 ] + "Ma - " + ui.values[ 1 ] +"Ma" );
  } });
//output the values
$ ( "#top" ).val( $( "#geoslider-range" ).slider( "values", 0));
$ ( "#base" ).val( $( "#geoslider-range" ).slider( "values", 1)); 
$( "#amount" ).val( $( "#geoslider-range" ).slider( "values", 0 ) +
  "Ma - " + $( "#geoslider-range" ).slider( "values", 1 ) + "Ma" ); 
} );

CSS

    /* size of the box and positioning of slider over image */
.geoframe {
    width: 850px;
    height: 230px;
    position: relative;
    display: block;
    background-color: white;
    border: 0 solid yellow;
    margin-bottom: 10px;
    }

.sliderpos_inframe {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 25px;
    right: 25px;
    background-color: white;
    }

#tscaleimage {
    width: 100%;
   position: absolute;
 top: 0;
 }
   /* vertical position  */
 #geoslider-range .ui-slider {
    position: relative;
    top: 165;
    z-index: 2;
    text-align: left;
}

 #geoslider-range .ui-slider-handle {
      background: url(http:www.mikrotax.org/Nannotax3/graphics/slider4.png)  no-repeat;
      border: none;
    position: absolute;
    top: -148px;
    margin-left: -17px;
    z-index: 3;
    width: 35px;
    height: 175px;
    cursor: default;
    outline: 0 none;
}

/* the coloured box indicating range selected */
#geoslider-range .ui-slider-range {
    position: absolute;
    z-index: 2;
    font-size: 2em;
    display: block;
    border: 0;
    background-position: 0 0;
    top: 0%;
    height: 100%;
}

Solution

I just changed the markup and CSS. Please find them both below:

HTML

<body>
    <b>AGE WINDOW TO SEARCH WITHIN</b>
    <p>Current window
        <input type="text" name="amount" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
        <div class="geoframe">
            <div class="sliderpos_inframe">
                <img id="tscaleimage" src="http:www.mikrotax.org/Nannotax3/graphics/timescale-narrow-rotated.png" />
            </div>
        </div>
        <div id="geoslider-range"></div>
    </p>
</body>

CSS

/* size of the box and positioning of slider over image */

.geoframe {
    width: 850px;
    height: 230px;
    position: relative;
    display: block;
    background-color: white;
    border: 0 solid yellow;
    margin-bottom: 10px;
}

.sliderpos_inframe {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 25px;
    right: 25px;
    background-color: white;
}

#tscaleimage {
    width: 100%;
    position: absolute;
    top: 0;
}


/* vertical position  */

#geoslider-range {
    position: relative;
    top: -50px;
    text-align: left;
    left: 25px;
}

#geoslider-range .ui-slider-handle {
    background: url(http:www.mikrotax.org/Nannotax3/graphics/slider4.png) no-repeat;
    border: none;
    position: absolute;
    top: -148px;
    margin-left: -17px;
    z-index: 3;
    width: 35px;
    height: 175px;
    cursor: default;
    outline: 0 none;
}


/* the coloured box indicating range selected */

#geoslider-range .ui-slider-range {
    position: absolute;
    z-index: 2;
    font-size: 2em;
    display: block;
    border: 0;
    background-position: 0 0;
    top: 0%;
    height: 100%;
}

Hope this works for you.

The result is:

PS: I really liked your application of the slider ! : )