CSS/(X)HTML Reference

CSS/(X)HTML CSS debug script

This little script outlines all elements on the page several levels deep.

CSS/(X)HTML metatag redirect

Apart from refreshing the page the refresh metatag can also be used to to redirect a visitor to another page:

CSS/(X)HTML anchor link

Used to link to a named link on the page

CSS/(X)HTML Multiple CSS background properties in one declaration

The following bit is an example of how you can set multiple css background properties in one line of code:

CSS3 Border radius

CSS3 (not yet finalised)	Mozilla equivalent	WebKit equivalent
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
border-radius	-moz-border-radius	-webkit-border-radius

CSS/(X)HTML Absolute positioning - z-index - and IE6

PPK (http://www.quirksmode.org/) summarized this problem on his post:
Explorer z-index bug
(http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.
html):

It appears that in Internet Explorer (windows) positioned elements do
generate a new stacking context, starting with a z-index value of 0, causing
the lime-green box to appear above the yellow box.
This is a serious violation of the CSS specifications, causing headages and
a lot of misunderstanding of what z-index really does.

While crediting Aleksandar Vacić for first reporting this bug, PPK doesn't
mention Aleksandar's simple solution. Give the parent a position:relative
and z-index:1..( http://www.aplus.co.yu/css/z-pos/)

CSS/(X)HTML Cross browser max-width/ min-width (inc. IE6)

IE6 doesn't support the min-width or max-width css properties. But it does understand this : (not W3C valid css)

CSS/(X)HTML Scrollbar CSS

CSS for scrollbars. Works in Internet Explorer only. Other browsers / w3c don't recognize and ignore these specifications

CSS/(X)HTML Hide dotted outline in Firefox on clicked and active links

hide dotted outline in Firefox on clicked and active links

CSS/(X)HTML Some clean (X)HTML template examples

CSS/(X)HTML Reset CSS

To provide a common cross-browser building ground on which you can apply your classes, a reset-CSS snippet can bring all html elements to a less ambiguous, more neutral lay-out starting point.

CSS/(X)HTML Doc-types

Use any of the following - see this article for xplanation - http://www.alistapart.com/stories/doctype/

CSS/(X)HTML IE conditionals

Here are the conditions you can use:

Item	Example	Comment
IE	[if IE]	The only currently supported feature is the string "IE", corresponding to Internet Explorer.
value	[if IE 7]	An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version. For more information, see Version Vectors.
!	[if !IE]	The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt	[if lt IE 5.5]	The less-than operator. Returns true if the first argument is less than the second argument.
lte	[if lte IE 6]	The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt	[if gt IE 5]	The greater-than operator. Returns true if the first argument is greater than the second argument.
gte	[if gte IE 7]	The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( )	[if !(IE 7)]	Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
&	[if (gt IE 5)&(lt IE 7)]	The AND operator. Returns true if all subexpressions evaluate to true
\|	[if (IE 6)\|(IE 7)]	The OR operator. Returns true if any of the subexpressions evaluates to true.
true	[if true]	Always evaluates to true.
false	[if false]	Always evaluates to false.