[Plone-UI] Plone's icon size & CSS background arbitary clipping

Mikko Ohtamaa snaapy at gmail.com
Wed Nov 23 09:13:31 UTC 2005


Hi,

I am making a skin for Plone 2.1 (Ruby Red) and I run some problems yesterday. 
Plone has a unique approach to display icon images as CSS background images. One 
 side back for this is that a browser rendering engine doesn't always resize 
view elements so that the full image would be visible. 

Plone 2.1 default icons are 16x16 pixels, but seem to occupy only 13x13 pixels.  
There are transparent pixels around borders.

If I make an icon occuping full 16x16 pixels, it will be clipped from bottom in 
folder listing view and it will touch the borders in "add item" menu. Navigation 
tree works fine. This is because text height in folder listing is (arbitary) 13 
pixels and the icon is clipped to text size (happens with Firefox and Opera, IE 
untested). If I resize text (Firefox) I can get the icon arbitary clipped.

There is .visualIconPadding CSS style but it doesn't fix height in folder 
listing and add item menu. 

Is there a guideline to follow in this matter?

I have made a fix for my Ruby Red skin by modifying the folder listing template. 
 There are two ways 

1. Use <img> tag instead of CSS background-image for icons

2. Add padding-bottom (arbitary 8 px) for folder listing view items. This 
extends space for background image. Note that line-height or min-height didn't 
work on Firefox/Opera.

Cheers,
Mikko





More information about the UI mailing list