Grow your CSS skills. Land your dream job.

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

  • # September 30, 2011 at 9:22 am

    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; }

    # September 30, 2011 at 1:37 pm

    #homepage-rotator-container {overflow:hidden;}

    should work

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".