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"> Last Name: </td>
<td><!--x_last_name.val-->Bar<!--end--></td>
</tr>
</table>
</td>
</tr>
</TABLE> <!-- tableCustomerBilling -->
</div> <!-- divBillingInformation -->
</div> <!-- entire BODY -->
</div>
</BODY>
</HTML>
