...

View Full Version : wide UL with floating list-items



b_hole
08-07-2007, 08:48 AM
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
08-07-2007, 03:34 PM
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
08-08-2007, 07:44 AM
That wouldn't help. On the contrary - it will force scrolling in all browsers, including Firefox.

Any other ideas?

Arbitrator
08-08-2007, 11:47 AM
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.


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.


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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum