I've got an app that hosts simple html pages for people. Some of whom use tables for design layout. (Not me, I swear!) For some mysterious reason, render breaks these layouts in Internet Explorer.
Here is the simplest way I've been able to reproduce the issue.
When I save an html file into public/ and access it through Mongrel, it appears fine in all browsers. If I use the following code to render the file, it gets funky:
render :file => '[app_directory]/public/sample.html'
Internet Explorer creates an empty text node for each newline, which leads to gaps in the table. The raw html is apparently identical, but when served with render it is somehow changed in a way that makes Internet Explorer unhappy.
I'd be terrifically grateful for any pointers on how to stop this. Thanks!
Edit 1: The mystery deepens...
I have figured out how to get Chrome to have the same error. Here is code that works in Chrome, and is broken in IE:
# tab_controller.rb
render :inline => tab.public_html
But when I change this to use an external ERB template, the strange whitespace shows up in Chrome as well:
# tab_controller.rb
@html = tab.public_html
render 'show'
# show.erb
<%=raw @html %>
I'm sure there is an explanation for this, but the more I dig the stranger it gets.
Edit 2: Headers
Here are the response headers that IE gives for the statically served file:
Response HTTP/1.1 200 OK
Connection close
Date Fri, 05 Aug 2011 00:33:20 GMT
Last-Modified Thu, 04 Aug 2011 23:38:21 GMT
Content-Type text/html
Content-Length 913
And here are the response headers that IE gives for the content produced via render. The content that has the issues:
Response HTTP/1.1 200 OK
Connection close
Date Fri, 05 Aug 2011 00:28:18 GMT
Content-Type Text/html
X-UA-Compatible IE=Edge
ETag "43d392ddbbcf3856ced3de672005c26f"
Cache-Control max-age=0, private, must-revalidate
Set-Cookie _rails_static_html_session=[session stuff]; path=/; HttpOnly
X-Runtime 31.964569
Transfer-Encoding chunked
Edit 3: Code
You can (I hope) reproduce the issue by putting the following code in any random controller:
html = "<html>\n<head>\n</head>\n\n<body>\n<table width='520' height='870' border='0' cellpadding='0' cellspacing='0'>\n <tr>\n <td align='center' valign='top'><div align='center'>\n <table width='520' border='0' cellspacing='0' cellpadding='0'>\n <tr>\n <td><img src='.' width='520' height='314' /></td>\n </tr>\n <tr>\n <td><img src='.' width='520' height='320' /></td>\n </tr>\n <tr>\n <td><img src='.' width='520' height='166' /></td>\n </tr>\n <tr>\n </tr>\n </table>\n </div></td>\n </tr>\n</table>\n</body>\n</html>"
render :inline => html
File.open('/railsappdirectory/public/sample_html.html', 'w') {|f| f.write(html) }
When you access this with Internet Explorer through the rails app, there will be gaps between the images. When you view the html file as a static asset, there will be no gaps.