We build Web & Mobile Applications.

< All Articles

Strange inline list overflow

Over the weekend I was making the last few tweaks to the templates for our site so that we could finally go live. Everything was looking good until I added a few extra tags to an article: all of a sudden our tag cloud was overflowing.

The cloud is marked up as an ordered list (because the tags are sorted alphabetically) with each list item set to display inline. The XHTML looks like this:

<ol id="tag-cloud">
  <li><a href="/tags/erb" rel="tag" title="See the single entry tagged with erb">erb</a></li>
  <li><a href="/tags/haml" rel="tag" title="See the single entry tagged with haml">haml</a></li>
  <li><a href="/tags/markaby" rel="tag" title="See the single entry tagged with markaby">markaby</a></li>
  <li><a href="/tags/new%20site" rel="tag" title="See the single entry tagged with new site">new site</a></li>
  <li><a href="/tags/rails" rel="tag" title="See the single entry tagged with rails">rails</a></li>
  <li><a href="/tags/ruby" rel="tag" title="See the single entry tagged with ruby">ruby</a></li>
  <li><a href="/tags/templates" rel="tag" title="See the single entry tagged with templates">templates</a></li>
  <li><a href="/tags/to-done" rel="tag" title="See the single entry tagged with to-done">to-done</a></li>
  <li><a href="/tags/welcome" rel="tag" title="See the single entry tagged with welcome">welcome</a></li>
</ol>

The list items are generated by a loop in the Liquid templates which is why they are all lumped together on one line.

Unusually the problem wasn’t confined to Internet Explorer and I was able to quickly rule out a CSS error. My next thought was that maybe I should just float each list item and forget about it – but I really wanted to know why the overflow was happening.

Thankfully I was able to find a very thorough write-up of the problem by Jon Chambers. It turns out that because there was no white space between my <li> elements the browser didn’t know where to put a line break when it reached the edge of the ordered list container. It was only because some of the tags contained spaces that it was able to do any wrapping at all.

As Jon says this can happen whenever inline elements are used within a container with no white space between them and the problem is made worse if the inline elements themselves also contain no white space.

The good news is that simply changing the template to include a space after each closing <li> tag fixed the problem. I’m surprised that I’ve never come up against this before but at least I know how to fix it if it ever happens again!

Updated on 07 February 2019
First published by Rob Anderton on 13 November 2007
© Rob Anderton 2019
"Strange inline list overflow" by Rob Anderton at TheWebFellas is licensed under a Creative Commons Attribution 4.0 International License.