[Plone-UI] Tableless layout css fixes offer

Volodymyr Rudnytskyy wald at quintagroup.com
Mon Dec 12 09:54:24 UTC 2005


Hi,

I use tableless layout for all custom plone skins development. Tableless 
plone 2.1.1 has visual glitches even in default tableless plone layout. 
Every time I start new skin project I have to write the same css 
expressions to fix the layout. Thanks to the portal_css instrument it is 
very easy and convenient to add fixes to the skin. So I just add an 
additional tableless211fixes.css to the skin and register it with the 
portal_css. I suppose this may be useful for others plone skins 
developers to have it and try. Of course it would be good to have fixes 
in future plone release, but I realize it is not so simple, testing 
needed, etc...

OK, below is the css expressions I use in every single skin based on 
tableless layout. I've tested it on IE5.01, IE5.5, IE6, Mozilla 1.6, 
Firefox 1.0.6, Opera 7.23, Opera 8.02 on windows.



#portal-breadcrumbs {  /* Mozilla height adjustment*/
line-height:150%;
padding-top:1px;
padding-bottom:1px;
}

#portal-siteactions li a {
height:1%;
}

#portal-personaltools li {
height:/**/1%;   /*hide from IE 5.5/Win*/
margin-bottom:0;
}

#portal-personaltools li a {
height:auto;
}

*html #portal-globalnav li a {  /*declarations for IE */
height:/**/1%;  /*hide from IE 5.5/Win*/
margin-bottom /**/:/**/-2px;  /*FOR IE 5.0/Win*/
}

*html .portlet,
*html .portletHeader,
*html .portletItemSingle,
*html .portletItem,
*html .portletFooter,
*html .portlet form {
height:1%;
}

.portletItem {
margin-top:-1px;
}

.ploneCalendar {
border-collapse:separate;
border-spacing:0;
}

*html .ploneCalendar { /*declarations for IE */
border-collapse:collapse;
width /**/:auto; /*hide from IE 6/Win*/
height:1%;
}

.ploneCalendar td {
width:14%;
}

*html .ploneCalendar td {  /*declarations for IE */
width:1%;
}

*html .link-external,
*html .link-external a,
*html .link-mailto a,
*html .link-mailto {
height: 1%;
}

.documentContent {
height:1%;
}

.documentActions {
height:1%;
position:relative;
margin:0;
}


I do not remember now why some lines are here for, probably revision 
needed...




More information about the UI mailing list