Restart - Anti-Splog and registration page rendering with Internet Explorer 8

David asked me to restart this thread. Old thread was here:
https://premium.wpmudev.org/forums/topic/anti-splog-affecting-registration-page-rendering-with-internet-explorer-8

I enabled "Identify the Cats" and saw a problem with Internet Explorer 8 on the registration page.

The label "Human Verification" was near the top of the page and the cat images were directly under "Blog Details".

In Firefox, I explored the layout with Firebug. Even here, I noticed that the Cat images (though now joined with the label) were not where I expected them. They appeared above the Profile Details even though they were below that section in the HTML code shown by Firebug.

Another thing that was odd was finding multiple DIVs with the same id - is that legal?

Following the pattern that I saw, I came up with a quick hack in anti-splog.php to change the id
of the Cats DIV to "profile-details-section"

Change From:
} else if($ust_settings['signup_protect'] == 'asirra') {
echo '<div class="register-section" id="antisplog">';

To:
} else if($ust_settings['signup_protect'] == 'asirra') {
echo '<div class="register-section" id="profile-details-section">';

The rendering is now fine with both browsers.

So I'm wondering where the root problem lies here?

Thanks,

- Scott

  • DavidM
    • DEV MAN’s Mascot

    Hello Scott,

    Just wanted to be sure to get as much information as possible on this. Could you let me know what versions of WordPress and Anti-Splog you're using here?

    And I realize it may be beside the point but did you by any chance try it with other themes to see if the layout issues persisted?

    Cheers,
    David

  • BlueSkies
    • Site Builder, Child of Zeus

    Hi David,

    Just played with this some more again now. I'm using WordPress 3.1 and Anti-Splog 1.0.7 (on my local install).

    The problem is still there. I discovered that the problem isn't limited to "Pick the Cats" though.

    For Internet Explorer 8, all 3 verification methods rendered incorrectly (Pick the Cats, Recaptcha, and Admin Questions).

    For Firefox, the Admin Questions did not render correctly either. Pick the Cats and Recaptcha did render correctly on Firefox.

    For all cases where the rendering was not correct, the layout problem was the same - Label in upper right corner and verification input in lower left area under "Blog Details".

    I tried switching to the BuddyPress default theme (was Blogs MU). There was no change in the behaviour described above. Theme selection didn't affect anything.

    Scott

  • Shawn
    • The Crimson Coder

    It's because the div wrapping the antisplog registration valdiation fields (recaptcha, cats, questions and so on). has the wrong id. It needs to be id="blog-details-section", not id="antisplog". This one change fixes it.

  • BlueSkies
    • Site Builder, Child of Zeus

    Hi Shawn,

    That worked - thanks!

    I discovered another problem with IE8 though.

    IE8 doesn't like the following code:
    asirraError = document.getElementById("asirraError");

    Apparently the variable and id name are colliding in namespace.

    It can be fixed by changing the variable name:
    asirraErrorDiv = document.getElementById("asirraError");

    (and where the variable is used of course)

    David - could you ask the appropriate developer to review my fix and Shawn's?

    Thanks,

    Scott

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.