Thread: IE8 centering vertically and horizontally

Hi

I have a page that doesn't seem to be rendering in IE8, I have found out now that it's due to how it's being centred...

my html:

Code:

<form id="form1" runat="server">
        <div class="login_form">
            <div style="padding-bottom:20px;">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/images/verfin-logo.jpg" AlternateText="Verfin Logo" />
            </div>
            <div id="left">
                <asp:Image ID="security" runat="server" ImageUrl="images/security.png" AlternateText="Security Image" />
                <p>Welcome to VF-Finance Application</p>
				<p>Use a valid username and password to gain access</p>
            </div>
            
            <div id="right">
                <asp:Image ID="Login" runat="server" ImageUrl="images/login.gif" AlternateText="Login Image" />
                <div id="login_form_inputs">
                    Username
                    <asp:TextBox ID="usrname" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="usrname" ErrorMessage="Please fill in your username"></asp:RequiredFieldValidator>
                
                    Password
                    <asp:TextBox ID="psswrd" runat="server" TextMode="Password"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="psswrd" ErrorMessage="Please fill in your password"></asp:RequiredFieldValidator>
                    <br />
                    <asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="button" />
                </div>
            </div>
            <div class="clr" />
        </div>
    </form>

my css:

Code:

/* ============================== BODY ============================== */
	html,body {
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		padding:0px;
		background-color:#FFFFFF;
		font-family:Arial, Helvetica,  sans-serif;
		width:100%;
		height:100%;
	}



/* ============================== LOGIN ============================== */
.login_form{
		text-align:left;
		padding:20px;
		background-color:#F1F3F5;
		border:1px solid #CCCCCC;
		margin:0 auto;
		
		width:620px;
		height:300px;
		position: absolute;
	    left: 50%;
	    top: 50%;
	    margin-left: -310px;
	    margin-top: -150px;
	}

any ideas?

it works in everything except for IE8...

Didn't work...

here's my full css:

Code:

/* ============================== BODY ============================== */
	html,body {
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		padding:0px;
		background-color:#FFFFFF;
		font-family:Arial, Helvetica,  sans-serif;
		width:100%;
		height:100%;
	}



/* ============================== LOGIN ============================== */
.login_form{
		text-align:left;
		padding:20px;
		background-color:#F1F3F5;
		border:1px solid #CCCCCC;
		margin:0 auto;
		
		width:620px;
		height:300px;
		position: relative;
	    
	    top:40%;
        margin-top:-150px;
        position:relative;
        margin-left: auto;
        margin-right:auto;

	}
	
.button 
    {
		background:#E9ECEF none repeat scroll 0%;
		border:1px solid #CCCCCC;
		color:#666666;
		font-size:11px;
		font-weight:bold;
		padding:4px;
	}
	
#login_form_inputs{
		padding:20px;
		background-color:#E9ECEF;
		border:1px solid #CCCCCC;
	}

#left 
    {
        float:left;
        width:300px;
    }
    
#right 
    {
        float:left;
        width:300px;
    }



/* ============================== MISC ============================== */
	.ctr {
		text-align:center;
	}
	
	.clr {
		clear:both;
	}

also uploaded a pic of how it looks now

removed it, no change...

for interest sake RR, save as html page, with my css and html and see if it sits funny on your side?

gonna do the same with your code and see if it sits funny my side...