Lectora inserts anchors (<A name=""> elements) which sometimes can break things!

I have programmed exercises with a sliding animation from "page" to "page" of exercises using the Scrollable from JQuery Tools. It would work fine in an older FireFox, but broke apparently in the newest version, it newer worked in Chrome, but it works in IE. The exercises would jump to the last page, skipping over everything in between.

After one hour of debugging I found out that an additional <A></A> element had to be inserted in each "page" of the exercises. (I do it programmaticaly using PHP.) Now all items show up … with an additional item (depending on the browser).

This additional item is an anchor inserted by Lectora. There's no use putting code to take it out again to run on page load, as Lectora's code seems to run later. You have to run your code as soon, as the user triggers an action, just at the beginning of it to clean up.

//fixing Lectora interfering with our code …
$("#exercise > .items > a").remove();

A simple fix for a complex problem … Lectora does require a lot of workarounds.

Internet Explorer's refusing to work with the tabs – that is, the first two tabs work then everything breaks. Firefoxy and Opera do what I intend them to do. Have I mentioned that cross-browser developing can be a burden?

It turns out, that Internet Explorer has a problem with the <FORM> not wrapping around everything, but being split up between DIVs.

This does not work with Internet Explorer:

<div class="panes">
<DIV>
<form action="/" method="post">
…
</DIV>
<DIV>
…
</DIV>
<DIV>
</form>
</DIV>
</DIV><!–closing the panes–>

This works:

<form action="/" method="post">
<div class="panes">
<DIV>
…
</DIV>
<DIV>
…
</DIV>
<DIV>
</DIV>
</DIV><!–closing the panes–>
</form><!–form wraps around the panes –>