Never been to CodeSnippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world (or not, you can keep them private!)

49 total

On This Page:

  1. 1 css :: external vs embedded css
  2. 2 CSS objet to manipulate classes
  3. 3 IE Conditional CSS Statements
  4. 4 Vertical Middle DIV
  5. 5 Defeating RickRolls with CSS
  1. 6 CSS image floats no text wrap
  2. 7 Cross-browser solution for adding hover border to linked images
  3. 8 Standard CSS helpers
  4. 9 Remove border from images when linked
  5. 10 CSS Overflow Vertical Only

css :: external vs embedded css

to css by vindigo on Sep 26, 2008 1 Comments
// description of your code here
external vs embedded css
// external css
<link rel="stylesheet" href="xmlCom.css" type="text/css">

// embedded css
<style type="text/css"> 
   // code goes here
</style>

CSS objet to manipulate classes

to css javascript web by raziel on Sep 15, 2008
Provides 3 functions to manipulate CSS in a element
css.hasClassName(elem, className);
css.addClassName (elem, className);
css.removeClassName (elem, className);

var css = function() {
	var private_var;
	function private_method() {
		// do stuff here
	}
	return {
		hasClassName : function(elem, className) {
			return (elem.className.indexOf(className) != -1);
		},
		addClassName : function(elem, className) {
			this.removeClassName(elem, className);
			elem.className = (elem.className + " " + className).trim();
		},
		removeClassName : function(elem, className) {
			elem.className = elem.className.replace(className, "").trim();
		}
	};
}();

IE Conditional CSS Statements

to css ie by anemic on Sep 09, 2008
IE conditional statements for style sheets. Firefox and Safari read as comment and will not render. 
# External CSS 
<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

# Embedded CSS
<!--[if IE]>
  <style type="text/css">
    #container {font-family: arial,verdana,sans-serif,tahoma;}
  </style>
<![endif]-->

# The opposite technique, targeting only NON-IE browsers:
<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

# Target specific versions of IE
# IE 7 ONLY:
<!--[if IE 7]>
	<link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->

# IE 6 ONLY:
<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />
<![endif]-->

# IE 5 ONLY:
<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="IE-5-SPECIFIC.css" />
<![endif]-->

# IE 5.5 ONLY:
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="IE-55-SPECIFIC.css" />
<![endif]-->

# VERSION OF IE VERSION 6 OR LOWER: (I find this one pretty handy)
<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
<![endif]-->

Vertical Middle DIV

to css by Dino on Jul 10, 2008
// description of your code here
Vertical Middle DIV.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Example 7: Vertical alignment of content with JavaScript &amp; CSS</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
        <!--
			body {
				margin: 0;
				padding: 0;
				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
				text-align: center; /* Takes care of horizontal alignment in Internet Explorer */
				background-image: url(grid.gif);
			}
			#content {
				position: relative; /* Needed for Safari */
				margin: auto; /* Takes care of horizontal alignment in standards compliant browsers */
				text-align: left;
				width: 200px;
				height: 200px;
				background-color: #fc0;
			}
			h1, p {
				margin: 0;
				padding: 1em;
			}
			h1 {
				font-size: 12px;
				line-height: 1.5em;
			}
        -->
        </style>
		<script type="text/javascript">
		<!--
		function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function setContent() {
			if (document.getElementById) {
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) {
					var contentElement = document.getElementById('content');
					var contentHeight = contentElement.offsetHeight;
					if (windowHeight - contentHeight > 0) {
						contentElement.style.position = 'relative';
						contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
					}
					else {
						contentElement.style.position = 'static';
					}
				}
			}
		}
		window.onload = function() {
			setContent();
		}
		window.onresize = function() {
			setContent();
		}
		//-->
		</script>
	</head>
	<body>
		<div id="content">
			<h1>Content</h1>
			<p>This content should be centered in your browser window. CSS is used for horizontal alignment, while scripting is used for vertical alignment.</p>
		</div>
	</body>
</html>

Defeating RickRolls with CSS

to css rickroll by mac_ on Apr 07, 2008 1 Comments
Add this CSS to your user stylesheet for a graphical indicator that you're about to get rickroll'd.

a[href*="youtube.com/watch?v=eBGIQ7ZuuiU"],
a[href*="youtube.com/watch?v=oHg5SJYRHA0"] {
    display: block;
    display: inline-block;
    width: 247px;
    height: 229px;
    background-image: url(http://farm3.static.flickr.com/2325/2394457221_aec683d4f0_o.png) ! important;
    border: 1px dashed black;
};

CSS image floats no text wrap

to css by jamespro on Oct 24, 2007
Credit goes to:

http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/

.callout {
float:left;
width:275px;
}

.callout h3 {
width:115px;
height:65px;
float:left;
text-indent:-8008px;
background:transparent url(team-report.gif) no-repeat 0 0;
}

.callout * {
width:160px;
float:right;
}

.callout * * {
width:auto;
float:none;
}

Cross-browser solution for adding hover border to linked images

to css images cross-browser hover by mediagirl on Sep 14, 2007
// The class is assigned to the href.

.borderit img {
	border: 1px dashed #776e09;
	padding: 2px;
}
.borderit:hover img {
	border: 1px solid #fff71c;
	padding: 2px;
}
.borderit:hover {
	color: red; /* irrelevant definition to overcome IE bug */
}

Standard CSS helpers

to css xhtml html webdev web style stylesheet by jamiew on Aug 28, 2007
Some really common layout classes I use in almost every CSS file.

/********* helpers *********/
.floatRight { float: right; }
.floatLeft  { float: left; }
.right  { text-align: right; }
.left   { text-align: left; }
.center { text-align: center; }
.clear, .clearer { clear: both; }
.block  { display: block; }

Remove border from images when linked

to css by deckard on Jun 30, 2007
// description of your code here

img {
 border-style: none;
}

CSS Overflow Vertical Only

to css by therad on May 22, 2007
Will always have the vertical scrollbar and no horizontal scrollbar. Horizontal can be done by using -x

overflow-y: scroll;
49 total

On This Page:

  1. 1 css :: external vs embedded css
  2. 2 CSS objet to manipulate classes
  3. 3 IE Conditional CSS Statements
  4. 4 Vertical Middle DIV
  5. 5 Defeating RickRolls with CSS
  1. 6 CSS image floats no text wrap
  2. 7 Cross-browser solution for adding hover border to linked images
  3. 8 Standard CSS helpers
  4. 9 Remove border from images when linked
  5. 10 CSS Overflow Vertical Only