Encountering a strange bug in my code
Here's what I have:
<div class='test'>
<button class='btn'></button>
<div class='nest'>
more...
</div>
</div>
My CSS
.test{
z-index: 100;
position: absolute;
bottom: 15px;
left: 1%;
width: 98%;
min-width: 500px;
height: 45px;
background: url(images/botnav_bg_shim.png) repeat-x;
border-radius: 3px;
}
.btn{
margin-left: 2px;
width: 128px;
height: 48px;
background:url(images/bot.png) no-repeat;
}
.nest{
display: inline-block;
margin-left: 10px;
height: 45px;
padding-left: 17px;
background:url(images/nest.png) no-repeat;
}
Issue: The button element is mysteriously shifted down by 50px. Any help would be appreciated. Thanks!