input customization

[almightyegg]

i have a form:

<form method="POST" action="welcome.php">

<b>Name:</b><br />

<input type="text" id="1" name="name"  /><br />

<b>Email:</b><br />

<input type="text" id="1" name="email" /><br />

<input type="submit" value="Login">

</form>

 

and css to deal with it:

#1 {

border:solid 0 #fff;

margin:3px;

height:20px;

width:200px;

background: transparent

url("images/textfield_bg.gif") no-repeat; }

INPUT {

border:solid 0 #fff;

margin:3px;

height:20px;

width:80px;

background: transparent

url("images/textfield_bg2.gif") no-repeat; }

 

In IE it works fine but in FF it shows images/textfield_bg2.gif for all inputs...even though i said 'id="1"' in the text inputs! How do I solve this?

 

If you want to know more about what's wrong click here

[ToonMariner]

id must be unique for any element on a page - once it has been used it can't be used again. If you are using this to style the input then alter it to a class.

[almightyegg]

right I've done that but it still doesn't work in firefox

html

<form method="POST" action="welcome.php">
<b>Name:</b><br />
<input class="1" type="text" name="name"  /><br />
<b>Email:</b><br />
<input class="1" type="text" name="email" /><br />
<input class="2" type="submit" value="Login">
</form>

 

css

.1 {
border:solid 0px #fff;
margin:3px;
height:20px;
width:200px;
background: transparent url("images/textfield_bg.gif") no-repeat; }
.2 {
border:solid 0px #fff;
margin:3px;
height:20px;
width:80px;
background: transparent url("images/textfield_bg2.gif") no-repeat; }

[miligraf]

Im not an expert in CSS but i would rather use "first" and "second" instead of the numbers, try that and see if it works and if it doesnt try cleaning FireFox history (Control + Shift + Delete).

[almightyegg]

thanks! Yes it worked. I won't use numbers in then future.