Salient Soft

Update 22/09/2011

The following selector (as documented below) did not work when used for a particular table. CSS ignored the rule presumably for reasons of specificity:-

.ss-nested-widget, .ss-nested-widget .ui-datatable {
     font-size: 100% !important;
}

However, the following selector did work (and was also modified to include a dialog as well as a table). This has the advantage of not relying on having ss-nested-widget as a class on the table in order to work.
This has now been adopted as standard as the solution for this issue :-

.ss-nested-widget,
.ui-widget .ui-datatable,
.ui-widget .ui-dialog { 
     font-size:100% !important;   
}

Original Post

This issue is due to font size inheritance.

My default font for all Primefaces components was specified globally as follows:-

.ui-widget {

font-size: 75% !important;

}

The reason for this is that in general it is considered more flexible to go for percentage sizes as these can then be scaled automatically when viewed on smaller devices.

Unfortunately, it appears that when for example a table is nested inside a panel, the font size appears to be 75% of 75% as the rule is inherited and applied twice, as 75% is a relative measurement, The table ends up rendered as a 9px font which is too small. The situation is further complicated by the fact that in the Primefaces skinning, there is a mixture of fonts specified in ems, percentages and pixel sizes, which means that not everything is specified in relative sizing anyway.

There are 2 solutions to the issue, both are straightforward, 1/ is the simplest although arguably not the best due to absolute sizing:-

1/ Change the global ui-widget rule above to use a fixed font size (12px works as a replacement for the above 75%)

.ui-widget {

font-size: 12px !important;

}

2/ Keep the  75%  for ui-widget and introduce a new rule to specify a 100% size for nested elements:-

.ss-nested-widget {

font-size:100% !important;

}

This rule needs to be introduced inside the panel. If it is placed on the panel itself, which is the parent element, then the font size just ‘goes large’ to 100%, i.e. larger than the desired default font. To obtain the correct behaviour, the sub-elements inside the panel must be tagged with the style class. It is possible to tag an enclosing <div> just inside the panel, so that the sub-elements inherit it. However, whilst this worked for input selectors and buttons in the panel, tables refused to play ball, and the following rule was needed to ensure that a table in the panel inherited the correct size:-

.ss-nested-widget, .ss-nested-widget .ui-datatable {

font-size: 100% !important;

}

The same kind of trick can be used to target other nested elements which do not inherit the correct size.

An alternative method would be just to add the class to sub-elements individually where required.

No Comments »

Update 23/11/2010

Having experimented with this extensively on different browsers, I have found inconsistent results across browsers when trying to vertically centre a group of controls in a bordered div which closely surrounds them. If you need just a few pixels between the controls and the border, vertical centering does not work in a consistent browser independent manner. For larger centring, e.g. for centring a paragraph of text in a large div, the differences may not be noticeable, but at small scale they definitely are. For placing a close border around a group of related controls, my preferred method is now to use floats as detailed here. Note that the fact that floats are used does not force the rest of the document to use floats or to have non fixed sizing – the floats can be invisible to the outside due to a second outer non floated fixed size div. Also, the floated version works better when the contained controls are of variable or unknown size.

Original post

I originally used this here in order to centre the text on a Primefaces button, the usage of inline-block was incorrect.

What it does not do is allow you for example to centre a <span> element vertically and/or horizontally in a parent div!

What it does do is to allow setting of the alignment of an inline element relative to adjacent inline elements on a line (not relative to the parent container). It will therefore work within a <td> but not within a <div>

There appear to be a lot of fuzzy and partly incorrect articles on the net about this, and it was hard to find clear definitions. even the W3schools site does not greatly help, and does not appear to list for each element whether it is an inline or block element by default, which seems quite an omission.

In the end I found some helpful posts on it here and here which cleared it up for me, and explained why my simple example of a <span> in a <div> would not centre vertically with inline-block and vertical-align:middle!

Note regarding the use of vertical-align, a typical gotcha on this is if you have a horizontal group of buttons/combos and attempt to use top/bottom margins to try to centre them vertically, you may wonder why you do not get the expected behaviour as the margins do not appear to be properly honoured. This is a classic case for using display:inline-block and vertical-align:middle on all the controls.
Primefaces note:- the Primefaces commandButton components are set to  display:inline-block by Primefaces, using the internal jQuery ui-button class.

No Comments »

Rather than use the border keyword in HTML, it is better to style tables in CSS as this localises all the styling in the style sheet and promotes automatic re-use across different tables.

This page from Somacon is an easy-to-use ‘what if’ tool for tweaking all the properties for tables and instantly seeing the effect.

The w3schools reference page for tables may be found here.

This page also from w3schools describes the use of the border-collapse property, which causes the border-spacing and empty-cells properties to be ignored, and for all borders to be collapsed to a single border. This is very useful when you want complete control yourself and to prevent some of these other properties getting in the way, for example when you want a minimal flat solid border.

Note that as is often the case, incorrect HTML can give rise to strange behaviour. For example if you mistakenly set colspan to greater than the number of columns (as I did when I subsequently deleted a column after creating a table and forgot to reduce colspan) you may get a partial double border effect on the right hand side.

