Required Field Indicator not working in IE7 and IE6

I'm using CakePHP's field validation and the standard CSS based 'required field' indicator (red asterisk) and it all works just peachy for all browsers except (of course) IE7 and IE6.

I seems they don't like the CSS that constructs the indicator. I found a blog post by Mark Story (here http://mark-story.com/posts/view/hacking-the-cakephp-formhelper-adding-required-indicators) from 2008 that suggests hacking the Cake code to display it correctly. This having been more than 2 years ago, I would hope that a better solution has been created for this or that it had been addressed somehow in the newer versions of Cake released by then. IT's such a standard thing I can't imagine it hasn't been开发者_JAVA技巧 addressed.

I'm not finding anything obvious here at StackOverflow or from Google searches at large. Am I just being dense and missing something obvious? Is there a standard/easy way to do this or is an image based fix (as suggested by one of the commenters of the above mentioned post) the way to go?

you could just make the field bold or something like that

I ended up using the solution from an anonymous poster on Mark Story's blog. Just add this extra CSS definition right after the form .required label:after definition in your site.css file. (Around line 363 in CakePHP's default site.css file.)

div.required label {
  stupid-ie-be-more-funny: expression(this.doneReq ? '1' : (
      function(el) {el.innerHTML += '<span title="Required!" style="color:#f00;"> *</span>'; return el.doneReq=true;})(this));
}

This is working well in IE 6 and 7 for me. I still like the red asterisks because they visually stand out more, expecially with the demographic I'm targeting (older users).

The simple fact is that IE6 and IE7 do not support the CSS :before and :after pseudo-classes.

There is no way around this, and no hacks that I'm aware of to make them support it.

My preferred solution to this is to ignore it. Make them bold (as someone else has suggested) so that IE6 users get to see something, but frankly IE6 and IE7 are a small part of the browser market and rapidly getting smaller.

If you must give them an askerisk, then the best work around I can suggest is to replace it with an image instead of a '*'. Set your image as the background-image of the label, align it to one side with x-repeat:none;, and padding on the same side to move the label text out of the way, so the background image can be seen.

This method is often used for bullet points, so should work well for a 'required' marker. But I'd rather just stick with what you've got and pretend that IE6 and IE7 don't exist. It's not like they'll miss it or anything.