irislines web design
irislines web design

IE Compatibility Mode triggered by :first-line selector.

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.

 

 

 

 

Tags: , ,

IrisLines LLC
101 Washington Street
Brattleboro, VT 05301

802 257 7391

info@irislines.com