CODEWITHSUNDEEP
javascriptjquerycsscross-browser
Jeremi Liwanag
Jeremi Liwanag

Reputation: 964

Sliding Tab Positioning CSS

I need help in positioning my Sliding TAB. It does work and looks good on my browser... But when viewed on other computer with different resolution. It overlaps the other tab.

Here's the site.. LINK

Here's my code..

CSS**

    .slide {
        position: fixed;
        overflow: hidden;
        width: 300px;
        margin: 1em 0;
        height: 100%;
        float: left;
        top: 230px;
        left: 0px;
        z-index: 999999;
    }
    .slide .inner {
        position: absolute;
        left: -270px;
        top: 0;
        width: 300px;
        color: #333;
        z-index: 999999;
    }
    .scontent {
        float: left;
        width: 251px;
        background: #fff;
        height: 200px;
        padding: 10px;
        z-index: 999999;
        -webkit-border-bottom-right-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        border-bottom-right-radius: 10px;
        border: 1px solid #bbb;
        border-right: none;
    }
    .mybutton {
        display: block;
        cursor: pointer;
        float: left;
        width: 25px;
        height: 147px;
        background: url(images/remotesupporttab.jpg) no-repeat #fff;
        ;
        z-index: 999999;
        -webkit-border-top-right-radius: 7px;
        -webkit-border-bottom-right-radius: 7px;
        -moz-border-radius-topright: 7px;
        -moz-border-radius-bottomright: 7px;
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
        border: 1px solid #bbb;
        border-left: none;
    }

JS**

    <script type="text/javascript">
    $(document).ready(function() {
      $('#slideleft .mybutton').click(function() {
        var $lefty = $(this).parent();
        $lefty.animate({
          left: parseInt($lefty.css('left'),10) == 0 ?
          -$lefty.outerWidth() + 31 :
          0
        });
      });
    });  

    </script>

Upvotes: 0

Views: 153

Answers (1)

chank
chank

Reputation: 3636

it looks like, your 'customersure_tab' is positioned in percentage and the other tab is in fixed px (top: 230px;)

Upvotes: 1

Related Questions