A certain page on a website was causing IE8 to switch into “compatibility” mode — and to display as if it weren’t paying attention to any media queries, which it otherwise could handle.

I found a meta tag to add to force it to stay out of compatibility mode — and then it would just display NOTHING!  View source,  the content was all there,  but just a big white screen!

Other pages with similar elements were displaying OK.   A few pesky validation errors could not be eliminated, but they weren’t breaking other pages.

Before beginning to attack the long content of the page, I decided to try making a new menu item for this page.  I did, but before trying the menu link, I copied the  Joomla link and tested viewing just the article (no menu id, no modules)  in IE8.   It worked  fine, but was missing a few styles.

Turns out I had styled a few things on this page with a  .menu-### selector, so of course those styles weren’t in play.

I went back and edited the article with a wrapping div with an ID  and replaced the .menu-### selector with the #new-id for these 8 rules.  

Now the page was broken again!  

Narrowing in, I disabled 4 of the 8 rules.  — OK.  I kept narrowing until only the rule with a :first-line selector was left.   Commenting this style out, the page was fine.  turn it on,  the page displays NOTHING!

I was able to use a :first-child selector to  achieve the same appearance  — without having to alter the html,  because the two line list items had been turned into links.

The JCE editor coded it as two separate links with the between them.

I was able to select     li  a:first-child  and apply the font-styles I wanted.

If any list items are NOT converted to links, they’ll lose the styling, but I’ll deal with that if I must.

Yesterday at a training session a user showed me a very strange display of what should have been a linked email address.  There was all kinds of code where the link text — the email address — should have been.

She was working in Firefox on a Mac, and deleted the link and rebuilt it and all was fine. (She was editing a page that someone else had worked on….  probably in IE!)

Today I get a call from a different client who wanted to be reminded of how to link to an email address.   I walked her through it and there was the gibberish again!

Hmm….  what browser are you using?    Internet Explorer.    Aha!

So…  off I go to do more testing* and sure enough, the JCE editor creates messed up links.   In the editor you’ll see:

mailto:barb@irislines.com?subject=test
where you should be seeing the link text.

If you publish that article,  the public will see:
?subject=test'; document.write( '

If you MUST use IE,   then in adding an email link where the link text is the email address,  the JCE editor will fill the url bar of the Advanced Link Editor  with  mailto:email@domain.com.   Just click insert and the link will be fine.   DO NOT click the envelope to add email address,  bcc, cc, or Subject fields.

If the link text is NOT an email address, then the JCE editor Advanced Link Editor functions can be used.

Best Practice?   Don’t use IE!

* I tested in IE8  on sites that use JCE 1.5.7 and JCE 1.5.7.4.