Image hide behind the template.

[saeed]

Please refer to the attach screenshot.

you'll notice red box on the bottom left of the image on which if end-user clicks it goes to top of the page. Script is working alright but image is not appearing on the front.

here is the CSS code which i am using for displaying the image.

Please help. Thank you very much!

#toTop {
   display:none;
   text-decoration:none;
   position:fixed;
   bottom:10px;
   right:10px;
   overflow:hidden;
   width:51px;
   height:51px;
   border:none;
   text-indent:100%;
   background:url(../images/ui.totop.png) no-repeat left top;
}

#toTopHover {
   background:url(../images/ui.totop.png) no-repeat left -51px;
   width:51px;
   height:51px;
   display:block;
   overflow:hidden;
   float:left;
   opacity: 0;
   -moz-opacity: 0;
   filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
   outline:none;
}

[shyagrawal]

Instead of
background:url(../images/ui.totop.png) no-repeat left -51px; you have to use below statement:
background-image:url(../images/ui.totop.png) no-repeat left -51px;.

Like that you have to update.
Please let me know if it solved.

[saeed]

thank you for the quick reply.

well the issue is still the same. no change in displaying the image.

[shyagrawal]

Please use "." instead of "#" in css.

.toTop {
   display:none;
   text-decoration:none;
   position:fixed;
   bottom:10px;
   right:10px;
   overflow:hidden;
   width:51px;
   height:51px;
   border:none;
   text-indent:100%;
   background:url(../images/ui.totop.png) no-repeat left top;
}

.toTopHover {
   background:url(../images/ui.totop.png) no-repeat left -51px;
   width:51px;
   height:51px;
   display:block;
   overflow:hidden;
   float:left;
   opacity: 0;
   -moz-opacity: 0;
   filter:alpha(opacity=0);
}

.toTop:active, .toTop:focus {
   outline:none;
}

[saeed]

Nope. infact this time i cant see the image.. instead of the image when i am at the bottom of the page. 'To Top' text appeared and script feature is working on it.