Scripsit Zhang Weiwu:
.required-question p:after {
content: "*";
}
That's questionable (pun intended), because the usual CSS Caveats (see
http://www.cs.tut.fi/~jkorpela/css-caveats.html ) apply particularly
strongly: generated content is not supported by IE at all. You should
not _rely_ on CSS as regards to conveying essential information, such as
whether an answer is required or optional. Using CSS to give additional
hints, such as visible color in addition to textual note, is quite OK of
course.
<div class="required-question"><p>Question Text</p><input /></div>
More logically, the question text or its last part should be marked up
as <labelfor the <inputand it should not be a paragraph. Arguably,
the question and the input field together might be construed as a
paragraph. This is relevant since it affects the default (non-CSS)
rendering; moreover, it is easier to start styling when the default
rendering is closer to the desired one and you don't have e.g. default
vertical spacing to kill. (We don't want a field to be separated from
the question by an empty line.) I would use
<p class="required-question"><label for="q42">Question
Text</label><input id="q42" ...></p>
(or maybe with <divinstead of <p>).
The intention is: if a field is required, the <pin it should have a
"*" appended to it. This doesn't work on Firefox 2.
Works for me on Firefox 2.0.0.14. With the markup I suggested, the CSS
code would have "label" instead of "p", i.e.
..required-question label:after {
content: "*";
}
and that works, too.
You may have made some mistake elsewhere on the page, but in the absence
of a URL, it cannot be analyzed.
The best solution would be to move class="required-question" to <p>
but that would require change to Javascript which was not very
practical due to a lot of reasons.
If that is so, then you may well have a robustness problem with
JavaScript, too. How does the page work when JavaScript is disabled?
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/