CSS Forum

I am trying to apply styles to specific elements of a hosted payment processing form. This form is not under my control, so I cannot edit the html itself (specifically the doctype).

The provider does allow custom html to be embedded in the header section of the layout. I link to an external stylesheet to customize the presentation.

However, I minimized this page to only what is neccessary to demonsrate my problem, so the css is embedded.

The follow sample will trigger "quirks mode" in IE 7 and 8 because of the doctype. The css selectors are supported in IE, as changing the doctype to <!DOCTYPE HTML> will make it work magically. However, I cannot change the doctype as I don't have control over it.

I am trying to apply style to the "last name" field so that it appears as the same color as the "first name" field. Note the "last name" field does not have a class attribute defined as the "first name" field does.

This code works fine in recent firefox versions I tested with. How can I workaround quirks mode and apply consistent style to these elements using only css?

Also, javascript is not an option, as the provider replaces script tags with noscript.

Been there. Done that. Sometimes you have to use inline styles even if they set your teeth on edge. The one advantage is that inline styling at the table-cell level is masterful at overriding anything that's been set elsewhere in the doc. For example, style = "text-align: right;" instead of align = "right".

Does the form do something truly retro like shoving your entire input into <font> tags? You can override this by putting your own </font> at the very beginning and then restoring <font = whatever> at the very end. Gives you that lovely "Neener-neener" feeling too.

Interesting problem. I also note the doctype is html 4.0, plus the text you want to change looks like <labels> for form elements - but not marked up as such. I'm sure there are reasons for being with this provider, but do they really deserve support given they are locking in archaic code that does users no good at all?

As you can code the head, is it possible to deal with ie8 via a compatibility meta? More information at Defining Document Compatibility [msdn.microsoft.com]. Something like <meta http-equiv="X-UA-Compatible" content="IE=edge">. Note the use of edge is contested, and was discussed in What do all these IE Modes really mean? [webmasterworld.com], but I think James Hopkin's approach has merits. Just note that will switch ie8 into standards, so any css sent to deal with the implications of quirks may need adusting.

That leaves ie7. I'd check your numbers are worth being concerned about - recalling this css isn't understood by ie6 either. The provided code is very neatly stripped - thanks, but if I understand your description correctly, the td containing "Foo" has a class name. As I read the code that means that every td except the one containing "Last Name" has a class. Does that make it possible to send a conditional comment to ie7 to set the style for all td's (or tr's) to what you want for fist name/lst name, then use the existing class names to set all the other td's (or tr's) back?

Finally, you said javascript is not an option, but does that include links to external javascript (again, an awful option) and/or javascript enclosed in conditional comments?

Lucy, I wish I could have a "neener-neener" moment, haha. But unfortunately, I can't edit the HTML except within specific header and/or footer divs.

Alt131, I should have clarified that that the customizable header I am speaking of is a div defined by the provider, not within the <head></head> tags.

External JS is not an option either, it gets replaced by noscript. Even if I could find some way to sneak in an external JS reference, it would trigger an XSS warning in IE.

However, I can embed JS into attributes. For example I create a "back" link using <a href="javascript:back()">. Perhaps there is a workaround using this approach. I'm afraid of how ugly it will be, but at this point, I'll take whatever I can get.

<div id="divMerchantHeader" class="HeaderFooter1"><!--I can embed code here, like the following.Not a nice place to ref a stylesheet, but what the hey, its my only option and it works.--><link rel="stylesheet" type="text/css" href="http://example.com/pretty.css"><a href="javascript:back()">Go Back</a></div>

so you can actually target all the cells in that particular table, if there is already classnames on those cells (which I'm presuming not or this question wouldn't arise) you can add the class using this.className += ' td' + cellIndex, - the null style is to stop the behavior repeatedly calling

hypermega, thanks for the clarification. I think Suzy summed it up well with "Yuk" ;)

My first thought was whether behaviours might be a way around this as well. I'd just add a couple notes to Suzy's technique. The first is to wrap everything in a conditional comment. It is only a few bytes extra code, and will keep all this away from other user agents. You commented earlier you are linking to an external stylesheet - as that will stop all other downloads, if the amount of code is small you might consider wrapping an inline style sheet (not inline styles) inside conditional comments as well. The final thought was whether an .htc might be a work around. Redundant now as Suzy's solution probably does what is required, but might be a way around other issues in the future.

Suzy, one of us has to stop thinking along similar lines - it gets scary ;)

It doesn't interfere with Firefox or Chrome which use the attribute selector just fine, so no need for conditional comments

Other user agents read and try to process the rule. It is not valid so triggers error handling. That may not cause a noticeable problem, but the issue is completely avoided by using a conditional comment.