Two Drifters

An order problem?

Internet Explorer seems to be picky about the order chained CSS class selectors appear in:

.q_null {background-color:#f5f5f5;}
.q_true {background-color:#81F7BE;}
.q_false {background-color:#F78181;}

.q_null.icon {background: url(icons/pencil.png) no-repeat center;}
.icon.q_false {background: url(icons/error.png) no-repeat center;}
.icon.q_true {background: url(icons/accept.png) no-repeat center;}

As you can see, it layouts .q_null.icon as intended (one icon, table row has a background color), whereas the other order .icon.q_false is rendered incorrectly.

No – there’s something else in the works

This is the result of the “corrected” code:

.q_null {background-color:#f5f5f5;}
.q_true {background-color:#81F7BE;}
.q_false {background-color:#F78181;}

.q_null.icon {background: url(icons/pencil.png) no-repeat center;}
.q_false.icon {background: url(icons/error.png) no-repeat center;}
.q_true.icon {background: url(icons/accept.png) no-repeat center;}

Does it ignore chained classes in CSS completely?

A little research shows: only Internet Explorer 6 ignores chained classes in CSS. Unfortunately it is still used by about 10 % of the online population. Thus, there’s no other choice but to rewrite the code to execute with “unchained” single classes in CSS.

Internet Explorer getJSON trouble

This piece of code initially did not work for me on IE:

$.getJSON(“../inc/exercise_ajax.php?” + $(this).serialize(), function(json)

FireFox worked without problems.

The reason is that my JSON code was not well-formed. It had a comma (‘,’) too much.

Here’s the code which I use in PHP to create my JSON (braces omitted):

foreach($answers as $question => $answer){
$outstr .= ‘”q’.$question.’”: ‘;
if (isset($_GET[$question])){
if ($_GET[$question] == $answer) $outstr .= ‘true’;
else $outstr .= ‘false’;
} else $outstr .= ‘null’;
$outstr .= ‘,’;
}
echo chop($outstr,’,');

You have to chop off the trailing comma – if you don’t, IE will choke on it and your callback function won’t be executed.

Internet Explorer & AJAX caching

Yes, Internet Explorer caches your requests. You’ve got to empty the browser cache before testing the fix I mentioned. Also, you should append a unique parameter to suppress caching, i.e. the current timestamp. Example:

var now = new Date();
// submit with AJAX
$.getJSON(“../inc/exercise_ajax.php?ts=” + now.getTime() + ‘&’ + $(this).serialize(), function(json)

Internet Explorer’s refusing to work with the tabs – that is, the first two tabs work then everything breaks. Firefoxy and Opera do what I intend them to do. Have I mentioned that cross-browser developing can be a burden?

It turns out, that Internet Explorer has a problem with the <FORM> not wrapping around everything, but being split up between DIVs.

This does not work with Internet Explorer:

<div class=”panes”>
<DIV>
<form action=”/” method=”post”>
…
</DIV>
<DIV>
…
</DIV>
<DIV>
</form>
</DIV>
</DIV><!–closing the panes–>

This works:

<form action=”/” method=”post”>
<div class=”panes”>
<DIV>
…
</DIV>
<DIV>
…
</DIV>
<DIV>
</DIV>
</DIV><!–closing the panes–>
</form><!–form wraps around the panes –>