Home/ Questions/Q 8469975
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T16:22:58+00:00

In IE7 multiple line breaks (using <br /> or <br> ) within a <pre>

  • 0

In IE7 multiple line breaks (using <br /> or <br>) within a <pre> tag will cause IE7 to collapse the breaks into a single break. To demonstrate this you can use the following HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <style type="text/css">
            *
            {
                margin: 0px;
                padding: 0px;
            }
            .a, .b
            {
                float: left;
            }
            .b br
            {
                display: block;
            }
        </style>
    </head>
    <body>
        <pre class="a">Line 1a<br /><br />Line 2a</pre>
        <pre class="b">Line 1b<br /><br />Line 2b</pre>
    </body>
</html>

Which will result in: (for IE7)

Line 1a Line 1b
Line 2a
        Line 2b

And will result in: (for other browsers: FF, etc)

Line 1a Line 1b
        Line 2b
Line 2a

As you will see, I can fix that using display: block; on the <br /> tag itself. The problem is though, that then it won’t work in other browsers anymore, thus it is only a fix for IE7 and thus useless since IE7 is not really a major browser and will never be in future.

Although this is just a remark, and instead of a <pre> tag you can better use the CSS code on a <div> tag: white-space: pre-wrap;word-wrap: break-word; to simulate similar behaviour, the question left to answer is how to fix this anyways in a cross-browser way without CSS hacks or specific browser targeted CSS code.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you should use IE conditional comments.

    Yes, it’s a specific browser targeted CSS code, but you are writting correct HTML comments. If IE isn’t a compliant browser and decides to read the comments, it’s his problem. Moreover, if that solves your problem, what more do you want?

    Then, you can use

    <!--[if lte IE 7]>
<style type="text/css">
.b br{
    display:block;
}
</style>
<![endif]-->

    See it here: http://jsfiddle.net/APj3Y/1/

    • 0