Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2006
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts

    wide UL with floating list-items

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

  • #2
    New Coder
    Join Date
    Aug 2007
    Posts
    66
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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;

  • #3
    Regular Coder
    Join Date
    Aug 2006
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That wouldn't help. On the contrary - it will force scrolling in all browsers, including Firefox.

    Any other ideas?

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,277
    Thanks
    28
    Thanked 272 Times in 266 Posts
    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.

    Quote Originally Posted by b_hole View Post
    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.

    Code:
    ul { display: table; }
    li { display: table-cell; }
    The caveat is that Internet Explorer doesn’t support them.

    Quote Originally Posted by b_hole View Post
    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.
    Last edited by Arbitrator; 08-08-2007 at 10:59 AM. Reason: The post was entirely rewritten.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •