irislines web design
irislines web design

Posts Tagged ‘IE’

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.

 

 

 

 

IE8, JCE, and email links….

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.

IE bug solution

This site has explanation and fix of something that might be happening on thespencer.com blog pages.

http://www.ultijoomla.com/blog/Internet-Explorer-Double-Margin-Bug.html

I applied “display:inline” on the .column1 rules and the blog display behaved itself.

horizontal menus… and ie7 zoom

Yes, it does matter how you style your nav bars!

In ie7,  when you zoom the page, the text of the links all jumble together if you styled the <li>s with “display:inline;”.

The problem goes away if you style <li>s with “float:left”.

-->

I needed to use a transparent png on sarisoldiers.com home page.
Just to cover the possible IE6 users out there I googled for a png transparency fix for ie6 and found

http://www.howtocreate.co.uk/alpha.html

I used the version of his solution that puts the filter in the stylesheet (actually in the head of my google template) and simply wraps the image in a span. It worked!  Code shows how you can use one rule for many images in site, with a span id for each.   Image name is specified in the html and the conditional commands.  Image size and span size must match.



IrisLines LLC
101 Washington Street
Brattleboro, VT 05301

802 257 7391

info@irislines.com