CSS “pre” Problem: No Linebreak After Tag

Perm url with updates: http://xahlee.org/js/linebreak_after_tag.html

CSS “pre” Problem: No Linebreak After Tag

Xah Lee, 2006-07-29, 2011-03-23

This page shows a odd CSS behavior of lines inside “pre” are being rendered without linebreaks. It has to do with “display:table”, and “span” tags.

Here's the html source code:

<pre style="display:table; border:solid thin">
<span style="color:red">line 1</span>
<span style="color:blue">line 2</span>
line 3

Here's what Safari shows:

Safari css pre display table line break

Screenshot of Safari (5.0.4 (7533.20.27)) on Windows.

The following browsers renders the first 2 lines in a single line.

  • Safari (5.0.4 (7533.20.27)) on Windows. (latest version as of 2011-03-23)
  • Google Chrome (10.0.648.151) on Windows. (latest version as of 2011-03-23)
  • Firefox ( Mac)
  • Safari (2.0.4) on Mac

The following browsers renders each line separate.

  • Firefox 4.0 on Windows. (latest version as of 2011-03-23)
  • Internet Explorer 9. (latest version as of 2011-03-23)
  • Opera 11.01 on Windows. (latest version as of 2011-03-23)
  • Opera (9.00 Mac)
  • iCab (β352 (3.0.1))
  • Internet Explorer 6. (however, IE6 does not honor the “display:table” CSS.)

What Does Your Browser Show?

Here's test pages to see what your browser shows.

What Does the Spec Say?

According to http://www.w3.org/TR/html4/appendix/notes.html#notes-line-breaks, quote:

SGML (see [ISO8879], section 7.6.1) specifies that a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag. This applies to all HTML elements without exception.

This may explain this behavior. However, this is indeed a very odd spec. How is one suppose to break the lines inside “pre” in the above situation? Adding “br” is illegal, and adding another line break doesn't help.

If one removes the “display:table”, then all browsers renders the “pre” as expected.

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs