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
    New Coder
    Join Date
    Feb 2007
    Location
    Albany, Oregon
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Horizontal ul vs. Single row table

    Until recently I have always used a single row table to create horizontal menus. Now I am starting to use lists with inline displayed items. One common problem I have run into however is that even if you set margin and padding for the list and list items to 0 and display to inline, a space will appear between each li. One way to fix this is to set the display for the list to table, but then I think why not use a table to begin with. I'm curious to know if someone knows of a more sensible way to correct this problem.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Yes, I know a way: You need to put at least the starting and ending tag of the list items on one line. The line breaks create those spaces. So your list should look something like this:
    Code:
    <ul>
      <li>
        <a href="#">link</a></li><li>
        <a href="#">link</a></li><li>
        <a href="#">link</a></li>
    </ul>
    You can put your entire list in one line too, if you prefer.

    Same goes with images next to each other (if you should come across this at some point):
    Code:
    <img src="…" alt="" /><img
      src="…" alt="" /><img
      src="…" alt="" /><img
      src="…" alt="" />

  • #3
    New Coder
    Join Date
    Feb 2007
    Location
    Albany, Oregon
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thats strange. I wonder why the line breaks make a difference between list items but not between table cells.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by zach4618 View Post
    Thats strange. I wonder why the line breaks make a difference between list items but not between table cells.
    That's because IE completely ignores the ending </li> tag. This bug has still not been fixed in IE7.

    Read this: http://www.quirksmode.org/bugreports...ing_li_ta.html

    However, I think that the person who has reported that bug is jumping to some too quick conclusions for the consequences of this bug, but still it seems to be true that IE ignores the closing </li> end tag.


  •  

    Posting Permissions

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