height of nbsp rendered by IE

[cbowditch]

IE seems to render the following HTML line

<p>&nbsp;</p>

with a height of about 3x the default font size. Does anyone know why? I couldn't find any information on why IE does this on the web.

[penders]

Is that taking into account the default margins on the <p> element?

[rocknbil]

Welcome aboard cbowditch, my approach for whatever's unexpected - TEMPORARILY PUT A BORDER ON IT.

p { border:1px solid #000000; }

This will tell you exactly what it causing the problem the element you've chosen as suspect or something else.

If you're using <p>&nbsp;</p> in the context most do - to gain a little extra space without using <br> (ugh,) - a couple solutions:

- the preferred is to add more margin/padding on the object above or below. A "spacer" paragraph may be useful if the elements where you'd use it are far too varied, or adjusting element margin/paddings is too tedious or bloats the code.

- You can create these:

.nospace { margin:0; padding:0; }
.small-spacer { font-size: 2px; }
.med-spacer { font-size: 7px; }

WHAT? Pixel font sizes, AND so rediculously small? Sure, because you'd never use them for visible text.

<p class="small-spacer">&nbsp;</p>
<p class="med-space">&nbsp;</p>
<p class="small-spacer nospace">&nbsp;</p>
<p class="med-spacer nospace">&nbsp;</p>

They can be applied to any element using text: p, td, div . . .

Of course these are really "hacks" in the way a tabled layout is a "hack," but if you can't use the preferred method of handling spacing, these will work and not clog up the code too badly.

[cbowditch]

Thanks for the welcome. Putting the border round the element did help shed a little light on this mystery. The reason I was puzzled was that

<p> </p> did not take any space compared to <p>&nbsp;</p>

After adding borders I realised IE was collapsing the empty p, rather than &nbsp; taking up extra space.

I realise that adding padding or margins is best practise in favour of <p>&nbsp;</p> but in this case we generating HTML code in response to what a user types. Empty lines are handled in this way.

[punisa]

Welcome cbowditch,

May I suggest a great tool for quickly determining the sizes of your containers.
If you use FireFox download an extension called "Web Developer", it will give you many many options to check the live preview.
When you got it installed just hit "CTRL+SHIFT+Y" and hover over your divs : )

[swa66]

I realise that adding padding or margins is best practise in favour of <p>&nbsp;</p> but in this case we generating HTML code in response to what a user types. Empty lines are handled in this way.

Why don't you replace single instances of a newline into a <br /> and double or more instances into a </p><p>, wrap it all in a <p>...</p> and you have proper paragraphs that can be given margins ...

[rocknbil]

<p> </p> did not take any space compared to <p>&nbsp;</p>

Correct, and sometime check out what it does to tables:

<table border="1">
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>d</td><td> </td><td> </td></tr>
</table>

&nbsp; fixes that oddity too. IE seems to abhor empty elements.

Empty lines are handled in this way.

The only real "problem" with using <p>&nbsp;</p> is it gives you anonymous blocks of text without a semantic element (paragraph) with the actual paragraphs between them empty. Visually, it's fine, semantically, it's incorrect.

Although a topic for a different forum (programming language of choice,) I manage this by a fairly complex (or simple, for many programmers) subroutine that finds these empty spaces and places a <p> at the preceding block and closing </p> at the blank line, similar to swa66's suggestion but without the need for <br> (or <br/> for the XHTML addicts. :-) ) This addresses a topic too seldom considered by programmers, valid page output (that assists cross browser compatibility.)