Skip to content Skip to sidebar Skip to footer
Home / Asp.net / Html Rendering / Internet Explorer

Carriage Return Causes A Visual Space In Internet Explorer 8

Post a Comment
A carriage return in my html code causes a visual space in the rendered html in Explorer 8. I'm guessing this will affect other versions too. For example: (111)&n

Solution 1:

in HTML, the Formfeed character (U+000C) is treated as white space, in XHTML

http://www.w3.org/TR/xhtml1/#C_15

Also http://www.w3.org/TR/xhtml1/#uaconf (point 9):

White space is handled according to the following rules. The following characters are defined in [XML] white space characters:

SPACE ( ) HORIZONTAL TABULATION ( ) CARRIAGE RETURN ( ) LINE FEED ( ) The XML processor normalizes different systems' line end codes into one single LINE FEED character, that is passed up to the application.

The user agent must use the definition from CSS for processing whitespace characters [CSS2]. Note that the CSS2 recommendation does not explicitly address the issue of whitespace handling in non-Latin character sets. This will be addressed in a future version of CSS, at which time this reference will be updated.


Solution 2:

This is a scenario where sprintf type functions really shine. In the .NET world these are handled by String.Format. Here's the MSDN documentation and you could rewrite the code something like this:

<span>
<%= String.Format("({0:###}) {1:###}-{2:####} {3}", Model.AreaCode, Model.Prefix, Model.Suffix, Model.Extension); %>
</span>

I'm a little rusty on the .NET string format syntax, so no guarantees on that code snippet. Here's another link:

http://blog.stevex.net/string-formatting-in-csharp/


Solution 3:

Not just in IE8. I've tested it with chrome and it gives the same result. First you need to remove the space from < span> < /span> element it self. and infact there are 2 spaces between (111) 222 and 3333 44444. So it seems that each carriage return is taking one blank space.

This is perfectly ok consider this HTML...

<html>
  <head>
  </head>
  <body>
    This is some static text
    with carriage return
    <span>
      (111)&nbsp;222- 3333&nbsp;444444
    </span>
  </body>
</html>

the output would be...

This is some static text with carriage return (111) 222- 3333 444444

Watch for the space between text and with in static text. So translating carriage return to space is seems like a general rule for HTML.


Solution 4:

A newline is a space.

If you really want those things on separate lines, you could use HTML comments:

<span><!--
-->(111)&nbsp;<!--
-->222-<!--
-->3333&nbsp;<!--
-->444444<!--
--></span>

although that's not too great for readability either. Personally I don't see what's unreadable putting it all on one line. You could do:

<span style="white-space:nowrap">(111) 222-3333 444444</span>

if you feel the &nbsp;s are making it unreadable.


Post a Comment for "Carriage Return Causes A Visual Space In Internet Explorer 8"