I have a pretty basic html question but it is something that has bothered me for a long time and I've never come across any solution to it as of yet. Maybe you guys can help.<br />
<br />
With lists, Internet Explorere tends to add an extra space after the last list item. However, Netscape doesn't. What is a work-around to make a list display consistently across all browsers, that is, without building a table structure to simulate the layout?<br />
<br />
Suggestions?<!--content-->My GUESS is that you could add style="display: inline;" to the list tag...
<!--content-->I don't think I've seen what you're talking about. My versions of IE (6.0) and Netscape (actually Mozilla 1.3) seem to display the lists in the same fasion. Could you give me a link to a page that displays the difference of which you speak?<!--content-->It sounds like something is nested wrongly within the code making up the list.<br />
<br />
Run the code through <!-- m --><a class="postlink" href="http://validator.w3.org/detailed.html">http://validator.w3.org/detailed.html</a><!-- m --> just to see what may be wrong.<br />
<br />
If there any error messages, you may have found the prblem.<!--content-->Thanks for the replies. I just tested and, although most of you are correct in saying it displays the same across all browsers, I just realized that it is in special circumstances when it doesn't. More specifically, it is when the list is within a table. Try this code and view in various browsers:<br />
<br />
<html><br />
<head><br />
<title>Untitled</title><br />
</head><br />
<body><br />
<table border="1" cellpadding="0" cellspacing="0" width="300" align="left"><br />
<tr><br />
<td><br />
<ul><br />
<li>one</li><br />
<li>two</li><br />
<li>three</li><br />
</ul></td><br />
</tr><br />
</table><br clear="all"><br />
text<br />
</body><br />
</html><br />
<br />
Comments/suggestions?<!--content-->What I said before works, <UL style="display: inline;">, but it does something weird to the first item in the list, hehe.<!--content-->If you can live with empty lines always preceeding a <ul> and always following a </ul>, have text at each end. From the heart of kjwan's example:<br />
...<br />
start<ul><br />
<li>one</li><br />
<li>two</li><br />
<li>three</li><br />
</ul>end</td><br />
...<br />
This way, in table or out, the spacing will be consistent across browsers. Unfortunately, I do not now how to have the empty lines always gone from both ends. At least the list is always symmetrically placed.<!--content-->
<br />
With lists, Internet Explorere tends to add an extra space after the last list item. However, Netscape doesn't. What is a work-around to make a list display consistently across all browsers, that is, without building a table structure to simulate the layout?<br />
<br />
Suggestions?<!--content-->My GUESS is that you could add style="display: inline;" to the list tag...
<!--content-->I don't think I've seen what you're talking about. My versions of IE (6.0) and Netscape (actually Mozilla 1.3) seem to display the lists in the same fasion. Could you give me a link to a page that displays the difference of which you speak?<!--content-->It sounds like something is nested wrongly within the code making up the list.<br /><br />
Run the code through <!-- m --><a class="postlink" href="http://validator.w3.org/detailed.html">http://validator.w3.org/detailed.html</a><!-- m --> just to see what may be wrong.<br />
<br />
If there any error messages, you may have found the prblem.<!--content-->Thanks for the replies. I just tested and, although most of you are correct in saying it displays the same across all browsers, I just realized that it is in special circumstances when it doesn't. More specifically, it is when the list is within a table. Try this code and view in various browsers:<br />
<br />
<html><br />
<head><br />
<title>Untitled</title><br />
</head><br />
<body><br />
<table border="1" cellpadding="0" cellspacing="0" width="300" align="left"><br />
<tr><br />
<td><br />
<ul><br />
<li>one</li><br />
<li>two</li><br />
<li>three</li><br />
</ul></td><br />
</tr><br />
</table><br clear="all"><br />
text<br />
</body><br />
</html><br />
<br />
Comments/suggestions?<!--content-->What I said before works, <UL style="display: inline;">, but it does something weird to the first item in the list, hehe.<!--content-->If you can live with empty lines always preceeding a <ul> and always following a </ul>, have text at each end. From the heart of kjwan's example:<br />
...<br />
start<ul><br />
<li>one</li><br />
<li>two</li><br />
<li>three</li><br />
</ul>end</td><br />
...<br />
This way, in table or out, the spacing will be consistent across browsers. Unfortunately, I do not now how to have the empty lines always gone from both ends. At least the list is always symmetrically placed.<!--content-->