Making your existing Plone install look better in Internet Explorer 7

When Internet Explorer was released and pushed down to users as a mandatory upgrade, it displayed some visual artifacts with existing Plone sites. Here's how to fix most of them before the next Plone release.

Note: This guide only applies to very specific versions of Plone (namely, Plone 2.1.3 and 2.5.1). Any later releases in the 2.1.x or 2.5.x series already have these fixes included.

Plone 2.1.3 and 2.5.1 included the majority of the fixes needed to work well with Internet Explorer 7, since we tested them with the earlier beta releases of IE7 — but a few additional changes need to be made to Plone to work well with what ended up being pushed out as the final release of IE7.

Visual problems

The following visual artifacts are present when you use Internet Explorer 7 on a Plone 2.1.3 or 2.5.1 site — depending on how you have customized it, that is:

Page is wider than the browser, causing horizontal scrolling
Solution: Put the following in your CSS: #portal-searchbox { overflow: hidden; }
Calendar has too much spacing between the table cells
Solution: Put the following in your CSS: .ploneCalendar { border-collapse: collapse }
If you are using Plone without icons in the navtree: Bullet markers appear
Solution: Put the following in your CSS: .navTreeLocal { list-style-image: none; list-style-type: none; }

That should be all of the visual issues. If there are any other problems that you see, please leave a comment here, and I'll update the document with any new additions.

Javascript problems

Internet Explorer has deprecated the implementation of the XmlHttpRequest object in MSXML 5.0, resulting in security warnings for things like LiveSearch and Kupu — but only if you have Office 2003 installed on the computer where you use Plone (or if you have installed MSXML 5.0 separately). Plone relies on an external library called Sarissa, which needs to be updated to check for the new native implementation of XmlHttpRequest in IE7. It's likely that we will ship a new release of Plone with these included during the coming days, but at the moment there is unfortunately no easy way to fix it yourself.

Update: The latest release of Kupu (1.3.9 as of this writing) should have fixed it, and the Sarissa people have also released a new version of their library.

Great fixes - but...

Posted by Dan Fandrey at Nov 11, 2006 04:06 PM
When the search box moves to the top left the smart search results display partially off the screen(in both IE6 and 7). I am looking how to change this, but can't seem to figure it out...

Have you tried to change this ...

Posted by Rafael Bermudez at Jan 16, 2007 03:57 PM
I moved the portal_search box to the left, and i got the result box out of the screen. So i used the left propierty....

.LSResult {
position: relative;
display: block;
text-align: right;
padding-top: 25px;
margin: 0;
left: 10em;
z-index: 3;
}

colophonWrapper weirdness

Posted by Andy Cowley at Nov 16, 2006 01:09 PM
IE7 seems to render the icons in a colophon wrapper twice and insert the 'alt' text too.

This is a snippet of the source. I think my css is pretty near vanilla.

      <div class="colophonWrapper">
    <ul>
       <li>
      <a href="http://plone.org" target="_blank" class="colophonIcon colophonIconPlone" title="This Plone site was built using Plone CMS, the Open Source Content Management System. Click for more information.">
        Powered by Plone CMS, the Open Source Content Management System
      </a>
      </li>
      <li>
      <a href="http://zope.org" target="_blank" class="colophonIcon colophonIconZope" title="This Plone site was built using Zope. Click for more information.">
        Powered by Zope.
      </a>
      </li>
      </ul>
     </div>
    

Page is wider than the browser - Tableless skin

Posted by Andre Nogueira at Dec 04, 2006 03:05 PM
In Tableless skin you have to redefine portal-searchbox AND documentActions to fix this problem:

.documentActions, #portal-searchbox { overflow: hidden; }

searchbox problems

Posted by Andre Nogueira at Jan 29, 2007 12:59 PM
The "overflow: hidden" makes live search doesnt work fine in firefox and IE6.
I updated the code to:

.documentActions, #portal-searchbox {
    *overflow: hidden; /* Works on IE 6 and 7 */
    _overflow: visible; /* Works on IE 6 */
}

How to know what element causes the horizontal scroll

Posted by Victor Fernandez de Alba at Jan 16, 2007 10:29 AM
Hi,

I have customized my site and there is an element different than the portal-searchbox that causes the horizontal scroll. Any form to know what element is?

Thanks,

Some bugs in folder_summary_view

Posted by Rafael Bermudez at Jan 16, 2007 03:46 PM
I get some bugs using IE 7. I use topic folder and this view template, collecting news item. If the news have a pic, then i cannot see the description and the title, but if the description is longer than the pic height, then i can see all the elements.

Can anyone help me?

Smart Folder News IE7 Text

Posted by Dale DeWitt at Feb 04, 2007 08:35 AM
I can wand with the mouse to restore text, or the text might appear with significant delay. All and all this behavior can be replicated on old or new 2.5.2 Plone instances using a backup server on a neighbor machine to test two different IE7 browsers. FF, Opera, Mozilla, Netscape all work normal, that is, to repeat, both text and images come through for a 'news item' but not reliably for IE7.

--> IE7 Float clearing bugs

Posted by Andreas Singer at May 23, 2007 11:24 AM
this seems to occur due to a float clearing bug in IE7. the float clearing hacks for former IE browsers don't work anymore, so it might help you to customize your portal_skins/plone_styles/IEFixes.css and add specific rules for IE7, as described here:

http://www.aplus.co.yu/css/ie7-float-clearing/

--> for all * html SELECTOR { height: 1%; } rules, add the same for IE7 with: SELECTOR { min-height: 0; }. this works for me!

(this should also solve 'Some bugs in folder_summary_view', posted above by Rafael Bermudez)

Implementing proposed hack

Posted by Dale DeWitt at May 23, 2007 01:01 PM
/* Fix for IE float bug */
* html .visualIEFloatFix,
* html h1,
* html h2,
* html h3,
* html h4,
* html h5,
* html h6,
* html dd,
* html .documentDescription,
* html .visualClear,
* html .portalMessage,
* html .portalWarningMessage,
* html .portalStopMessage,
* html .system-message,
* html #error-handling,
* html .documentContent {
    height: 0.1%;
            0% instead. OK. But no change in described behavior after a click on "Save Changes" Dale

re: implementing proposed hack

Posted by Andreas Singer at May 23, 2007 01:34 PM
it seems you got me wrong, implementing the proposed hack would be an _additional_ rule-set like this:

/* Fix for IE 7 float bug */
.visualIEFloatFix,
h1,
h2,
h3,
h4,
h5,
h6,
dd,
.documentDescription,
.visualClear,
.portalMessage,
.portalWarningMessage,
.portalStopMessage,
.system-message,
#error-handling,
.documentContent {
min-height: 0;
}

then save changes and reload page (ctrl-f5, if css is still cached).

Impemented

Posted by Dale DeWitt at May 23, 2007 03:30 PM
Works as written.

RE: Implementing Proposed Hack

Posted by Rob Porter at May 24, 2007 06:59 PM
Works well for me too.

Header Image Display

Posted by Bridgit Stone at May 11, 2007 03:33 PM
When viewing our Plone site in IE7, the header image is cut off on the right side and bottom.

livesearch mouse click evasion

Posted by Dale DeWitt at May 30, 2007 10:35 PM
http://theploneblog.org/ is an example of a plone instance on win32 with MS Office, resulting in the mouse being non-functional to return livesearch results. The up and down arrow keys have to be substituted instead. Does anybody have a fix or should MS Office be uninstalled. This site is 2.5.1 but my 2.5.1, 2.5.2 and 2.5.3 have all seen this same situation.