Padding och margin i formulär?

Jag sitter och håller på med ett inloggningsformulär men får inte riktigt till det, det är min designade submit-knapp så sätter käppar i hjulen för mig.

http://www.quid.dk/mail/

<TABLE ALIGN="center" BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="420">
	<TR>
		<TD WIDTH="180">
			<IMG SRC="mail.png" WIDTH="170" HEIGHT="130" BORDER="0"><BR>

		</TD>
		<TD WIDTH="240">
			<FORM NAME="webbmail" ACTION="" TARGET="_top" METHOD="post" STYLE="margin: 0px 0px 0px 0px;">
			<FONT FACE="Arial" STYLE="font-family: Verdana; font-size: 18px; font-weight: bold;">&nbsp;Mailadress:</FONT><BR>
			<DIV STYLE="background: url(username.png) no-repeat left top; padding:4px 8px 4px 8px;"><INPUT TYPE="text" NAME="User" STYLE="background:transparent; border: 1px solid #0000FF; width: 200px; font-family: Arial; font-size: 17px;"></DIV>
			<FONT FACE="Arial" STYLE="font-family: Verdana; font-size: 18px; font-weight: bold;">&nbsp;Lösenord:</FONT><BR>
			<DIV STYLE="background: url(password.png) no-repeat left top; padding:0px 8px 4px 8px;"><INPUT TYPE="password" NAME="Password" STYLE="background:transparent; border: 1px solid #0000FF; width: 182px; font-family: Arial; font-size: 17px;"><INPUT TYPE="image" VALUE="Logga in" SRC="submit.png" STYLE="width: 30px; height: 27px; margin: 0px 0px 0px 0px;"></DIV>
			</FORM>

		</TD>
	</TR>
</TABLE>

Som ni ser så kommer text-input för password längre ner än den för mailadress (då blå boxarna är bara till för att visa, dom ska bort sen), kan något förklara varför och kanske t.o.m. komma med en lösning?

Usch, tabeller, stora bokstäver på dina element (font element?), trodde faktiskt att du hade gått ifrån tabeller Quid;)

<style>
#loginForm {
	overflow: hidden;
	background: #000;
	padding: 20px;
}
#loginForm label {
	display: block;
	font-family: Verdana;
	font-size: 18px;
	font-weight: bold;
	color: #fff
}
#loginForm .input, #loginForm .password {
	background: url(input-email.png) no-repeat left top; border: 0;
	width: 220px;
	height: 27px;
	padding:4px 8px 4px 8px;
}

#loginForm .password { float: left; width: 189px}

</style>

<form id="loginForm">
	<label for="username">Mailadress:</label>
	<input type="text" class="input" name="username" id="username" />
	
	<label for="password">Lösenord:</label>
	<input type="password" class="password" name="password" id="password" />
	<input type="image" value="logga in" src="submit.png" />
</form>

?

bytte namn på din png för "username" eftersom password också kör mer eller mindre samma bild (bara inte hela bilden) så kör jag det som input.png istället för username.png

voigtann1 skrev:

Usch, tabeller, stora bokstäver på dina element (font element?), trodde faktiskt att du hade gått ifrån tabeller Quid;

Tyvärr tillhör jag ju den gamla skolan och håller egentligen inte på med sånt här, det är ju på baksidan som jag jobbar normalt med driften och underhåll av servrarna och annan hårdvara.
Men ibland måste även sånt här göras och då får man ju ta till dom kunskaperna man har och försöka göra det bästa av situationen :)

Jag vill lära mig hur man skiver webbsidor idag, men tiden räcker inte riktigt till...

voigtann1 skrev:

<style>
#loginForm {
	overflow: hidden;
	background: #000;
	padding: 20px;
}
#loginForm label {
	display: block;
	font-family: Verdana;
	font-size: 18px;
	font-weight: bold;
	color: #fff
}
#loginForm .input, #loginForm .password {
	background: url(input-email.png) no-repeat left top; border: 0;
	width: 220px;
	height: 27px;
	padding:4px 8px 4px 8px;
}

#loginForm .password { float: left; width: 189px}

</style>

<form id="loginForm">
	<label for="username">Mailadress:</label>
	<input type="text" class="input" name="username" id="username" />
	
	<label for="password">Lösenord:</label>
	<input type="password" class="password" name="password" id="password" />
	<input type="image" value="logga in" src="submit.png" />
</form>

?

bytte namn på din png för "username" eftersom password också kör mer eller mindre samma bild (bara inte hela bilden) så kör jag det som input.png istället för username.png

Lysande, tack för hjälpen! Nu ska vi se om jag kan få in det på sidan också :)