Here is an example page with a table illustrating these points, together with all its CSS and HTML.

No Comments »

The following articles are helpful re correct choice of font, and how to size and use the various units correctly.
Issues such as providing sensible fallbacks in the font list to cater for different browsers are covered, together with the use of the various absolute and relative sizing units, and how fonts are inherited

http://www.w3schools.com/css/css_websafe_fonts.asp

http://www.w3schools.com/css/css_font.asp

Gernally accepted advice is as follows :-

1. Define a default family in CSS for the body tag, consisting of a suitable fallback stack. Use a sans serif for screen use as it is more readable
2. Define a default size using percent in the body tag, then use ems after that for relative sizing. This gets around some browser quirks with IE, and allows resizing by the user for all browser types.
3. The default will be inherited throughout the document. However I have found issues when tweaking local CSS files during testing – sometimes old values ‘stick’ perhaps due to caching effects.
4. There is an issue apparently with some older browsers that tables do not inherit a default body font. Therefore, the default should be specified for body, table as in the example below.
5. Note that not all fonts in the stack (such as the basic fallback sans-serif) are necessarily scalable, so size changes may not appear to work if an inferior fallback font is picked up.

The following is an example stack in css :-

body, table {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #000000;
}

No Comments »

There are plenty of sites about showing how to do hover and click (=active) effects on an element (typically a link or image/image button) using Javascript, but with modern browsers (including IE7 and above but not IE6) this is completely unnecessary as it can be done entirely with CSS. The advantages are clear – no Javascript is needed, the CSS is straightforward, and no round trip to the server is needed. The typical effects used are to swap images or highlight using a different border or background.

These effects can now be performed on any element, not just a link, but check out compatibility as IE has had some issues with this. I have performed this on image buttons as well as links and had no trouble.

The W3schools article on Pseudo Classes is here. An example of using the hover effect to switch a background image via CSS may be found here. (Note the importance of setting an explicit width and height in the CSS – required because the example uses background images).

The pseudo class can be added to an existing style class. The following simple example shows an ICEfaces Image button with a style class, with modified pseudo classes used in the CSS to highlight the border differently on hover and active (active in CSS terms means click).

CSS

.ImageButton {
	margin: 1px;
	padding: 1px;
}
.ImageButton:hover {
	padding: 0px;
	border: 1px solid #ffa600;
}
.ImageButton:active {
	padding: 0px;
	border: 1px solid #ffd800;
}

JSF

<ice:commandButton image="images/arrow-up.gif"
                   styleClass="ImageButton">
</ice:commandButton>

No Comments »

Topstyle Pro is my preferred editor for HTML and CSS. It is primarily billed as a CSS editer and  previewer, but has evolved into an equally powerful HTML editor. It has dynamic in-window previewing of changes, which is especially useful when tweaking tricky CSS, and has intelligent code/tag completion, error detection/correction/validation plus a large number of other powerful features. I find it especially useful as, not being a CSS expert who uses it all the time, the code completion, error detection/correction and dynamic preview help to fill in the missing/forgotten knowledge gaps.

No Comments »

The following articles give details of the resolution of styles when multiple stylesheets are cascaded, and how styles are prioritised when multiple styles affect the same element.

• This article is a helpful introduction to the basics.
• This article from W3.org gives the full specification, but if starting out you are advised to read the above intro first!
• This article from David’s Kitchen gives a good insight into CSS Style inheritance, priority and the infamous specificity (try saying that one when you’ve had a few too many!)  I found it easier to understand particularly on priority than the W3.org spec above, although the latter is obviously the last word on how it all works.

No Comments »

The following sites give a good introduction and insight into the use of floats and some of their quirks for the unwary.

This Excellent introductory float tutorial from Max Design is well worth working through entirely as a starter for beginners.

This article from CSS Newbie details some of the quirks of floats and how content flows around floated elements, and how container height is affected. There is a fundamental point which the article illustrates, but which I could not find spelled out clearly and obviously in other articles anywhere. When other elements flow around a floated one, it is the content area of their CSS boxes which flow. It is therefore perfectly possible (and normal) for the floated element to end up sitting inside the margin, border and padding areas of the elements which float around it. The article also describes how the floated element can overlap (extend beyond) the border of the flowing  element if for example the floated element is longer. This is not what you might expect. However, when the flowing element is itself floating, then the height of the (inner) floating element dictates the height of the flowing element.

The ‘flowing of content area’ behaviour is used when designing multi column layouts, as this article from Comunity MX illustrates. For example in a 2 column layout, the left column content is placed in a ‘float: left’ div. The adjacent right colum flows around it, and has a left margin set to the width of the left column plus any desired gap.

This article by Matthew James Taylor describes a template for a 3 column floating layout with header and footer. The interesting thing about this is that Matthew does not use any CSS hacks or browser specific coding, but manages to achieve wide cross browser compatibility. He also has a number of other templates, all freely available, an addition to an interesting article on how to acheive equal height column backgrounds, again by nesting floating column divs inside other divs which are also floating.

No Comments »