Odd behaviour with inline list items with no whitespace inbetween them

BillyRayPreachersSon · Jun 18, 2009

I've been scratching my head over this one for a day or so now, gradually removing styling and HTML to try narrow it down.

I've just cracked it, and thought I'd share my findings in case it helps someone else bypass the headache of finding what wasn't completely obvious.

I'm also curious to find out what others think about whether the behaviour should or shouldn't happen - especially so given it is not consistent across browsers.

Enough talk, here's some code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
	<title>Inline list test</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

	<style type="text/css">
		ul, li {
			list-style-type: none;
			margin: 0px;
			padding: 0px;
		}

		ul {
			background-color: #999999;
			width: 200px;
			margin-bottom: 10px;
		}

		li {
			display: inline;
		}

	</style>
</head>

<body>

	<ul>
		<li><a href="#">nibble</a>,</li><li><a href="#">muppets</a>,</li><li><a href="#">cardoor</a>,</li><li><a href="#">bluekitten</a>,</li><li><a href="#">darkblue</a></li>
	</ul>

	<ul>
		<li><a href="#">nibble</a>,</li> <li><a href="#">muppets</a>,</li> <li><a href="#">cardoor</a>,</li> <li><a href="#">bluekitten</a>,</li> <li><a href="#">darkblue</a></li>
	</ul>

	<ul>
		<li><a href="#">nibble</a>,</li>
		<li><a href="#">muppets</a>,</li>
		<li><a href="#">cardoor</a>,</li>
		<li><a href="#">bluekitten</a>,</li>
		<li><a href="#">darkblue</a></li>
	</ul>
</body>
</html>

The code we were using was the first UL example, with no whitespace between the LI elements.

I expected all 3 lists to be 200px wide, with a comma-delimited set of anchors wrapping nicely inside the grey box, never extending out of it. Basically, I've always assumed the comma, being punctuation, would be a valid wrapping point in a string.

What actually happens is completely different.

IE 6
List 1 is extended width-wise to accommodate the LIs.
Lists 2 and 3 wrap as expected.

Safari 3, Safari 4, Chrome
List 1 has 'bluekitten' pushed out of the right-hand end, although 'darkblue' wraps as expected.
Lists 2 and 3 wrap as expected.

IE 7, IE 8, Fx 2, Fx 3, Fx 3.5, Opera 9.63
List 1 has both 'bluekitten' and 'darkblue' pushed out of the right-hand end.
Lists 2 and 3 wrap as expected.

I guess my question is: 'Should the comma always be a valid wrapping point in a string?'

I've always assumed it would be, now I know that that is not always the case.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

Vragabond · Jun 18, 2009

I would always expect comma NOT to be the wrapping point. Comma can be (and is) used as a decimal symbol or a thousands delimiter. In such cases, you would never expect comma to be the wrapping point since, in normal document flow, you might end up with:

text said:
In mathematics, the number Pi equates to approximately 3,
14 and describes the ratio of any circle's circumference to its diameter.

In early 2003, 36 million people across the globe took part in almost 3,
000 protests against the Iraq war.

I would however, expect in normal writing style, to always have a space following a comma, which is the element that provides the wrapping point. It is this space that wraps, and not the comma. That is also why commas appear at the end of the line and never at the beginning (under normal style guide).

Onto browser behaviour. I would say the largest group with FF renders list 1 in the way I would believe it to be correct. IE6 does a good job too, but suffers from other issues of extending the container. WebKit (used by Safari and Chrome) displays it wrongly, because it inserts an arbitrary space, most likely as an expected space (given the normal guidelines for writing). All browsers render lists 2 and 3 the same, because these lists have the needed space between the items.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

BillyRayPreachersSon · Jun 18, 2009

Good point about the decimal delimiter - I'd not thought about that.

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Odd behaviour with inline list items with no whitespace inbetween them

BillyRayPreachersSon

Programmer

Vragabond

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor