homepage Welcome to WebmasterWorld Guest from 54.237.125.89
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
IE 7,8 quirks mode - advanced selectors work around
Add class using behaviours
hypermega




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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. ;)
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved