What’s wrong with ‘http://’ URLs in ‘pre’ blocks?


I use the Piano Black theme with the following custom CSS for the ‘pre’ tag:

pre {
	background-color: rgba(0,25,0,0.5);
	border: 0;
	border-left: 10px solid #333;
	overflow: auto;
	padding: 0 0 0 1em;
	font-size: 12px;
}

That works fine if no URL appears in the block, as in

<pre>
pre-styled 
   short text
      without URLs...
</pre>

correctly rendered as

pre-styled 
   short text
      without URLs...

But if there’s an URL on a single line, extra lines are added and indentation is not respected. Indeed the following snippet

<pre>
   an URL on one line screws... 
      http://foo
...line spacing and indentation
</pre>

becomes

   an URL on one line screws... 
      http://foo
...line spacing and indentation

Even stranger, if the URL is mixed with other words on the same line, the line spacing is OK:

a line with URLs and other words... 
   quux  http://foo   bar
...looks right!

And it looks like that other URLs are rendered correctly:

a different URL... 
     ftp://foo
...is rendered correctly

Do I miss anything? What’s wrong with http:// inside a preformatted block?

Advertisements