Absolute “Floating” Div is pushing my relative image rotator in FireFox

[thedrick]

I am developing a site with a jquery image rotator. The rotator has a floating buy-it-now box that stays static while the images rotate behind it. I have the buy-it-now box set to position:absolute & a container div set to relative.

Here’s my issue, In FF, the rotator is pushing a 1000px to the right. See link in FireFox: http://ryandleaf.com/index2.php.

Any Ideas?

HTML:

FOREWORD BY MIKE PRICE | RYAN D. LEAF

==================================

CSS:

/* Homepage Rotator */

#homepage-rotator-container { width:1000px; margin:0px auto; position:relative; }
#homepage-rotator { width:1000px; height:407px; overflow:hidden; margin:0px auto; padding:0px; z-index:10; }
#homepage-rotator img { }

#floating-buy-now-container { width:438px; height:339px; position:absolute; right:-20px; bottom:0px; background:url(../images/slices/rotator-buy-now-background.png) no-repeat; z-index:20; }

#floating-buy-now-box { width:180px; height:134px; margin:120px 0px 0px 2px; }
h1#foreword-buy-now-box { display:block; margin:0px auto; width:161px; height:34px; background:url(../images/slices/foreword-buy-now.png) no-repeat; text-indent:-9999px; }

img#floating-buy-it-now-button { display:block; margin:18px auto 14px; }

#ebook-buy-now-box { margin:0px auto; width:166px; height:28px; }

[Author]

Posts