Why does the Chrome spacing work in one JS file and not the other?

Question

Update: Bug Resolved. Answer points go to whoever explains why the fix works.

If you highlight and copy the text in the first paragraph on this page, then paste it into a rich text editor (dreamweaver or gmail in rich text mode), you will see that some of the text is automagically linked. Basically, it works:

http://seox.org/link-building-pro.html --> http://seox.org/lbp/old-pretty.js

I'm trying to build a second version, but somewhere along the way I broke it. If you go along with the same process on this new url, spacing before and after the link are removed in Chrome:

http://seox.org/test.html --> http://seox.org/lbp/lb-core.js

Why does the spacing work correctly in the first one, but not in the second? More importantly, how do I fix the second one so that it doesn't bug out?

I asked a variation of this question before, and got a helpful and interesting answer, but hopefully I've asked the question with full detail this time around. The previous question, which has an answer I have a hard time understanding, is located here: http://stackoverflow.com/questions/2954178/javascript-whitespace-characters-being-removed-in-chrome-but-not-firefox

Thanks in advance for your time!

---

Edit: I've added a bounty to this post, and would greatly appreciate precise instructions on how to fix the bug (rather than general suggestions.

To better illustrate the bug, I've copied the gray box (from the second page) below. Note how the spacing is removed before and after the a tags:

Link Building 2 is an amazing tool that helps your website visitors share your content, with proper attribution. It connects to email, social sharing sites, eCommerce sites, and is the<a href="http://seox.org/test.html#seo"&gt;SEO&lt;/a&gt;'s best friend. Think of it as the sneeze in the viral marketing metaphor.
<div>
  <p id="credit"><br />
    Read more about<a href="http://seox.org/test.html"&gt;Text Citations</a>by<a href="http://seox.org"&gt;seox.org&lt;/a&gt;&lt;/p&gt;
</div>

---

Second Update:

I was able to solve the bug by adding the following to the top of the function processSel():

    lbp.vrs.holder.style.position = "absolute";

I'll award the correct answer to whoever can give the best explanation of why this fixes the spacing issue in chrome.

Answer 1

On line 30 in your lb-core.js file. Try this:

lbp.defaults.credit = "<p id='credit'><br/>Read more about&nbsp;<a href='" + lbp.page.url + "'>" + lbp.page.randKeyword + "&nbsp;</a>&nbsp;by&nbsp;<a href='http://" + lbp.page.domain + "' />&nbsp;" + lbp.defaults.author + "&nbsp;</a></p>";

EDIT: I can't really explain why Chrome is treating it like that, but if you're asking what position:absolute; does, it removes that element from the block layout of the page, so that element is not taking up any "space" on the page. It is then positioned with the coordinates you specify to see where on the page it actually is placed. Why that would affect what you're seeing I really can't say. I think you may be dealing with a bug in the browser at this point? Maybe something with lbp.vrs.holderHider.style.left = "-9999px"; maybe the negative margin is an issue for some reason unless the element is removed from the block layou t with position:absolute

Answer 2

lbp.vrs.holder.style.position = "absolute";

Adding the above to the top of processSel() function fixed Chrome's weird spacing issues. It would seem that setting a position triggers some sort of "I'm on the page" awareness (or something). But get this, "relative" doesn't work!

---

Now that we've got the solution... does anyone want to try to explain why it works this way?

Answer 3

You have a typo on line 30.

... by <a href='http://" + lbp.page.domain + "' />" + lbp.defaults.author ...
                                                ^ (extra "/" before ">")

Answer 4

This is one of several spacing or possibly layout bugs currently open in Chrome.

http://code.google.com/p/chromium/issues/list?q=failing+layout+tests

http://code.google.com/p/chromium/issues/list?q=position+absolute