newbie: adding * to the tail of a input field

[Jeff]

Hey

I want to add this char "*" to the end of a input field. The reason I want
this * is to tell users that the input field is required to have a value.

I tryed using this traditional approach:
<td style="width:60%; background-color:#003399;">
<input type="text" name="username" id="username" />*
</td>
But the * get on a new line under the input field!

I very much want to avoid creating another table cell to hold the * because
the input field isn't as wide as it's table cell. It can give the impression
that the * isn't related to input field (or at least that is how I think).

I can't use the css hatch :after because from what I understand Microsoft IE
don't support it...

The only option I see I could use to solve this is by pushing this * the
backgrund of the input field
<input type="text" name="username" id="username" style="background:#FFFFFF
'*' no-repeat right;" />

But I have just tried "<input type="text" name="username" id="username"
style="background:#FFFFFF '*' no-repeat right;" />" and it doesn't work...
either I'm using the wrong syntax or the wrong approach... Please, I hope
some body here could give me some tips on how to solve this problem

Jeff

 

[Harlan Messinger]

Hey

I want to add this char "*" to the end of a input field. The reason I want
this * is to tell users that the input field is required to have a value.

I tryed using this traditional approach:
<td style="width:60%; background-color:#003399;">
<input type="text" name="username" id="username" />*
</td>
But the * get on a new line under the input field!

CSS for the TD: white-space: nowrap;

 

[Jeff]

CSS for the TD: white-space: nowrap;

Strange, but white-space: nowrap; doesn't help

<td style="width:60%; white-space:nowrap; background-color:#006699;">
<input type="text" name="username" id="username" />*
</td>

I tested this in both IE7 and Opera 9.10. And I get the same result in both
browsers:
Within the table cell the * is placed on a newline under the input field.
Looks like white-space:nowrap; didn't have any effect.

Any suggestions?

 

[jorrit787]

Have you tried putting a space between the input field and the * ?

 

[Jeff]

Have you tried putting a space between the input field and the * ?

Yes, but it didn't have any effect

 

[jorrit787]

How about attaching it to the input with a space like so:

<td style="width:60%;white-space:nowrap;background-color:#006699;">
<input type="text" name="username" id="username" /> *
</td>

 

[Beauregard T. Shagnasty]

Strange, but white-space: nowrap; doesn't help

<td style="width:60%; white-space:nowrap; background-color:#006699;">
<input type="text" name="username" id="username" />*
</td>

I tested this in both IE7 and Opera 9.10. And I get the same result in
both browsers:
Within the table cell the * is placed on a newline under the input
field. Looks like white-space:nowrap; didn't have any effect.

Your code above works as expected for me. I added a <table> and <tr>
around it, and see the asterisk just next to the input field in Firefox
1.5.0.9, Opera 9.02 and 9.10, and IE6. Win2K.

What else do you have on the page you're not showing us?

 

[Jonathan N. Little]

Yes, but it didn't have any effect

Do you have INPUT { display: block; } in your stylesheet? Who knows,
since you did not supply a URL. Most likely the problem is in what you
have not shown us.

 

[Jeff]

Do you have INPUT { display: block; } in your stylesheet? Who knows, since
you did not supply a URL. Most likely the problem is in what you have not
shown us.

Hey

Thanks for the tip, I did have { display: block; } on the input field....
the problem is solved now

Thank you all

 

[John Hosking]

Thanks for the tip, I did have { display: block; } on the input field....
the problem is solved now

Congratulations. Next time provide an URL in your OP and save us all
some time.

 

[Jonathan N. Little]

Hey

Thanks for the tip, I did have { display: block; } on the input field....
the problem is solved now

Thank you all

My crystal ball was working I guess. Much easier with a URL.

 

[Toby Inkster]

Uselss waste of four bytes, no?