Skip to content

Instantly share code, notes, and snippets.

@jackilyn
jackilyn / css-browser-hacks.txt
Created January 3, 2012 08:31
Comprehensive List of Browser-Specific CSS Hacks
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
@jackilyn
jackilyn / html-conditional-classes.txt
Created January 3, 2012 08:33
<html>'s Conditional Classes
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
@jackilyn
jackilyn / Error Pages
Created January 3, 2012 08:58
HTAccess Snippets
ErrorDocument 400 /errors/badrequest.html
ErrorDocument 401 /errors/authreqd.html
ErrorDocument 403 /errors/forbid.html
ErrorDocument 404 /errors/notfound.html
ErrorDocument 500 /errors/server.html
@jackilyn
jackilyn / gist:1572851
Created January 6, 2012 23:01
Center a <div> with Dynamic Height
<style>
* {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*/
@jackilyn
jackilyn / gist:1572855
Created January 6, 2012 23:02
Tiny Clearfix
.cf:before, .cf:after {content:""; display:table;} .cf:after {clear:both;} .cf {zoom:1;}
@jackilyn
jackilyn / gist:1572874
Created January 6, 2012 23:08
Center a <div> Horizontally and Vertically
/*
Negative margins are exactly half the height and width, which pull the element back into perfect center.
Only works with elements of a fixed height/width.
*/
.center {
position: absolute;
left: 50%;
top: 50%;
@jackilyn
jackilyn / gist:1572967
Created January 6, 2012 23:22
Fancy Ampersands
<style>
.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}
</style>
<h1>Script <span class="amp">&amp;</span> Style</h1>
@jackilyn
jackilyn / gist:1602850
Created January 12, 2012 20:17
Text Selection CSS
/* Mozilla based browsers */
::-moz-selection {
background-color: #FFA;
color: #000;
}
/* Webkit based browsers */
::-webkit-selection {
background-color: #FFA;
color: #000;
@jackilyn
jackilyn / gist:1602877
Created January 12, 2012 20:21
CSS Triangles
<style>
.triangle-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.triangle-down {
@jackilyn
jackilyn / gist:1602888
Created January 12, 2012 20:22
Font Stacks
/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
/* Helvetica/Arial-based sans serif stack */