Can someone assist me with properly positioning my Sliding TAB? It appears fine in my browser, but on other computers with varying resolutions, it overlaps with another tab.
If you'd like to view the site, click this LINK
Below is the code I am using:
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>