FF Floating Block Problems

Hello, I have been having a problem with floating boxes in CSS and firefox

you see, I put a CSS tooltip feature that uses a floating block to show the data I want displayed, and it works very well in IE and Firefox on text, but I tried to use it on an image and this weird hing happened

when I set how far I want it from the top, in IE, it sets the distance from the top of the pic, but in FF< it sets the distance from the bottom of the pic

examples:

Firefox: http://img526.imageshack.us/img526/2926/ffrr7.jpg

IE: http://img526.imageshack.us/img526/7609/ienk4.jpg

live example here: http://www.freewebs.com/mrdantownsend/photos.html

here's the CSS code I used for this:


/* pic Hover Box Starts Here */

a.pic {position:relative;
z-index:24;
color:#669eff;
text-decoration:none;
}

a.pic:hover {z-index:25;
color:#ffffff;
cursor:help;
}

a.pic span.pic {display: none;
}

a.pic:hover span.pic {display:block;
position:absolute;
top:25px;
left:10px;
width:200px;
background-color:#29568f;
color:#ffffff;
text-align:center;
}

thanks for any and all help

after lookin at yr css, not totally sure on yr logic.
1st of all, tables are not necessary anywhere there, but ya....


a.pic {position:relative;
z-index:24;
color:#669eff;
text-decoration:none;
display:block;
float:left;
}


might help you get back on track.
Those 'A' (anchor) elements should be block level, I believe. And they should be floated, which means you'll have to clear them at the end.

Not totally sure if thats what you're looking for.
The example seems not quite done, so Im not positive about whats goin in those spans.

You might wanna read up on Z-indexing, positioning, and the display property, tho.

let us know if thats not what yr lookin for. hope it helps tho!

EDIT: it worked, thanks so much for your help! :thumbsup: :) :D

and the spans are used to designate what text will be in the floating box

so here's an example of the XHTML I used:


<a class="pic" href="images/full_res/block.jpg" alt=""><span class="pic">This is the text that'll be floating</span><img src="images/thumbs/block.jpg" alt="" /></a>