HTML - Alignment Problem With Inline-block

In a nutshell:
---

The following <li> tags are inline-blocks. Why does removing the closing <li> tags fix the whitespace issue?

Code:

	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>

Versus...

Code:

	<li>Item one
	<li>Item two
	<li>Item three

The context of this question:
---

From:
CSS display: inline-Block: Why It Rocks, And Why It Sucks

The above post is about using inline-block instead of float to position <li> elements, which is useful for making navigation bars.

There is one drawback to using inline-block:
(You can copy and paste the first piece of code below to see what I'm talking about.)
If you restrict the <ul> to a particular width, your navbar won't display correctly, which has something to do with hitting the RETURN key between your lines of code (whitespace issues?). See below:

This works fine because there we didn't hit RETURN to create a line break between each list.
<li>Item One</li><li>Item Two</li>

Here, we hit RETURN to put each list on a separate line and now the code doesn't display properly. The first piece of code below illustrates this problem.
<li>Item One</li>
<li>Item Two</li>

The second piece of code solves this problem by using comments to remove the whitespace.

The third piece of code solves this problem by removing the closing <li> tags. My question is, how does removing closing tags change anything? Are there any issues I should be aware of if I use this solution? Are there other contexts where I can apply a similar technique?




Code:

<style type="text/css">

	ul#display-inline-block-example,
	ul#display-inline-block-example li {

		margin: 0;
		padding: 0;
	}

	ul#display-inline-block-example {
		width: 300px;
		border: 1px solid #000;
	}

	ul#display-inline-block-example li {
		display: inline-block;
		width: 100px;
		min-height: 100px;
		background: #ccc;
		vertical-align: top;

	}
</style>

<ul id="display-inline-block-example">
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
</ul>

Code:

<style type="text/css">

	ul#display-inline-block-example,
	ul#display-inline-block-example li {

		margin: 0;
		padding: 0;
	}

	ul#display-inline-block-example {
		width: 300px;
		border: 1px solid #000;
	}

	ul#display-inline-block-example li {
		display: inline-block;
		width: 100px;
		min-height: 100px;
		background: #ccc;
		vertical-align: top;

	}
</style>

<ul id="display-inline-block-example">
	<li>Item one<!--
	--><li>Item two</li><!--
	--><li>Item three</li>
</ul>

Code:

<style type="text/css">

	ul#display-inline-block-example,
	ul#display-inline-block-example li {

		margin: 0;
		padding: 0;
	}

	ul#display-inline-block-example {
		width: 300px;
		border: 1px solid #000;
	}

	ul#display-inline-block-example li {
		display: inline-block;
		width: 100px;
		min-height: 100px;
		background: #ccc;
		vertical-align: top;

	}
</style>

<ul id="display-inline-block-example">
	<li>Item one
	<li>Item two
	<li>Item three
</ul>

Hi, I was wondering if someone could explain block and inline elements. I know they deal with word wrap but, I have read and I am still confused on how you know what is a block element and what is an inline element. Can someone provide some aid? Thanks.

I'm having some trouble figuring out what the best way to implement something is. I have a <div> with a <button> in it that has some text. I'm using niftyCorners to round the div corners, and the div needs to be a block level element because if I make it inline, the background disappears after it is rounded. My problem is that I only want the div to be as wide as the text in it, because the div is what is providing the background and rounded corners and such for the button. Is there a good way to implement this? All I can think of is floating the div which would be a PITA or trying to set an explicit width with JS or something.

I know from personal experience, the specs and some great posts that DIV's are not allowed inside of P tags. And it's normal to be so, but what about inline-blocks?

I could simply use SPAN or some other inline element which works inside the P, but IE only renders natural blocks as inline-block. Meaning if it's an inline element it will work in Firefox but not IE, if it's a block the other way arround.

So how do I solve this quanundrum?

Either I need an element which is a natural block in IE and is allowed inside a P by the specs, or I'll use DIV instead of P, but I would much rather avoid this.

Hi all,

[LINK REMOVED]

Just in the process of changing this website from a black layout with a background to an all white layout... I'm wishing I had started from scratch now but I stupidly tried to work with the existing site.

