SIM payment form - IE 7,8 quirks mode - css selectors work around

hypermega — Mon, 04 Jul 2011 10:33:25 GMT

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

I link to an external stylesheet to customize the presentation using custom html embedded in the header section.

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 one that does not trigger quirks mode will make it work magically. For example:

<!DOCTYPE HTML>

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 script tags are replaced 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>

Re: SIM payment form - IE 7,8 quirks mode - css selectors work around

hypermega — Tue, 05 Jul 2011 16:30:37 GMT

Some nice folks at webmasterworld helped me find a workaround here.

topic Re: SIM payment form - IE 7,8 quirks mode - css selectors work around in Integration and Testing

SIM payment form - IE 7,8 quirks mode - css selectors work around

Re: SIM payment form - IE 7,8 quirks mode - css selectors work around