wide UL with floating list-items

[b_hole]

Hi,

I have a UL containing a few list-items. I want the list items to stay in the same line, even if the size of the window is too small. So I've added width: 1500px to the UL.
But the problem is that in some browsers (Opera, IE7, Safari and such, but not in Firefox), the scrollbar is visible all the time, not only when the window size is too small.

Here's a piece of code:

CSS:
ul {list-style-type: none; width: 1200px}
li {float: left; margin: 0 15px}

HTML:
<ul>
	<li>item one</li>
	<li>item two</li>
	<li>item three</li>
	<li>item four</li>
	<li>item five</li>
	<li>item six</li>
	<li>item se7en</li>
	<li>item eight</li>
	<li>item nine</li>
	<li>item ten</li>
</ul>

How can I avoid the scrollbars when the window width is ok?
Thanks.

[littlemiss]

add this code, it should hide scrollbars, ive never used it in the context of a list but you could give it a try


overflow:hidden;

[b_hole]

That wouldn't help. On the contrary - it will force scrolling in all browsers, including Firefox.

Any other ideas?

[Arbitrator]

Note that it would be helpful if you could provide a live example and a more clear explanation. I wouldn’t be surprised if I misinterpreted your issue.

Originally Posted by b_hole

I want the list items to stay in the same line, even if the size of the window is too small.

You can use the CSS2+ display: table and display: table-cell properties to force them onto a single line regardless of the size of the viewport and without having to specify a fixed width.

ul { display: table; }
li { display: table-cell; }

The caveat is that Internet Explorer doesn’t support them.

Originally Posted by b_hole

That wouldn't help. On the contrary - it will force scrolling in all browsers, including Firefox.

overflow: hidden hides scrollbars, so this explanation makes no sense.