Common CSS Mistakes
- When specifying one of the "background-*" properties, especially
background-image
, be careful that you don't include values for any of the other "background-*" properties, e.g.background-position
andbackground-repeat
, along with the proper value. Either use the shorthand "background
" property or specify the properties separately. - Missing units. There are several units of linear measurement in CSS, one of the most common is pixels (px) which is the same unit of measurement that HTML attributes use.
- The z-index property only applies to elements with a 'position' property set to something other than 'static', which is the default.
- The
top
,left
,bottom
, andright
properties only apply to relatively or absolutely positioned elements. ("position:fixed
" is considered a form of absolute positioning.) :link
,:visited
,:hover
,:focus
,:active
should be used in that order. (I, for one, very rarely use the ":link" pseudo-class.)position:relative
moves the element from where it would normally render and leaves the space that it would normally occupy there.- Forgetting to always specify a background color for a page. The background is usually white by default, but you can not rely on that.
- Guidelines about how to use CSS with XHTML and XML properly.
- Relative positioning should only be used to slightly adjust the position of elements, not to layout a page. Use floats, margins and, when needed, absolute positioning instead.
- Don't overuse absolute positioning.
- Placing
@import
rules where they aren't allowed. "CSS 2.1 user agents must ignore any '@import' rule that occurs inside a block or after any valid rule other than an@charset
or an@import
rule."
Last update: 2012-02-14