1. Home
  2. Forums Index
  3. Browser Side / CSS 1:59 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

IE 7,8 quirks mode - advanced selectors work around

Add class using behaviours

         

hypermega

10:14 am on Jul 4, 2011 (gmt 0)

10+ Year Member



Hello,

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.

Thanks in advance. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Quirks Test</title>
<style>
.LabelColBill {
  color: blue;
}

/* label embedded in table w/o css id or class to select */
.DataColBill td[align=right] {
  color: blue;
}
</style>
</HEAD>
<BODY>
<div id="divPageOuter" class="PageOuter">
<div id="divPage" class="Page">
<form id="formPayment">
<div id="divBillingInformation">

<TABLE id="tableCustomerBillingInformation">
<tr>
<td class="LabelColBill">First Name: </td>
<td class="DataColBill">
 <table cellpadding="0" cellspacing="0" width="100%">
 <tr>
 <td><!--x_first_name.val-->Foo<!--end--></td>
 <td align="right">&nbsp;&nbsp;Last Name: &nbsp;</td>
 <td><!--x_last_name.val-->Bar<!--end--></td>
 </tr>
 </table>
</td>
</tr>
</TABLE> <!-- tableCustomerBilling -->

</div> <!-- divBillingInformation -->
</div> <!-- entire BODY -->
</div>
</BODY>
</HTML>

lucy24

5:57 pm on Jul 4, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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.

alt131

8:18 pm on Jul 4, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi hypermeg, and welcome to WebmasterWorld :)

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?

[edit] Spelling

hypermega

3:43 am on Jul 5, 2011 (gmt 0)

10+ Year Member



Hi thanks for your reply.

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.

I will clarify my example to show only the sections I can edit:

pretty.css 

.LabelColBill {
color: blue;
}

/* label embedded in table w/o css id or class to select */
.DataColBill td[align=right] {
color: blue;
}


provider html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Quirks Test</title>
</HEAD>
<BODY>
<div id="divPageOuter" class="PageOuter">
<div id="divPage" class="Page">

<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>

<form id="formPayment">
<div id="divBillingInformation">

<TABLE id="tableCustomerBillingInformation">
<tr>
<td class="LabelColBill">First Name: </td>
<td class="DataColBill">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><!--x_first_name.val-->Foo<!--end--></td>
<td align="right">&nbsp;&nbsp;Last Name: &nbsp;</td>
<td><!--x_last_name.val-->Bar<!--end--></td>
</tr>
</table>
</td>
</tr>
</TABLE> <!-- tableCustomerBilling -->

</div> <!-- divBillingInformation -->

<div id="divMerchantFooter" class="HeaderFooter1">
<!-- I can embed code here as well -->
</div>

</div> <!-- entire BODY -->
</div>
</BODY>
</HTML>

SuzyUK

8:40 am on Jul 5, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



this is yuk.. (using IE expressions!) but may be an option for you?

Using cellIndex [msdn.microsoft.com] as a means to get unique identifier, with the 'td' added because classes shouldn't start with a number..


in the css file.. 

.DataColBill td { /* IE only */
behavior: expression(
this.className = 'td' + cellIndex,
this.style.behavior = null
);
}

.DataColBill .td1 {color: blue;}


it produces HTML like this.. 

<TD class=DataColBill><TABLE cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD style="BEHAVIOR: null" class=td0><!--x_first_name.val-->Foo<!--end--></TD>
<TD style="BEHAVIOR: null" class=td1 align=right>&nbsp;&nbsp;Last Name: &nbsp;</TD>
<TD style="BEHAVIOR: null" class=td2><!--x_last_name.val-->Bar<!--end--></TD></TR></TBODY></TABLE></TD>


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

alt131

12:10 pm on Jul 5, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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 ;)

hypermega

4:21 pm on Jul 5, 2011 (gmt 0)

10+ Year Member



Yuk never tasted so good! Ugly or not, it works. Also, It doesn't interfere with Firefox or Chrome which use the attribute selector just fine, so no need for conditional comments.

Thanks so much Suzy et al.

SuzyUK

10:59 pm on Jul 5, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yay! but let's keep this quiet shall we, I don't make a habit of recommending IE expressions :o

Glad it worked for you!

alt131

4:01 pm on Jul 6, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

don't make a habit of recommending IE expressions
... nor sending styles from a div in the body. ;)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 1:59 pm May 1, 2026