Inline list items were breaking where they shouldn't

Located in:

One of my Drupal modules (combined with a node template) looks for (intra-article) anchor links at the beginning of the article code and then dynamically builds a menu with these links at the top of the article. (This was a somewhat messy but effective way of bringing old content with anchor links into a new environment without having to re-write the old article code.) So what? Well, it turns out a lack of white space / line breaks in my code was messing with my layout. I'll try to show you what I mean.

The situation and problem

Let's say the original article was divided into three sections:

  1. Visits
  2. Economic cooperation
  3. Cultural relations

Each section heading has an id (ie. <h2 id="visits">) that can be used as an anchor tag. (ie. <a href="#visits">Visits</a>) At the beginning of the article, there's something like this, allowing the user to link directly to a subsection:

<ul>
<li><a href="#visits">Visits</a></li>
<li><a href="#economic">Economic cooperation</a></li>
<li><a href="#culture">Cultural relations</a></li>
</ul>

Anyway, the module code that generated the unordered list actually spit out the code without any line breaks or white space...

<ul><li><a href="#visits">Visits</a></li><li><a href="#economic">Economic cooperation</a><li><li><a href="#culture">Cultural relations</a></li></ul>

...the result of which was weird behaviour in the rendered menu's layout. The CSS for the menu has the li tags displaying inline (ie. horizontally) but sometimes the menu would break to a second line at the first instance of a space in the link name. (ie. Economic cooperation) It seems the browser's rendering engine, not seeing any white space or line breaks in the big long stretch of unordered list code, decided to break to the next line at the first sign of white space. (ie. the space between "economic" and "cooperation") It meant that a stretch of menu links that could fit fine into one line was prematurely breaking onto two lines.

Solution

I simply revisited the php code that was building the menu and concatenated . "\n" (a line break) at the end of each </li>. Presto, the annoying line breaking layout problem was solved by using code like this:

<ul>
<li><a href="#visits">Visits</a></li>
<li><a href="#economic">Economic cooperation</a></li>
<li><a href="#culture">Cultural relations</a></li>
</ul>

Instead of this:

<ul><li><a href="#visits">Visits</a></li><li><a href="#economic">Economic cooperation</a><li><li><a href="#culture">Cultural relations</a></li></ul>

I don't know if there's an explanation for this somewhere in a specification somewhere, but I always thought white space in code was pretty much irrelevant. I guess I was wrong. The moral of my story is to keep that code well-structured and clean to avoid this kind of non-issue becoming an issue.

0
No votes yet
Your rating: None

Social mediatize it!

Twitter Twitter Facebook Facebook     
How about that! I'm a Drupal association member.

Attention IE user!

It turns out you are using an outdated browser and my site might look a bit weird for you. (images are off colour, text gets cut off, layout is wacky) This is because your browser does not implement web standards. Please consider an upgrade.

Alternatively, you can try other browsers like Google Chrome, Mozilla Firefox, Opera or Apple's Safari. Every web developer on the planet will thank you! (and that's not really an exaggeration)

Hide this notice for the rest of your visit