[Plone-UI] [PATCH] 16x16 icons clipped/cropped to font-size

Darryl Dixon - Winterhouse Consulting darryl.dixon at winterhousesoftware.com
Mon Jun 26 02:06:51 UTC 2006

Hi all,

As per this thread here:
http://lists.plone.org/pipermail/ui/2005-November/000229.html, the icons
for contenttypes are clipped to the height of the font-size when the image
is applied to any inline display element, specifically a <span> such as is
used in search.pt, or any <div> which has been declared in the CSS as {
display: inline; }. The symptoms are that the icon loses its bottom edge.

This seems to be taken as granted by the general Plone dev team (the Plone
icons all contain a sacrificial 'bottom border') which is fine, but
doesn't seem to be widely advertised or documented anywhere (at least,
searching Google for the obvious terms only turned up the thread above as
being even close to relevant). This bug catches many third-party
developers unawares, for example, the icon for CMFContentPanels loses its
bottom edge because of this.

Unfortunately, the suggestion offered in the thread above wasn't very
specific, and doesn't work for the general case, so I thought I'd send a
mail to this list documenting a specific fix that works for the general
case so that other people searching Google like me will find something :)

So here it is: in your ploneCustom.css, or, preferably, in your own
skin-specific css document, you can enter something like this:
<dtml-in "getPortalTypeList()">
  <dtml-let item=sequence-item
    span.contenttype-&dtml-type_id; {
        padding-bottom: 1px;

Which, with a 'normal' Plone setup, should add just enough padding to stop
a full 16x16 icon from being clipped at the bottom. This fix works for
both Firefox (tested: 1.5.x) and Internet Explorer (tested: 6).

Below is a patch diffed against Plone 2.1.3 that implements the fix in
Plone proper:
--- plone/Plone-2.1.3/CMFPlone/skins/plone_styles/generated.css.dtml   
2006-06-04 04:49:43.000000000 +1200
+++ generated.css.dtml  2006-06-26 13:37:53.000000000 +1200
@@ -55,6 +55,9 @@
     .listing .contenttype-&dtml-type_id; {
         display: block;
+    span.contenttype-&dtml-type_id; {
+        padding-bottom: 1px;
+    }


Note that the patch doesn't account for divs that are { display: inline;
}, I don't think there are any in Plone itself that are affected, so any
third-party developer should be able to fixup their own code if it is
affected by this bug.

Please CC: me on any replies as I am not subscribed to the list.

many regards,
Darryl Dixon

More information about the UI mailing list