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>
07-04-2011 03:33 AM
Some nice folks at webmasterworld helped me find a workaround here.
07-05-2011 09:30 AM