Hey all,

I have just spent quite a while implementing a sliding panel to house a shopping cart. The issue I am having is that everything seems to work very well when I have an item in the cart but as soon as the cart is empty my Basket button is shifting so that it's no longer below the panel that slides open.

I have tried really hard to get this to work but just can't seem to fix it. I was wondering whether anyone might be able to solve this mystery?

My site is: http://thisiscurated.myshopify.com

The actual code for the relevant site part is as follows:

Code:
<div class="topbar">
    <div class="topbar-anchor">
        <div class="topbar-basket">
            <div id="mini-basket" style="display:none;">
                <script type="text/javascript">
                    function remove_item(id) {
                    document.getElementById('updates_'+id).value = 0;
                    document.getElementById('cartform').submit();
                    }
                </script>
                <div id="cart" class="cart clearfix">
                    {% if cart.item_count == 0 %}
                    <div class="c" style="padding:100px 0;">
                        <h2 class="title" style="text-align:center;">Your Basket is Empty</h2>
                    </div>
                    {% else %}
                    <div class="more-info clearfix">
                        <div class="basket-inner">
                            <form action="/cart" method="post" id="cartform">
                                <table>
                                    <tbody>
                                    {% for item in cart.items %}
                                        <tr class="top-row">
                                            <td class="c">Qty</td>
                                            <td class="c">Description</td>
                                            <td class="c">Price</td>
                                            <td class="c"></td>
                                        </tr>
                                        <tr>
                                            <td class="c">
                                                <input type="text" size="4" name="updates[{{item.variant.id}}]" id="updates_{{item.variant.id}}" value="{{ item.quantity }}" onfocus="this.select();" class="item-quantity" />
                                            </td>
                                            <td><a href="{{item.product.url }}">{{ item.title }}</a></td>
                                            <td class="c">{{ item.line_price | money }}</td>
                                            <td class="c"><a href="#" class="cart" onClick="remove_item({{item.variant.id}}); return false;">X</a></td>
                                        </tr>
                                        <tr class="summary-mini">
                                            <td class="c">Summary</td>
                                            <td class="c"></td>
                                            <td class="c"><strong>{{ cart.total_price | money }}</strong></td>
                                            <td class="c"></td>
                                        </tr>
                                        <tr>
                                            <td class="c"></td>
                                            <td class="minicart-proceed"><a href="/cart">Proceed to Checkout</a></td>
                                            <td class="c"></td>
                                            <td class="c"></td>
                                        </tr>
                                    {% endfor %} 
                                    </tbody>
                                </table>
                            </form>
                        </div> <!-- /Basket Inner -->
                        {% endif %}
                    </div><!-- /Moreinfo Clearfix -->
                </div> <!-- /#cart -->
            </div> <!-- Mini-Basket -->
            <a id="basket-button">
                <div class="basket-top">Basket</div>
                    <div class="basket-bottom">
                        -
                        <span class="cart-total-items">
                            <span class="count">{{ cart.item_count }}</span>
                        </span>
                        -
                    </div>   
            </a>
        </div> <!-- /.topbar-basket -->
    </div> <!--/.topbar anchor -->
</div> <!-- /.topbar -->
And most of the relevant CSS is:

Code:
/* Mini Cart */
.topbar {width:100%; height:5px; background-color:#333;}
.topbar-anchor {z-index:1999999; width:1100px; margin:0 auto; height:5px; background-color:#333; position:relative; top:-5px}
#mini-basket {background-color: #333; color:#fff width: 500px; text-align:center; border-radius:0 0 10px 10px;}
.topbar-basket {float: right; height: 5px; margin-top: 5px; width: 500px;}
.basket-summary{height:38px; float:right; width:40px; background-color:#333; padding: 0 10px 0 10px; border-radius:0 0 30px 30px;}
.basket-top{text-align:center; font-weight:bold; font-size:11px;}
.basket-bottom{text-align:center; position:relative; top:-12px; font-weight:bold; font-size:11px;}
#basket-button {cursor:pointer; height:35px; position:relative; right:30px; width:70px; float:right; background-color:#333; border-radius:0 0 30px 30px;}
.top-row {font-weight:bold;}
.summary-mini {padding:20px;}
.minicart-proceed{font-weight:bold;}
.cart .more-info{padding:0px; margin:0px;}
Any help people can offer really would be much appreciated!

Many thanks in advance!

Tom