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.

IE6 CSS Hack as well as IE7 CSS Hack
I prefer not to use css hacks BUT sometimes we need them so here goes... 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]-->

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

(Credit to: mdibb.co.uk)

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>
</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;

OR

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-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;
}
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;
float:left;	
margin-right: 10px;
background: url(http://images.thenestbaby.com/registry/bullet.gif) 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 {
padding-left:0;
margin:0;
list-style-type:none;
}

.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 {
padding-left:0;
margin-left:0;
}

#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>
</ul>
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

.retailer { margin-right:1em; display:block; width:100px; height:100px; background: #F3F2E2 url(http://www.aperfectmix.com/free_web_design/image/costa_rica.jpg) 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

Centering a div

Method 1:
#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 {
	position:absolute;
	left:50%;
	width:500px;
	margin-top:50px; 
	margin-left:-250px; /* Set to half width. */
	padding:15px;
	border:1px dashed #333;
	background-color:#eee;
	}
    
    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 - http://www.sitecrafting.com/blog/to-center-div/

CSS Background Roll Overs:
Here are links to various CSS popup explanations I found useful: