Salient Soft

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 »

Numeric Unicode references can be added using the format :-

• &#N; (for decimal unicode value N)
• &#xN; (for hexadecimal unicode value N)

The use of Webdings and Wingdings font families is not universally compatible and is considered a hack – use unicode characters instead as above.
Wikipedia has a good article on this here.
Full unicode character charts may be found on unicode.org here.

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 »