Styling my Login form using CSS...

[MikeTheVike]

I have a simple form for a website login...here is the basic code cut from my website...

<div id="container">	<div id="header">		<form id="login" name="login" method="post" action"#">			<label class="formlabel">Username:			<input type="text" class="forminputbox" name="username" size="10" tabindex="1" />			</label>			<label class="formlabel">Password:			<input type="text" class="forminputbox" name="password" size="10" tabindex="2" />			</label>			<input type="submit" class="submitbut" name"submitbut" value="LOG IN" tabindex="3" />		</form>	</div></div>

#container {	width: 600px;	height: 500px;	background-color: #999999;}#header {	float: left;	width: 600px;	height: 100px;	background-color: #FFFF99;}#login {	float: right;	width: 350px;	margin-top: 0px;}.formlabel {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	margin-left: 3px;}.forminputbox {	height: 11px;	font-size: 10px;	}.submitbut {		}

One problem I'm having is that I want to use an image as the submit button. The only way I have found that will display the button image properly and retain its button properties is using this code...

<input type="image" src="submit.gif" class="submitbut" name"submitbut"  tabindex="3" />

Putting the image link in the html rather than the css file goes against everything CSS is trying to do, am i right? Is there a way to do it through CSS that works in all browsers? setting it as a background image in the input class won't work in some browsers. Another problem using the input code above is that I can't get the button image to center itself vertically to match the rest of the label text and input boxes.Is it ok the lay it out like this using divs instead of the label tag?

<div id="headercontainer">		  <div id="logincontainer">			   <form class="loginform">					<div class="formlabel">username:</div>					<div class="forminputbox"><input type="text" /></div>					<div class="formlabel">password:</div>					<div class="forminputbox"><input type="text" /></div>					<div class="submitbut"><input type="submit" /></div>			   </form>		  </div></div>

Thanks for any help!

[pulpfiction]

try this...http://www.ampsoft.net/webdesign-l/image-button.html

[ste]

Is it ok the lay it out like this using divs instead of the label tag?

it would be better & more semantically correct to use label. are you trying to conform to WAI guidelines?

[PrateekSaxena]

Use label so that even if someone clicks on the word "Name" the focus would be given to the textbox

[S@m]

Use this.http://www.websiteoptimization.com/speed/tweak/forms/