Error message first appears at the top left then at center

Question

i am using a label for showing error messages

<div id="errorMessage">
            <asp:Label ID="lblError" runat="server" BorderStyle="Solid" Text="" Visible="false"></asp:Label>
        </div>

in the server side whenever i am showing error message

Page.ClientScript.RegisterStartupScript(this.GetType(), "errorMesssage", "showError();", true);
                        lblError.Text = "Some error message.";
                        lblError.CssClass = "errorStatus";
                        lblError.Visible = true;

this showError() is a function defined in external javascript

function showError()
    {
        $('.errorStatus').css({
        'margin-left': ($(window).width() - $('.errorStatus').width()) / 2 + 'px',
        'top': '0px'})
        .fadeIn(1000);
    }

the css

.errorStatus
{
    back-ground-color: red;
    border-left: 5px solid #FC5;
    border-right: 5px solid #FC5;
    color: #FFF;
    display: none;
    font-size: 12px;
    letter-spacing: 0.084em;
    padding: 7px 20px 8px;
    position: fixed;
    text-transform: uppercase;
    text-align: center;
    top: 10px;
    word-spacing: 1px;
    z-index: 2000;
}

Answer 1

If I understand you correctly: the error label is appearing in the top left before jumping to it's correct position in the center?

To fix this you can add the following property to your errorStatus CSS

display:none;

This will prevent the browser from displaying the error message until the jQuery fadeIn() brings it in

Also you have a typo in your CSS back-ground-image should be background-image there's no dash in background.