Why Won't My Text Boxes Center?

[cjy8s]

So I have two text boxes on one page, which I am using as log-in boxes. In google chrome the boxes are centered, but in firefox they are not; they sit just to the right of the background image (small white box with rounded corners) that i have centered. I want the text boxes to be centered on top of the background image, can someone help me with this? here is some of my CSS and HTML coding:

.loginboxdiv {	/*for the white background image box*/	margin-left:auto;	margin-right:auto;	height: 21px;	width: 146px;	background: url(Buttons/login_bg.gif) no-repeat bottom;	text-align: center;	}.loginbox {	/*the actual text box*/	background: none;	border: none;	position: absolute;	background: none;	width: 134px;	height: 15px;	margin-top: 3px;	margin-left: 6px;	padding: 2px 7px 0px 7px;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	text-align: center;	z-index: 1;	}

<!-- login text boxes --><h4>Username</h4><div class="loginboxdiv">  <input class="loginbox" name="username" type="text"/></div><h4>Password</h4><div class="loginboxdiv">  <input class="loginbox" name="password" type="password"/></div>

[Shonumi]

The CSS just needs some adjustments.

.loginboxdiv {	/*for the white background image box*/	margin-left:auto;	margin-right:auto;	/* You can combine margin-left and -right to be just "margin: auto;" if you want to, it works out to be the same thing. */	height: 21px;	width: 146px;	background: url(Buttons/login_bg.gif) no-repeat bottom;	text-align: center;	}.loginbox {	/*the actual text box*/	/*You had an extra "background:none;" right here */	border: none;	/*Get rid of this line "position: absolute;" that's conflicting with what you want to achieve */	background: none;	width: 134px;	height: 15px;	margin-top: 3px;	/*Since you set the div loginboxdiv to "text-align: center;" the input will be centered. You don't need to have a "margin-left: 6px" here */	padding: 2px 7px 0px 7px;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	text-align: center;	/*I don't know what you're doing with the images, but it works fine for me without using a z-index */	}

Hope this helps you out. It works in FF for me, I don't have Chrome or any WebKit browser to make sure it properly renders as you want it, but take a look at the CSS above.