UL Horizontal Scrollbar

[TrueColors]

Below is my css

ul#attachmentList {
    background:#fff;
    height:40px;
    padding: 0;
    list-style: none;
    width: 705px;
    border:1px solid #ABADB3;
    overflow-x: scroll;
}
ul#attachmentList:hover {
    border-top:1px solid #3B7BAD;
    border-left:1px solid #A4C9E3;
    border-right:1px solid #A4C9E3;
    border-bottom:1px solid #A4C9E3;
}
ul#attachmentList li {
    margin: 2px 0 2px 2px;
    float: left;
    background: AliceBlue;
    padding: 0 10px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    
    -moz-border-radius: 5px;
    border-radius:5px;
    -webkit-border-radius:5px;
}

Now when I keep adding LI's it doesn't make use of the horizontal scrollbar (although the bar is visible). The li's just go beneath each other. I want it to make use to the scrollbar.

 

What am I doing wrong?

 

[cssfreakie]

got some html code ?

[TrueColors]

I put the scrollbar on the div. I used JavaScript to loop through the LI's and add the widths, including padding's and any margins. Then that total width is the width of the UL.

 

The JavaScript is:

		<script type="text/javascript">
		function updateULWidth()
		{
			var item_width = 0;

			$("ul#attachmentList li").each(function() {
				var wide = $(this).width();

				$(this).css({'width' : wide + "px"});

				item_width += parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right')) + parseInt($(this).css('margin-left')) + parseInt($(this).width());
			});

			$("ul#attachmentList").css({'width' : item_width + "px"});
		}
	</script>

[cssfreakie]

Oei Sorry i am as good in javascript (within the css forum) as playing rugby without legs and being blindfolded.

 

I assume your nifty JavaScript outputs html in the end right? post that here. I find it more than difficult to imagine how this would look. Maybe got an on-line example otherwise would save a lot.