5 Sexy CSS Tips You Need In Your Life #3

Roll up! Roll up! 5 more super-handy CSS tips hot off the press:

1. Centre DIV with Dynamic Height

* {
 margin: 0;
 padding: 0;
 }

#page {
 display: table;
 overflow: hidden;
 margin:0px auto;
 }

*:first-child+html #page {
 position:relative;
 } /*ie7*/

* html #page {
 position:relative;
 }/*ie6*/

#content_container {
 display:table-cell;
 vertical-align: middle;
 }

*:first-child+html #content_container{
 position:absolute;
 top:50%;
 }/*ie7*/

* html #content_container {
 position:absolute;
 top:50%;
 }/*ie6*/

*:first-child+html #content {
 position:relative;
 top:-50%;
 }/*ie7*/

* html #content{
 position:relative;
 top:-50%;
 }/*ie6*/

html,body{
 height:100%;
 }

#page{
 height:100%;
 width:465px;
 }

CSS Background-Image Technique

html {
width:100%;
height:100%;
background:url(logo.png) center center no-repeat;
}

CSS + Inline Image Technique

img {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 500px;
 height: 500px;
 margin-top: -250px; /* Half the height */
 margin-left: -250px; /* Half the width */
 }

Table Technique

html, body, #wrapper {
 height:100%;
 width: 100%;
 margin: 0;
 padding: 0;
 border: 0;
 }

#wrapper td {
vertical-align: middle;
text-align: center;
}

3. Remove Dotted Link Borders

 a:focus {
 outline: none;
 }

4. Style Placeholder Text

::-webkit-input-placeholder {
color: red;
}

:-moz-placeholder { /* Firefox 18- */
 color: red;
 }

::-moz-placeholder { /* Firefox 19+ */
 color: red;
 }

:-ms-input-placeholder {
 color: red;
 }

5. Custom Checkboxes and Radio Buttons

 /*
 Hide the original radios and checkboxes
 (but still accessible)

:not(#foo) > is a rule filter to block browsers
 that don't support that selector from
 applying rules they shouldn't

*/
 li:not(#foo) > fieldset > div > span > input[type='radio'],
 li:not(#foo) > fieldset > div > span > input[type='checkbox'] {

/* Hide the input, but have it still be clickable */
 opacity: 0;

float: left;
 width: 18px;
 }

li:not(#foo) > fieldset > div > span > input[type='radio'] + label,
 li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label {
 margin: 0;
 clear: none;

/* Left padding makes room for image */
 padding: 5px 0 4px 24px;

/* Make look clickable because they are */
 cursor: pointer;

background: url(off.png) left center no-repeat;
 }

/*
 Change from unchecked to checked graphic
 */
 li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label {
 background-image: url(radio.png);
 }
 li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label {
 background-image: url(check.png);
 }