I’ve recently switched over a rails app to a new server. For some reason, search results are sometimes scrambled. They look like this:

But they should look like this:

When I check in firebug, it seems that the wrapper div is not being parsed correctly, and so instead of a bunch of nodes wrapped in an <a> tag, the nodes are flat in the collection.

This happens on chrome and firefox, windows and linux, and on different computers. There don’t seem to be any CSS or HTML validation errors. I get no problem on my local development server, only in production.
What’s odd is that when I view an offending page in Firefox, click View > Source, copy the HTML into a blank document and then open it, it comes out looking fine. I also don’t seem to have this problem if I just fetch the page with curl.
The site is accessible at http://50.57.76.99. You might need to make a couple of searches to get the problematic result. Any ideas? I’m totally baffled!
I’ve managed to avoid the issue.
If I don’t wrap the whole item an
<a>tag, the problem disappears. Obviously I’d rather have the whole item be a link, but just the image is okay for now. I think another solution would be to swap the<div>tags for<span>tags as suggested, but this quick-fix seemed to do fine.Still seems quite bizarre though, as it was seemingly arbitrary when it breaks. Thanks for the help!