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...

#MyDiv {
margin : 10px 10px 10px 10px;
}

/* IE6 Only */
* html #MyDiv {
margin : 5px 5px 5px 5px;
}

/* IE7 Only */
*:first-child+html #MyDiv {
margin : 2px 2px 2px 2px;
}


(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 LINK


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;
height:50px;
}

* 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.