My javascript link area is much bigger than the image itself. How do I make it just where the image is. The page is <www.bopedesign.com//photos.php> the link is in the header and says "Listen Now" . If you mouse over you will see that the link area extends up quite aways and to the left also. I am obviously doing something wrong but I can't figure out how to do it differently. Thanks in advance.
/* Reset & Page Setup */ * { margin: 0; padding: 0; } html { overflow-y: scroll; } body { font: 62.5% Helvetica, sans-serif; background: url(images/body-bg.jpg) top center no-repeat; background-attachment: fixed; background-position: 50% 15%; }
ul { list-style: none inside; } p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; } a { outline: none; } a img { border: none; } /* End Reset */
/* Floats and Clear */ .floatleft { float: left; } .floatright { float: right; } .clear { clear: both; } /* End Floats and Clears */
} ul#nav li { display: inline; } ul#nav li a { display: block; height: 42px; text-indent: -9999px; float: left; } ul#nav li.schedule a { width: 132px; background: url(images/schedule2.jpg) top center no-repeat; } ul#nav li.contact a { width: 79px; background: url(images/contact2.jpg) top center no-repeat; } ul#nav li.store a { width: 57px; background: url(images/store2.jpg) top center no-repeat; } ul#nav li.music a { width: 98px; background: url(images/music2.jpg) top center no-repeat; } ul#nav li.news a { width: 55px; background: url(images/news2.jpg) top center no-repeat; } ul#nav li.booking a { width: 127px; background: url(images/booking2.jpg) top center no-repeat; } ul#nav li.about a { width: 79px; background: url(images/about.jpg) top center no-repeat; } ul#nav li.support a { width: 71px; background: url(images/support.jpg) top center no-repeat; } ul#nav li.newsletter a { width: 142px; background: url(images/newsletter.jpg) top center no-repeat; } ul#nav li a:hover { background-position: bottom center; }
/* ================================================================ This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/lightbox.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ /* common styling */
a {color:#000;} a:hover {text-decoration:none;} a:visited {color:#000;}
/* slides styling */
.photo {width:635px; height:550px; text-align:left; position:relative; margin: 60px auto 20px auto;}
.photo ul.topic li ul li {display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}
.photo ul.topic li ul li a {display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}
.photo ul.topic li ul li a img {display:block; width:100px; height:75px; border:5px solid #eee;}
.photo ul.topic li a:hover ul li a:hover, .photo ul.topic li:hover ul li a:hover {white-space:normal; position:relative;}
.photo ul.topic li a:hover ul li a:hover img, .photo ul.topic li:hover ul li a:hover img {position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;} /* End Structure */
p.footertext { padding: 25px 0px 0px 80px; color: #999999; }
p.footertext span { padding: 0px 0px 0px 200px; }
p.footertext span a { color: #996633; text-decoration: none; }
<a href=\"javascript:;\" onClick=\"wimpyPopPlayer('http://www.thishope.org/mp3s/myWimpy.html','wimpyMP3player','width=441,height=385')\">
<img id=\"listen\" src=\"http://www.thishope.org/mp3s/listennowimage.jpg\" border=\"0\" align=\"top\"></a>
to this
<div id=\"listen\"><a href=\"javascript:;\" onClick=\"wimpyPopPlayer('http://www.thishope.org/mp3s/myWimpy.html','wimpyMP3player','width=441,height=385')\">
<img src=\"http://www.thishope.org/mp3s/listennowimage.jpg\" border=\"0\" align=\"top\"></a></div>