Making your existing Plone install look better in Internet Explorer 7
This How-to applies to:
Any version.
This How-to is intended for:
Any audience.
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.
Have you tried to change this ...
.LSResult {
position: relative;
display: block;
text-align: right;
padding-top: 25px;
margin: 0;
left: 10em;
z-index: 3;
}
colophonWrapper weirdness
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
.documentActions, #portal-searchbox { overflow: hidden; }
searchbox problems
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
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
Can anyone help me?
Smart Folder News IE7 Text
--> IE7 Float clearing bugs
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
* 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
/* 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).
Great fixes - but...