<pre> tag making browsers close paragraphs

Asked 18/8, 2010 at 1:56 Answered 18/8, 2010 at 2:3

I'm having an issue with the HTML below:

<html>
  <body>
    <p style="font-size: large"> 
        Some paragraph text 
        <span><pre style="display:inline">some span text</pre></span> 
        additional paragraph text that continues ...
    </p>

  </body>
</html>

So this is just a paragraph that contains some preformatted text in the middle. The problem that I am having is that both Opera and Chrome don't display this the way I expect. Specifically they close the paragraph tag before the span and force a new line. WTH?!

Using chromes HTML inspection options it shows that the  tag is being closed and an empty  inserted instead of enclosing the <pre>. If the span is removed chrome still closes the  tag, forcing a newline.

I need to have the following tag structure display without any newlines being forced <pre><code></code></pre>. Is this at all possible or is there another option or workaround?

EDIT: I'm locked into having the <pre> tag as it is part of a syntax highlighting plugin for wordpress.

NOTE: I think the best piece of advice here is to validate your HTML. A lot of the problems I was having was because of invalid HTML that was being handled gracefully by some browsers and not gracefully by others. Validating means you have a clean slate to work from.

Ninfaningal answered 18/8, 2010 at 1:56 Comment(0)

Get rid of the pre tag altogether, and just give your span style="white-space:pre". See this page for a description of other white-space options.

<pre> is basically saying <div style="white-space:pre">; what you want is .

Ursal answered 18/8, 2010 at 2:3 Comment(1)

Isn't the main thing that <pre> does use font-family: monospace;? A span like yours does not look like a programming font at all. – Recountal 6/10, 2021 at 21:10

Paragraph tags cannot contain block-level elements:

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

pre is a block level element.

You could instead set the CSS style white-space: pre on your span if you desired to have pre-like behavior in an inline element.

Subastral answered 18/8, 2010 at 2:2 Comment(0)

pre is a block level element, it isn't allowed to be inside a span if memory serves right.

You can find out by validating your HTML.

Weikert answered 18/8, 2010 at 1:59 Comment(1)

problem remains if the span tag is removed – Ninfaningal 18/8, 2010 at 2:2

Recommended topics

Hot tags