Update:
I have discovered a problem with this method (and the original method as well) when your page contains password input types. The problem is here:

Internet Explorer apparently will not include the value attribute of an input with type=”password” when it gets document.body.innerHTML. Thus, if you have a password field on your form and it has a value, the value will get lost when you write back to document.body.innerHTML. Therefore, don’t use this method on forms where you will have password fields with values.

Internet Explorer for Windows (prior to the upcoming Internet Explorer 7) does not support the <abbr> element. This article provides an alternate solution based on the one documented in the article “Styling <abbr> in IE” by Marek Prokop. That solution involves using JavaScript to insert a <span> element inside the <abbr> element. For most situations, this works pretty well.

I recently stumbled upon a case where this did not work well. I had a form with some required fields that needed to be marked up such that it was obvious the fields were required. For many people, this means including a colored asterisk somewhere in the form label. I decided to use the <abbr> element because the asterisk is really a kind of abbreviation for “Required field”. The full HTML example was similar to this:

<label for="cssClassName" class="required">
<abbr title="Cascading Style Sheets">CSS</abbr> Class Name:
<abbr class="marker" title="Required field">*</abbr>
<input id="cssClassName"/>
</label>

I decided that I wanted to put the “required” class on the label (so I could change the presentation of the entire label if I so desired). And since I only wanted to target my asterisk to make it red, I want it to have it’s own class. I could have potentially wrapped it in another element (like a span), but why add more non-semantic markup?

As you can see from the example, there is another <abbr> within the label. I obviously don’t want to make that red, since it has nothing to do with the field being required.

Unfortunately, the existing method does not account for the <abbr> already having a class attribute. The existing method takes the attributes (like the title) currently assigned to the <abbr>, and copies them to a span element withint the abbr, which gets assigned the class of “abbr” so that it can be targeted in style sheets like this:

abbr, acronym, span.abbr { … }

But since my abbr already has a class attribute, the span ends up with two separate class attribute definitions:


span class=marker class="abbr"


Solution:
Rather than inserting a span inside the abbr for IE and giving it a class of “abbr”, why not just replace abbr with acronym for IE only? IE already recognizes acronym, and then we need not worry about appending a class name of “abbr” to the element. Thus the new method would look like this:

<!--[if lt IE 7]>
<script type="text/javascript">
function styleAbbr()
{
var abbrList = document.getElementsByTagName("abbr");
if( abbrList.length == 0 ) return;
var oldBodyText, newBodyText, reg
oldBodyText = document.body.innerHTML;
reg = /<abbr ([^>]*)>([^< ]*)<\/ABBR>/g;
newBodyText = oldBodyText.replace(reg, '<acronym $1>$2</acronym>');
document.body.innerHTML = newBodyText;
}

window.onload = function(){
styleAbbr()
};
</script>
< ![endif]-->


Note, I have used conditional comments to target IE/Win versions less than IE 7. The reason for that is because IE 7 is supposed to now support <abbr>, so no need to perform the replacement.

Thus I can target my asterisk like so:

label.required abbr.marker,
label.required acronym.marker
{
…
}

It’s all good!