Question

I’m using CSS to absolutely position small elements from within paragraphs off to the side of said paragraphs. No issues there.

I’m then looking to use javascript to, among other things, insert a linked superscript digit before the small element.

Basically, changing this:

<p>
    <small> ... </small>
</p>

to this:

<p>
    <sup>
        <a href="#article1_note1">1</a>
    </sup>
    <small class="note" id="article1_note1"> ... </small>
</p>

This is where the layout breaks in IE8 or earlier. (It may, for all I know, break in IE9 as well, but I only have XP boxes available for testing.)

Process of elimination suggests that the a tag is the ultimate culprit. These browsers seem like they’re treating it as a block level element. Adding a display: inline to the style rules didn’t seem to fix this.

The odd thing is that, if I take the generated source and save it as a static HTML document, it displays just fine in those same browsers.

As far as I can tell, then, the issue is caused by the anchor tag’s dynamic insertion via JS/JQuery.

Here’s a jsFiddle test page I’ve created:

http://jsfiddle.net/D6SMH/show/

Here’s a version with the script removed and the HTML replaced by the generated HTML of the latter:

http://jsfiddle.net/VJT2N/show/

Both display identically in Firefox, Chrome and Safari. Only the latter, hard-coded version displays properly in the IE offenders.

Answer 1

You need to properly close your html tags in jQuery.

notes.eq(j).before('<sup><a href="#' + noteid + '">' + (j+1) + '</a></sup>');

http://jsfiddle.net/D6SMH/2/