Quirksmode and Strictmode

IE 6.0 - QuirksMode - for all your browser quirks: "" and XML prologue details and the modes at which IE renders XHTML.

CSS Rounded Corners example - redmelon.net

CSS Rounded Corners example - redmelon.net


A Demo page showing sample HTML code and VIew Source shows the CSS

This is the essential CSS:

/* set background images for corners */
.rbroundbox {
background: url(simple_background.gif)
repeat;
}
.rbtop div {
background: url(simple_top_left.gif)
no-repeat top left;
}
.rbtop {
background: url(simple_top_right.gif)
no-repeat top right;
}
.rbbot div {
background: url(simple_bottom_left.gif)
no-repeat bottom left;
}
.rbbot {
background: url(simple_bottom_right.gif)
no-repeat bottom right;
}

/* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%; height: 14px; font-size: 1px;
}
.rbcontent { margin: 0 14px; }
.rbroundbox { width: 20em; margin: auto; }

and HTML:

[div class="rbroundbox"]
[div class="rbtop"][div][/div][/div]
[div class="rbcontent"]
[h2]Header[/h2]
[p]Text here my love.[/p]
[/div]
[div class="rbbot"][div][/div][/div]
[/div]

CSS - Transparency for Images

{img src="assets/misc/solar-radar.jpg" width="105" height="140"
alt="solar-radar (7K)"
style="-moz-opacity:0.5;
filter:alpha(opacity=50);cursor:hand" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50"}

In the above code:

-moz-opacity:0.5; - alters opacity in Mozilla based browsers
filter:alpha(opacity=50); - alters opacity in Internet Explorer

More details

CSS - Effect for Transparent Images

Using CSS change the background colour behind transparent .gif images.
The changing background colours show through the transparent portions of the image.

Create an anchor with the following styles

Style:
.rollover a { display:block; width:32px; background-color: #FFFFFF}
.rollover a:hover { background-color: #990000;border:1px solid #990000;}

HTML:
[div class="rollover"]
[p]
[a href="#"][img src="image.gif" border="0"][/a]
[/p]
[/div]

XHTML Events

XHTML Events Complete reference includes:


onload
onunload

onchange
onsubmit
onreset
onselect
onblur
onfocus

onkeydown
onkeypress
onkeyup
onclick
ondblclick
onmousedown
onmousemove
onmouseover
onmouseout
onmouseup

XHTML Reference

Complete XHTML Reference from w3schools.com.


A Comprehensive and essential reference

CSS Presentation: Hi-Fi design with CSS

Hi-Fi design with CSS - presentation by Douglas Bowman covers the following areas:

• Colorswapping


• Fahrner Image Replacement and alternatives


• Adding multiple style sheets


• Styleswitching using scripts


• CSS Rollovers


• Sliding Doors - CSS for Tab Design

.. worth a read

CSS Presentation: The Good, the Bad, & the Ugly

CSS: The Good, the Bad, & the Ugly - presentation by Douglas Bowman covers the following areas:

• What is Image Replacement?


• Fahrner Image Replacement and alternatives


• CSS Code and Design Theft


.. very good reference

Some lesser known HTML character entities

Here's a list of some of the more useful but lesser known HTML character entities.

Character	HTML Entity	Description
¢	¢	Cent sign
£	£	Pound sterling sign
€	€	Euro sign
©	©	Copyright sign
‘	‘	Left single quote
'	’	Right single quote
“	“	Left double quote
”	”	Right double quote
«	«	Left angle quote
»	»	Right angle quote
—	—	Em dash
–	–	En dash
®	®	Registered trademark
™	™	Trademark sign
°	°	Degree sign
±	±	±
¼	¼	One quarter
½	½	One half
¾	¾	Three quarters
×	×	Multiplication sign
÷	÷	Division sign
α	α	Greek letter alpha
β	β	Greek letter beta
?	∞	Infinity symbol

A complete list of character entities is provided in the HTML 4.01 recommendation .

Sample Webcredible Usability Handbook

Webcredible Usability Handbook contains very useful usability tips for designing user friendly websites.

If you like the sample chapters you can purchase the 90-page Handbook at http://www.webcredible.co.uk/handbook.

Don't show scrollbar unless needed (IE)

/* This may make it impossible to scrolling using the keyboard! */
html, body { overflow-y: auto }

Web Development Bookmarklets

Web Development Bookmarklets - a useful set of web development tools that may be attached to IE/FF/Opera