So anyyways you can ignore the crappy looking bits because my question is just about the menu bar at the top... It's made from an inline list. Is there any way that I could spread it out across the screen, so that the menu item on the right is hard up against the right?

The other thing is that the site will be in 3 or 4 languages so the menu items will have more characters in Spanish (for example). It needs to be able to adapt, or I need to implement a different solution for each language.

The html looks like this:
Code:

			<!-- main navigation -->
			<ul id="nav">
				<li class="home">
					<a href="index.htm"><span>Home</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="message-from-director.htm">Message From Director</a></li>
							<li><a href="what-is-15-15.htm">What is 15/15?</a></li>
							<li><a href="festival-history.htm">Festival History</a></li>
							<li><a href="judges-special-guests.htm">Judges &amp; Special Guests</a></li>
						</ul>
					</div><a href="#"><span>About 15/15</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="register-now.php">Register Now</a></li>
							<li><a href="get-ready.htm">Get Ready</a></li>
							<li><a href="conditions-of-entry.htm">Conditions of Entry</a></li>
							<li><a href="faq.htm">FAQ</a></li>
						</ul>
					</div><a href="#"><span>How To Enter</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="screening-information.htm">Screening Information</a></li>
							<li><a href="nominations.htm">2009 Nominations</a></li>
						</ul>
					</div><a href="#"><span>Programme</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="films.htm">Films</a></li>
							<li><a href="festival-trailers.htm">Festival Trailers</a></li>						
						</ul>
					</div><a href="#"><span>Archives</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="festival-sponsors.htm">2009 Festival Sponsors</a></li>
						</ul>
					</div><a href="#"><span>Sponsors</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="press-releases.htm">Press Releases</a></li>
							<li><a href="images.htm">Images</a></li>
						</ul>
					</div><a href="#"><span>Newsroom</span></a>
				</li>
					<li class="contact">
					<div>
						<ul>
							<li><a href="contact-us.php">Contact Us</a></li>
							<li><a href="15-15-committee.htm">15/15 Committee</a></li>
						</ul>
					</div><a href="#"><span>Contact</span></a>
				</li>
			</ul>

...and the CSS looks like this:

Code:

#nav {
	font-size: 15px;
	line-height: 20px;
	list-style: none;
	padding: 0;
	position: absolute;
	top: 250px;
	left:-5px;
	width: 750px;
}
#nav li {
	display: inline;
	float: left;
	margin: 0 0 0 0px;
	position: relative;
}
#nav a {
	color: #000;
	float: left;
	text-decoration: none;
}
#nav a span {
	cursor: pointer;
	float: left;
	display: inline;
	font-weight: bold;
	line-height: 30px;
	padding: 0 5px;
}
#nav li.hover a,
#nav li:hover a {
	background: url(../img/active-l.gif) no-repeat 0 0;
}
#nav li.hover a span,
#nav li:hover a span {
	background: url(../img/active-r.gif) no-repeat 100% 0;
}
#nav .contact div {
	background: #D3D2D2 url(../img/bg-bg-t2.gif) no-repeat 0 -1px;
	left: auto;
	right: 0;
}
* html #nav .contact div {
	right: -1px;
}
#nav div {
	background: #D3D2D2 url(../img/bg-bg-t.gif) no-repeat 0 -1px;
	display: none;
	left: 0;
	padding: 5px 0 0;
	position: absolute;
	top: 30px;
	width: 168px;
	z-index: 100;
}
#nav li.hover div,
#nav li:hover div {
	display: block;
}
#nav div ul {
	background: url(../img/bg-b.gif) no-repeat 0 100%;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0 0 5px;
	text-transform: none;
	width: 168px;
}
#nav div ul li {
	margin: 0;
	padding: 0;
	width: 168px;
}
#nav li.hover div ul li a,
#nav li:hover div ul li a {
	background: none;
	color: #000;
	display: block;
	line-height: 30px;
	padding: 0 0 0 9px;
	width: 159px;
}
#nav li.hover div ul li a:hover,
#nav li:hover div ul li a:hover {
	background: #D9581F;
}

Any ideas?

Thanks so much in advance...

Neil