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...