Salient Soft

This tutorial describes how to use the Component showcase css and icons as the template for your own project.

I’ve not looked into it in detail, but it certainly makes sense to use the same look and feel and borrow from ICEfaces where necessary.

One of the comments is less than complementary about some of the CSS code in the example.

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 »