CSS:
input
{
	border: 1px #000 solid;
	background-color: #fff;
}

input.loginnick
{
background:url('images/login_nickname.jpg') no-repeat left top;
border: 1px #000 solid;
}
.loginpwd{
background: url('images/login_password.jpg');
background-repeat:no-repeat;
width: 112px;	
height: 15px;
border: 1px #000 solid;
}

PHP:
					echo '
					<form action="' . $_SERVER['PHP_SELF'] . '" method="POST" >
							user:<br><input type="text" name="nick" class="loginnick" ><br>
							pw:<br><input type="password" name="wachtwoord" class="loginpwd" ><br><br>
							
						<td valign="top"><input type="image" src="images/buttonlogin.gif"> <a href="index.php?cup=register" target="_self"><img src="images/buttonregister.gif" style="border:1px solid black"></a>
					</form>
					';


Nu vraag ik mij af waarom hij niks laat zien in de input van user en pw.
Volgens mij zou hij het gewoon moeten doen maar blijkbaar doe ik iets verkeerds.
1. IE 6 kent de naam waarden voor background-position niet, gebruik of px of %.
2. Je kan niet eerst een shorthand background gebruiken en daarna weer een background-repeat, dan overschrijf je de eerdere shorthand.
3. Hoogte nooit plaatsen op een input type text of password. Daar willen ze nog wel eens raar van gaan doen. Gebruik hiervoor font-size en padding.
4. Al gevalideerd?

Edit: Foutje. n_n
.loginpwd{
background: url('images/login_password.jpg') no-repeat;
width: 112px;	
border: 1px #000 solid;
}

als CSS dus, php code is correct?

This document was Tentatively checked as HTML 4.01 Transitional
Als je formulier gewoon word geplaatst dmv je echo, en dan worden je backgrounds niet getoond, dan is dit niet de schuld van je php.

Ik denk dat je nog even de links van je plaatjes en je stylesheet na moet gaan. ;)
Mitchell schreef op 06.12.2008 03:06
Als je formulier gewoon word geplaatst dmv je echo, en dan worden je backgrounds niet getoond, dan is dit niet de schuld van je php.

Ik denk dat je nog even de links van je plaatjes en je stylesheet na moet gaan. ;)

jpg veranderd naar .gif nu

map/images/login_nickname.gif
map/images/login_password.gif
map/index.php
map/style.css

dan zou hij toch moeten werken ?

css:
.loginpwd{
background: url('images/login_password.gif') no-repeat;
width: 112px;	
border: 1px #000 solid;
}


Mitchell schreef op 06.12.2008 02:40
1. IE 6 kent de naam waarden voor background-position niet, gebruik of px of %.

IE6 kent dat wel.
Het ligt in elk geval aan je locatie, ik ben even zo vrij geweest te testen met precies jou code, alleen met m'n eigen afbeeldingen op een eigen locatie. Het werkt bij mij prima en ik krijg gewoon de afbeeldingen te zien.

Dus je moet toch eens met je locatie gaan spelen. (misschien /images/login_password.gif)

Heb je misschien ook een online voorbeeld?


Mitchell schreef op 06.12.2008 02:40
1. IE 6 kent de naam waarden voor background-position niet, gebruik of px of %.
2. Je kan niet eerst een shorthand background gebruiken en daarna weer een background-repeat, dan overschrijf je de eerdere shorthand.
3. Hoogte nooit plaatsen op een input type text of password. Daar willen ze nog wel eens raar van gaan doen. Gebruik hiervoor font-size en padding.
4. Al gevalideerd?

Edit: Foutje. n_n

1. Deze kent IE6 wel, je kan ze ook in IE6 gewoon gebruiken.
2. Dat kan wel, maar de laatste declaratie geldt.
3. Ook hoogte kan prima, maar je moet wel weten wat je doet. Met een height kan je prima (en cross browser) gaan werken. Wel is het mooier om met padding te werken.
4. De css is in elk geval valide, het werkt ook op deze manier, dus dat is het niet. Het moet de locatie zijn.
Fixed, had een domme fout gemaakt
Niek schreef op 06.12.2008 12:04
[quote='Mitchell schreef op 06.12.2008 02:40']1. IE 6 kent de naam waarden voor background-position niet, gebruik of px of %.

IE6 kent dat wel.[/quote] Probeer maar een center center te gebruiken in een shorthand, had ik pas geleden nog geprobeerd, werkte niet. Wat wel werkte was 50% 50%.
Nu heb ik een probleem dat je buiten het plaatje verder kan typen in IE.
code:
<input width="80" type="text" name="nick" class="loginnick" size="8">

input.loginnick
{
background:url('images/login_nickname.gif') no-repeat;
width: 90px;
height:15px;
border: 0px #000 solid;
padding-left: 20px;
background-position: left center;
}



input.loginnick
{
background:url('images/login_nickname.gif') no-repeat;
width: 90px;
height:15px;
border: 0px #000 solid;
padding-left: 20px;
background-position: left center;
overflow: hidden;
}

??

Reageren