Adding a text marker to TD elements with CSS

[Clive Backham]

I need to set up forms where some input fields are mandatory and
others are optional. A common convention is to place an asterisk on
the labels of the mandatory fields. Of course, I can just hard code
these asterisks, but I'd have thought it would be better to use a CSS
element to control how a mandatory field should be marked. For example
(using a table to lay out the fields):

<tr><td class=mandatory>Label 1:</td><td><input ....></td></tr>
<tr><td class=optional>Label 2:</td><td><input ....></td></tr>

I cannot find out how to set up a CSS element so that a piece of text
is added to the content.

(I realise it can be done with the :BEFORE pseudo-element, but it
doesn't work in IE6, which is the primary browser amongst users of
this site).

Any suggestions gratefully received.

[Lars Eighner]

In our last episode,
<c5**********************************@2g2000hsn.go oglegroups.com>, the
lovely and talented Clive Backham broadcast on
comp.infosystems.www.authoring.html:

I need to set up forms where some input fields are mandatory and
others are optional. A common convention is to place an asterisk on
the labels of the mandatory fields. Of course, I can just hard code
these asterisks, but I'd have thought it would be better to use a CSS
element to control how a mandatory field should be marked. For example
(using a table to lay out the fields):

><tr><td class=mandatory>Label 1:</td><td><input ....></td></tr>
<tr><td class=optional>Label 2:</td><td><input ....></td></tr>

I cannot find out how to set up a CSS element so that a piece of text
is added to the content.

You cannot use CSS to add text to an element. You could use CSS to display
(or not) text that is already there:

<tr><td class=mandatory><span>*</span>Label 1:</td><td><input ....></td></tr>
<tr><td class=optional><span>*</span>Label 2:</td><td><input ....></td></tr>

..optional SPAN { display: none; }

In this case, you hide the asterisk for optional fields. But the asterisk
is in the text and will show in text browsers or when CSS is off.

There are also various tricks you can do with images, such as adding an
image with an asterisk as background to elements that are mandatory. This
too breaks more-or-less horribly in text browsing and requires special
attention if the page is to be printed successfully.

In both cases, CSS did not add text. In one case it hid text. In the other
it added a background image. CSS cannot alter the text.

(I realise it can be done with the :BEFORE pseudo-element, but it
doesn't work in IE6, which is the primary browser amongst users of
this site).

Any suggestions gratefully received.

--
Lars Eighner <http://larseighner.com/us****@larseighner.com
Love: The warm feeling you get towards someone who meets your neurotic needs.

[Harlan Messinger]

Lars Eighner wrote:

In both cases, CSS did not add text. In one case it hid text. In the other
it added a background image. CSS cannot alter the text.

Well, yes, it *can* add text, using the content property with the
:before and :after pseudoelements, as the OP pointed out--when that
feature is supported, which it isn't in IE6 or IE7.

[Harlan Messinger]

Clive Backham wrote:

I need to set up forms where some input fields are mandatory and
others are optional. A common convention is to place an asterisk on
the labels of the mandatory fields. Of course, I can just hard code
these asterisks, but I'd have thought it would be better to use a CSS
element to control how a mandatory field should be marked. For example
(using a table to lay out the fields):

<tr><td class=mandatory>Label 1:</td><td><input ....></td></tr>
<tr><td class=optional>Label 2:</td><td><input ....></td></tr>

I cannot find out how to set up a CSS element so that a piece of text
is added to the content.

(I realise it can be done with the :BEFORE pseudo-element, but it
doesn't work in IE6, which is the primary browser amongst users of
this site).

Yes, that *is* the way to do it in CSS and, yes, it doesn't work in IE,
so practically speaking you're out of luck.

However, given that your indicating whether a field is mandatory or not
is a significant piece of information, not just a stylistic detail, it
makes perfectly good sense to represent that information in the HTML and
not relegate it to the CSS.

[Clive Backham]

Thanks to all who have replied.

On 16 Sep, 13:32, Harlan Messinger <[e-mail]>
wrote:

However, given that your indicating whether a field is mandatory or not
is a significant piece of information, not just a stylistic detail, it
makes perfectly good sense to represent that information in the HTML and
not relegate it to the CSS.

I understand where you're coming from. My rationale in wanting to use
CSS was that if for some reason in the future I decide (or am asked)
to change the visual indicator from an asterisk to something else, it
would be a lot easier to edit one CSS element definition than change
the text in possibly dozens of HTML files. Or am I missing something?

[Adrienne Boswell]

Gazing into my crystal ball I observed Clive Backham
<go****@delback.co.ukwriting in news:2ba0367c-87a5-43c1-ac4f-
4f**********@k30g2000hse.googlegroups.com:

Thanks to all who have replied.

On 16 Sep, 13:32, Harlan Messinger <[e-mail]>
wrote:

>However, given that your indicating whether a field is mandatory or

not

>is a significant piece of information, not just a stylistic detail,

it

>makes perfectly good sense to represent that information in the HTML

and

>not relegate it to the CSS.

I understand where you're coming from. My rationale in wanting to use
CSS was that if for some reason in the future I decide (or am asked)
to change the visual indicator from an asterisk to something else, it
would be a lot easier to edit one CSS element definition than change
the text in possibly dozens of HTML files. Or am I missing something?

I usually do something like:
<label class="required" for="field" id="field1">Field *</label>

..required {font-weight:bold; color: red;}

Users with CSS enabled will get a bold red label, and users without will
still get the asterisk, or as my Puerto Rican friend used to say "Leetel
Star" (from Greek asteriskos, literally, little star, diminutive of
aster-, aster).

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

[Harlan Messinger]

Clive Backham wrote:

Thanks to all who have replied.

On 16 Sep, 13:32, Harlan Messinger <[e-mail]>
wrote:

>However, given that your indicating whether a field is mandatory or not
is a significant piece of information, not just a stylistic detail, it
makes perfectly good sense to represent that information in the HTML and
not relegate it to the CSS.

I understand where you're coming from. My rationale in wanting to use
CSS was that if for some reason in the future I decide (or am asked)
to change the visual indicator from an asterisk to something else, it
would be a lot easier to edit one CSS element definition than change
the text in possibly dozens of HTML files. Or am I missing something?

Use a server-side include. Or create a server-side variable to contain
the asterisk and insert the variable everywhere in server-side code. ASP
example:

dim reqMark
reqMark = "*"

...

E-mail address<%=reqMark%>: <input ...