为什么相同的代码在不同的页面上显示不同？

Question

Hi have a small entry form that is jquery driven. It works fine on 90% of the pages, but on two pages, the Submit button is out of alignment. I have checked the html and the jquery on working and non-working pages and can't see the difference. I would appreciate another set of eyes taking a look to see what is causing the Submit button to be so far off.

Here is a working page (scroll to the bottom to the newsletter signup form): view page

Here is page where it doesn't work correctly: view page

Here is the html for the form:

<div id="news-signup">
      <div id="entry">
          <input type="text" id="your-email" name="your-email" value="YOUR EMAIL ADDRESS" onfocus="if (this.value=='YOUR EMAIL ADDRESS') this.value='';" />
          <input type="submit"  value="::Submit Query::" id="red-submit" />
      </div>
    </div>

Here is the jquery that does the swap out:

$(document).ready(function() {
    var emailInput = $("#your-email");

    emailInput.focus(function() {
        //  THREE = !
        if(this.value === "YOUR EMAIL ADDRESS") {
            this.value = "";
        }
    });

    emailInput.blur(function() {
        if(this.value === "") {
            this.value = "YOUR EMAIL ADDRESS";
        }
    });

    $("#red-submit").click(function() {
        $.ajax({
            type: 'POST',
            url: 'news.php',
            data: {
                'your-email': emailInput.val()
            },
            success: function() {
                var image = $('<img />').attr({src:'_images/register-thanks.png', width:332, height:35, alt:"Success"});
                $('#news-signup input').hide();
                $('#news-signup').append(image);                
            }
        });
    });
});

Here is the CSS for positioning:

#news-signup #entry,
#news-signup form                   { 
        width:335px; 
        height:35px;  
        position: absolute;
        top: 52px;
        left: 590px;
        }


#news-signup input#your-email       { 
        width: 195px;
        height: 20px;
        position: relative; 
        top: 5px; 
        left: 0; 
        -moz-border-radius: 5px; 
        -webkit-border-radius: 5px;
        border: 1px solid #cbcbcb; 
        font: 14px "Trebuchet MS", Helvetica, sans-serif;
        color: #cbcbcb; 
        }   
#news-signup img                    { position: absolute; top: 50px; left: 600px; }                                                                 

input#red-submit                    {
            width: 90px;
            height: 30px;
            border-style: none;
            text-indent: -9999px; 
            position: relative;
        top: -20px;
        left: 250px; 
        cursor: pointer;
        font-size: 0;
        line-height: 0;
        background-color: transparent;
        background-image: url(../_images/btn_submit-red.png); 
        }

Thanks for the help!

Answer 1

I compared what CSS styles are applied to each element using firebug, and there is no differences between the pages. Then I tried to elliminate errors in the rest of the code by removing the content piece by piece, and it doesn't make any difference either. With that elliminated there is only the code in the form itself left.

There is some error in the HTML code itself in the form, perhaps an invisible control character. When I take the code for the form from the page where it works and paste it in the page of the non-working form, it works.