Why can't I set a width to this UL element in my HTML?

Go HERE, and you will notice that the "Audio" tile's player can be seen on both tiles when I need it only to be seen on the tile that says Audio. When it slides, I mean. I tried setting a width to the UL element that the tiles are in but that screws it up. I'm at a loss. I have tried everything I can think of. Any input?

CSS

#audioTile {
padding:5px;
}

#audioTile ul, #audioTile li {
width:115px;
height:105px;
margin:0px;
padding:0px;
list-style:none;
}

JS

    $(document).开发者_Python百科ready(function(){   
        $("#audioTile").easySlider({
            auto: true, 
            continuous: true,
                            controlsShow: false
        });
    }); 

HTML

<div class="trigger" id="audioTile"> <ul>
<li>    <h5>Audio</h5>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{MonthNumber} {DayOfMonth} {Year}
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{block:NoteCount}{NoteCount} <img   
src="http://static.tumblr.com/ux4v5bf/2Z0lf9580/heart.png">{/block:NoteCount}
<div class="player1">{AudioPlayerWhite}</div>
</li>
<li> hey big fat weirdo loL!
</li>  </ul>
    </div> 

---

your problem is that you didn't set overflow:hidden on your ul and you are scrolling with your js... since you set list-style:none, and explicitly set the li 's width.( by default, overflow is allowed)

---

ps, firebug suggests to me that you have included two players in the same tile... not sure if that's what you want...