what is the difference between these two ul tags

Question

hello something driver me crazy here i have a big HTML template which i can't post but the problem is that when i write ul tag like this everything works find

<ul><li>something</li><li>something</li><li>something</li></ul>

but when i write it like this i got +4 pixel i don't know from where

<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>

when i use the second method i'm sure that i have no extra space somewhere but i think it's from the "enter" between them

Any solution? css maybe

::Extra info

i found that the problem comes from closing and starting li tag this worked out

<ul>
<li>
something
</li><li>
something
</li><li>
something
</li>
</ul>

any idea ?

Answer 1

I don't know what cause the problem, but you can solve it using CSS. Write a style for li element and specify the proper margin.

Answer 2

You are probably noticing such gap because you are using CSS to make an horizontal menu; when making <li> inline elements white space between them is not ignored.

Answer 3

i would start by using a reset CSS like this one

Answer 4

What you're noticing is the 'feature' of (x)html collapsing whitespace into a single space. Most of the time this isn't too much of a problem, but for a horizontal menu it's an irritation.

There are two options available to deal with this (in addition to your first example):

<ul>
<li>something</li
><li>something</li
><li>something</li>
</ul>

(Note that the first two </li> tags aren't closed until the following line.)

<ul>
<li>something</li><!-- hiding the whitespace
--><li>something</li><!-- hiding the whitespace again
--><li>something</li>
</ul>

Of the two options I prefer the first, it doesn't throw up any errors, validating quite happily under xhtml 1.0 strict. It's not an ideal situation, but it's slightly better than trying to put a whole list into a single line of (x)html.