Cowboy Tom Mix and Kid

CSS Examples:

The page is dedicated to all those CSS solutions I have found over time that I never wanted to lose track of. Some really great stuff here, Enjoy! Below you will see a mixture of both links and code.

Conditional divs that help you target specific IE's <!--[if IE]><div id="ieAll"><![endif]--> <!--[if IE 8]><div id="ie8only"><![endif]--> <!--[if lte IE 8]><div id="ie8down"><![endif]--> <!--[if IE 7]><div id="ie7only"><![endif]--> <!--[if (IE 6)|(IE 7)]><div id="ie6-7"><![endif]--> <!--[if IE 6]><div id="ie6only"><![endif]--> Then close it: <!--[if IE 7]>--></div> <!--<![endif]-->
An excellent tool for understanding how selectors work.

/* Firefox Picks Up The !important IE 6 and 7 do not */
#FireFux {
width:100px !imporant; width:50px;

Selecting a child
tr:nth-child(2n+1) - Represents every odd row of an HTML table
tr:nth-child(odd) - Same
tr:nth-child(2n+0) - Represents every even row of an HTML table */
tr:nth-child(even) - Same
p > span - A span element child of an p element
E:nth-child(n) /* An E element, the n-th child of its parent
div > p:first-child /* Represents the p element that is the first child of a div element

The last P before the note.

The first P inside the note.

ol > li:last-child - Represents a list item li that is the last child of an ordered list ol.

Drilling down further
tr > td:last-of-type Represents the last data cell td of a table row tr.
p::first-letter { color: green; font-size: 200% } - first letter of each P element will be green with a font size of '+200%'.
div p *[href] - represents an element that (1) has the href attribute set and (2) is inside a p that is itself inside a div:

Selecting an element that contains a class
p.classy - Selects any paragraph element with class classy.

Learn more about selectors at See a bunch of great examples on their tests page.




<div id="testy"> <p>1</p> <p>2</p> <p>3</p> </div> The style: #testy p:nth-child(2) {background-color:#ff0000; color:#ff0000;}
How to Center an Image with CSS
Set the image to a block level element then do margin auto. Below you will see an image horizontally centered image within a div.
#myImage {display:block; margin: 0 auto 0 auto;}
Fluid Top Nav with Fixed width left and right aligned blocks (Works in IE 6 and above)
See fluid nav with fixed width left and right elements example. See discussion on StackOverflow.

Remove Grey Dotted Border using CSS
Remove the grey dotted border around image links for both IE 8 and Firefox using CSS. /* No selectors needed - Removes grey dotted border around focused links IE8/FF */ :focus {outline:none;} ::-moz-focus-inner {border:0;}
Forcing Word Wrapping
Cross browser compatable method to wrap a link that exceeds its containing elements width.
The problem (The link is too long and overlaps)
A solution:
ul.wordWrapSolution {margin:0;} .wordWrapSolution li { width:150px; float:left; list-style-type:none; padding: 0 5px 0 0; } .wordWrapSolution li a { width:150px; white-space: -moz-pre-wrap; /* Mozilla */ word-wrap: break-word; /* IE 5+ */ border:1px #999 dashed; }
Forcing No Wrap
Cross browser compatable method to prevent text from wrapping. .noWrappin li { width:100px; border:1px dashed; white-space: nowrap; } More info:

Turn a link into a button

Get Sample - (Same link without style)

* The above is a anchor link styled with a background, padding, etc to look like a button
Search icon to an input field
.search { padding:3px 6px 3px 20px; width:275px; font-size:14px; background-image: url("image/searchinput.gif"); background-position: -2px 3px; background-repeat: no-repeat; }
Different States of a link to be applied to a class:
a.linky, a:hover.linky, a:active.linky, a:visited.linky {color:FF0000; font-weight:bold;}

OR defining links for an entire page
a:link, a:visited, a:active, a:hover {color: #FF0000;}

OR defining links for a specific DIV ID
#LinkDiv a:link, #LinkDiv a:visited, #LinkDiv a:active, #LinkDiv a:hoover {color: #FF0000;}

Thanks Román! Check out Román Cortés page.

LINKY via Class a.linky a:hoover.linky etc

Double Class:
You can in fact apply two classes to the same element. Thought I would share since I tried going about this the wrong way. Thanks Josh.

<span class="ClassNameOne ClassNameTwo">Blah Blah Blah</span>

Multiple Columns with CSS

Easy to implement and cross browser, cross platform compatible. Make sure that you include <div style="clear:both;"></div> after your columns so that subsequent information is displayed below your "table" and not to the right or left. (Thank you Maria!)

#main {width:600px;border:1px solid orange;}
#column1 {float: left;margin: 1em; background-color:red; width:150px; height:150px;}
#column2 {float: left;margin: 1em; background-color:blue; width:150px; height:150px;}
#column3 {float: left;margin: 1em; background-color:yellow; width:150px; height:150px;}

<div id="main">
	<div id="column1"></div>
	<div id="column2"></div>
	<div id="column3"></div>
<div style="clear:both;"></div>

Font Styling
Welcome to the world of font styling using CSS. An interesting article can be found here.
body {
font-family: "Trebuchet MS", arial, sans-serif;
font-size: 11px;


font:12px "Trebuchet MS", arial, sans-serif;
color: #5F3E31;
line-height: 14px;
margin: 0;
padding: 0;
text-align: center;
Default font property values:
element {
font-style: normal;
font-weight: normal;
font-size: inherit;
line-height: normal;

Fun with Lists

This is a list I was messing around with dealing with the list items floating left. The number of columns depends on the width settings.
ul.list {width: 420px; border:1px solid;}

ul.list li {
width: 190px;
margin-right: 10px;
background: url( no-repeat 4px left;
padding-left: 10px;

* html ul.list li 
{width: 187px;}

.regText {
font-family: arial, verdana;
color: #5f3e31;
font-size: 10px;
font-weight: bold;

  • I am a list item look at me.
  • I am a list item look at me.
  • I am a list item look at me.
  • I am a list item look at me.
  • I am a list item look at me.
  • I am a list item look at me.

Basic list with a background image controled by pixel spacing:

ul.gwc_list {

.gwc_list li {
background: url(image/blm_gwc_dot.gif) no-repeat 5px 2px;
padding-left: 7px;

Example of a basic list with indenting removed:
#guide_list {

#guide_list li {
list-style-type: none;

<ul id="guide_list">
<li><strong<a href="#">One</a></strong></li>
<li><strong><a href="#">Two</a></strong></li>
<li><strong><a href="#">Three</a></strong></li>
<li><strong><a href="#">Four</a></strong></li>
What it looks like:

Positioning of Background Image - Several Roll Over Type Effects Using CSS (Sprites):
*Using just one image and shifting it around. Click here to view background image.
test test test
test test test

.backSpot { margin-right:1em; display:block; width:100px; height:100px; background: #F3F2E2 url( no-repeat; text-indent: -1000px; } .tucan { background-position:-100px 0px; } .tucan:hover { background-position:0px 0px; } .cougar {background-position:-100px 0px; } .cougar:hover { background-position:0px -100px; } .frog {background-position:-100px 0px; } .frog:hover { background-position:0px -200px; } .butterfly{background-position:-100px 0px; } .butterfly:hover { background-position:0px -300px; } .i{ background-position:-100px 0px; } .i:hover { background-position:0px -300px; } .j{background-position:-100px 0px; } .j:hover { background-position:0px -300px; } Learn more about sprites at Smashing Magazine. Also see the Site Point article. Or this W3School Article

Buy Buttons using Sprite as background:

Both buttons use the same background image. The only differece is in the positioning.

Here is the actual background image:
<style> .orangeBuyBtn { background: url('buyButtons-bg.gif') repeat-x 0 0; border-color: #5B5752 #6B6B6B #808080; border-style: solid; border-width: 1px; color: #FFFFFF; cursor: pointer; font-size: 14px; font-weight: bold; } .greenBuyBtn { background: url('buyButtons-bg.gif') repeat-x 0 -24px; border-color: #5B5752 #6B6B6B #808080; border-style: solid; border-width: 1px; color: #FFFFFF; cursor: pointer; font-size: 14px; font-weight: bold; } </style>

Fun with backgrounds and CSS:

Value Description
background-color Specifies the background color to be used
background-image Specifies the background image to be used
background-repeat Specifies how to repeat the background image
background-attachment Specifies whether a background image is fixed or scrolls with the rest of the page
background-position Specifies the position of the background image
inherit Specifies that the setting of the background property should be inherited from the parent element

Repeat Horizontally - background:url(image/kitty-bg.jpg) repeat-x;

Repeat Vertically - background:url(image/kitty-bg.jpg) repeat-y;

Repeat Both - background:url(image/kitty-bg.jpg) repeat;

Background Position - background:url(image/kitty-bg.jpg) no-repeat 10px 20px; X then Y:

Background Position - background:url(image/kitty-bg.jpg) right center;

Centering a div
Also see my example of
centering a two column div compatible with IE's. Vertical & Horizontal - Check out Dead Center (IE 6 compatible)

Method 1:
<div style="text-align: center;"> <div style="margin: 0 auto;">Content Here. 0 = Vertical Auto = Horizontal Centering</div> </div> #CenterMe2 { width:500px; margin: 0 auto; border:1px solid #FF0000; text-align:left; } IE is retarded so you have to use the text-align:center; tag on the outside div then text-align:left; on the inside div

Method 2:
body {margin:0px; padding:0px;}

#CenterMe {
	margin-left:-250px; /* Set to half width. */
	border:1px dashed #333;
    body {margin:0px; padding:0px;} 
/* You should set body margin and padding 4 browser consistency. */
Credit to Blue robot
Another good article on this

Another Example -

Vertical Alignment
Goal is to vertical align an element within another element.

Method 1 (using absolute positioning)
Centered (No IE =[ )

Method 2:
Centered (No IE =[ )

Vertical Align Articles
- - Great instructional article.
- - Offers good solutions.
- (absolute positioning)
- - Another solution
- Javascript Solution
- My IE6 example
Position a div in a fixed position at the bottom of a page
position:fixed; sets the div in a fixed position. The fixed property absolutely positions the div element relative to the browser window. Learn more here.
Fixed Div - Works in IE
View source to see conditional CSS used.

See stack overflow

Background Positioning:
W3 School page on backgrounds
CSS Pop Ups:
Here are links to various CSS popup explanations I found useful: