I'm in an early stage of redesigning a website and have come across a very annoying problem.
The following JS snippet is necessary to show/hide an arrow to navigate across the page:
.insertBefore('ul#gallery > li:even a');
var galleryeven = $('ul#gallery > li:even:not(:last) div');
var galleryodd = $('ul#gallery > li:odd');
var galleryimg = $('ul#gallery > li > a > img');
Unfortunately it also generates an empty div <div></div> before every <a href. It's clearly visible using Firebug. Without that particular piece of code the page is working perfectly fine too, but I want the arrows to show up on mouseover.
Test page is now here.
To overcome another quirk with automatic inserted code I put the first 2 text blocks into *yikes* tables. The tabled blocks no longer break in Firefox 3.6.3 (Mac), but still do in Safari 4.0.4.
The problem though is, is that there's should not be an empty <div> popping up before a hyperlink in the text.
Obviously the empty div is there for a reason, evidenced by the fact that it stops working when it's removed. Without seeing it, I would presume it's as a holder for the image. If you want the image, keep the div.
Great wit and madness are near allied, and fine a line their bounds divide.