Managing the spacing with BR

Question

Howdy,

My users are using Telerik Rad Editor for creating content. The content looks one way in the editor (the "correct" way) and when it's rendered through IE it looks different (wrong).

They will do something like this (HTML source below)

<table><tr>
  <td>Some content here <br/><br/></td>
</tr>
<tr>
  <td>And some other here <br/><br/></td>
</tr>
<tr>
  <td>And finally some here too <br/><br/></td>
</tr>
</table>

So the output looks like this when it's rendered in IE

Some content here

And some other here

And finally some here too

And what they want is to show the two spaces after each line, so it's more like

Some content here

And some other here

And finally some here too

They want to see two lines of space... Can I control this with CSS at all?

Answer 1

You can try setting the tr height in CSS:

tr { height: 60px; }

This works for me in FF, but I don't know if this will work in all browsers -- CSS and tables generally don't get along that well. If you run into trouble, you might want to put a div inside your tds and set the height there.

Answer 2

You shouldn't really be using br to control spacing. You should be using block level elements with margin or padding, or inline/block elements with a proper line height to generate the spacing you want. a br is a soft break like shift+return in a word processor. You should only be using br to move something to the next line for line-breaking reason in the context of the flow of text, not for visual-structure reasons. /typesetting-rant

I wold configure the rich-text editor to wrap elements appropriately to generate block spacing. I don't really know the context of the data in your table but the default choice would be a p element assuming these are in fact full paragraphs of text. If they aren't there may be more appropriate elements like a div or a span set to display: block;. IF on the other hand they are doing this to achieve a particular table sizing instead of actually controlling the space between lines of text inside the cells then that should be handled with css applied directly to the table elements Kale suggests.