...

View Full Version : Horizontal ul vs. Single row table



zach4618
05-30-2007, 12:35 AM
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.

VIPStephan
05-30-2007, 01:45 AM
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:


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


<img src="" alt="" /><img
src="" alt="" /><img
src="" alt="" /><img
src="" alt="" />

zach4618
05-30-2007, 02:23 AM
Thats strange. I wonder why the line breaks make a difference between list items but not between table cells.

koyama
06-03-2007, 11:53 PM
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/archives/2005/01/Interner_Explorer_completely_ignores_closing_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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum