iPhone CSS


    <link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
    2009-08-22T15:25:43Z
    
    192
    9
    false
    iPhone CSS
    2009-08-22T15:25:43Z
    7


    body { 
width:100% !important;
margin:0 !important;
padding:0 !important;
line-height: 1.4;
word-spacing:1.1pt;
letter-spacing:0.2pt; font-family: Garamond,"Times New Roman", serif; color: #000; background: none; font-size: 12pt; }

h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; }
h1{font-size:19pt;}
h2{font-size:17pt;}
h3{font-size:15pt;}
h4,h5,h6{font-size:12pt;}

code { font: 10pt Courier, monospace; } 
blockquote { margin: 1.3em; padding: 1em;  font-size: 10pt; }
hr { background-color: #ccc; }

img { float: left; margin: 1em 1.5em 1.5em 0; }
a img { border: none; }

a:link, a:visited { background: transparent; font-weight: 700; text-decoration: underline;color:#333; }
a:link[href^="http://"]:after, a[href^="http://"]:visited:after { content: " (" attr(href) ") "; font-size: 90%; }
a[href^="http://"] {color:#000; }

table { margin: 1px; text-align:left; }
th { border-bottom: 1px solid #333;  font-weight: bold; }
td { border-bottom: 1px solid #333; }
th,td { padding: 4px 10px 4px 0; }
tfoot { font-style: italic; }
caption { background: #fff; margin-bottom:2em; text-align:left; }
thead {display: table-header-group;}
tr {page-break-inside: avoid;} 
    2009-08-04T01:45:35Z
    http://code.google.com/p/hartija/
    188
    9
    false
    hartija css print framework
    2009-08-04T01:45:35Z
    7


    .class {  
    filter:alpha(opacity=50);  
    -moz-opacity:0.5;  
    -khtml-opacity: 0.5;  
    opacity: 0.5;  
}
    2009-06-21T21:57:42Z
    
    181
    9
    false
    cross-browser transparency using css
    2009-06-21T21:57:42Z
    7


    body {
	background: #[hex-color] url([image URL]) [repeat] [attachment] [position];
}

p {
	font: [style] [variant] [weight] [size]/[line-height] [family], [family];
}
    2009-05-10T14:24:28Z
    
    174
    9
    false
    short css
    2009-05-10T14:24:28Z
    7


    a {
	background-color:#fff;
	border-width:1px;
	border-style:solid;
	border-bottom-color:#aaa;
	border-right-color:#aaa;
	border-top-color:#ddd;
	border-left-color:#ddd;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-webkit-box-shadow:2px 2px 2px #bbb;
	
	padding: 10px;
}
a:hover {
	border-top-color:#aaa;
	border-left-color:#aaa;
	border-right-color:#ddd;
	border-bottom-color:#ddd;
	-webkit-box-shadow:0 0 0;
}
    2009-05-01T20:54:16Z
    
    173
    9
    false
    cool link effect with css
    2009-05-01T20:56:36Z
    7


    <html>
<head>
	<style>
		.tee_holder_small {
			background-position:-84px 0;
			background-repeat:no-repeat;
			height:183px;
			width:144px;	
		}
		#smallOverlayHolder{
			position:absolute;
			z-index:10;
			width:228px;
			height:312px;
			padding-left:84px;
			background-repeat:no-repeat;
		}
		#smallOverlayHolder a{
			display:block;
			width:144px;
			height:183px;
		}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
	<script type="text/javascript">
		function toggleSmallTee(smallID,URL){
			var offset = $("#"+smallID).offset();
			$("#smallOverlayHolder").css("left",(offset.left-84)+"px");
			$("#smallOverlayHolder").css("top",(offset.top)+"px");
			$("#smallOverlayHolder").css("backgroundImage",$("#"+smallID).css("backgroundImage"));
			$("#smallOverlayHolder").html('<a href="'+URL+'" onmouseout="toggleSmallTee(\''+smallID+'\',\''+URL+'\')"></a>');
			$("#smallOverlayHolder").toggle();
		}
	</script>
</head>
<body>
	<div id="smallOverlayHolder" style="display:none;"></div>

	<div id="p1727" class="m_b_5 tee_holder_small" style="background-image:url(http://media.typetees.com//product/312x312/1727-tee_large.png)">
		<a href="/product/1727/Actually_medicine_is_the_best_medicine" onmouseover="toggleSmallTee('p1727','/product/1727/Actually_medicine_is_the_best_medicine')">
			<img src="http://media.typetees.com/imgs/tee_small_overlay.png" width="144" height="183" alt="Actually, medicine is the best medicine."/>
		</a>
	</div>
</body>
</html>
    2009-03-22T18:44:40Z
    http://www.typetees.com/
    163
    16
    true
    typetees.com tshirt mouse over effect
    2009-03-22T18:44:40Z
    7


    border-radius: 9px; /* CSS 3 */
-o-border-radius: 9px; /* Opera */
-icab-border-radius: 9px; /* iCab */
-khtml-border-radius: 9px; /* Konqueror */
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px; /* Safari */
    2009-03-14T18:19:21Z
    ie sux (again)
    161
    9
    false
    cross-browser rounded corners using css
    2009-03-14T18:19:21Z
    7


    input { overflow: visible; }
    2009-03-14T15:24:37Z
    ie sux!
    160
    9
    false
    fixing the ridiculous auto-padding in ie (win) submit buttons
    2009-03-14T15:24:37Z
    7


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Demo</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

<script type="text/javascript">
(function ($) {
$.fn.vAlign = function() {
	return this.each(function(i){
	var h = $(this).height();
	var oh = $(this).outerHeight();
	var mt = (h + (oh - h)) / 2;	
	$(this).css("margin-top", "-" + mt + "px");	
	$(this).css("top", "50%");
	$(this).css("position", "absolute");	
	});	
};
})(jQuery);

(function ($) {
$.fn.hAlign = function() {
	return this.each(function(i){
	var w = $(this).width();
	var ow = $(this).outerWidth();	
	var ml = (w + (ow - w)) / 2;	
	$(this).css("margin-left", "-" + ml + "px");
	$(this).css("left", "50%");
	$(this).css("position", "absolute");
	});
};
})(jQuery);

$(document).ready(function() {
	$("#content").vAlign();
	$("#content").hAlign();
});
</script>

<style type="text/css">
html { background: #fafafa; }

#content
{
background: #fff;
border: 10px solid #eee;
padding: 20px;
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 25px;
text-align: justify;
}

#content { width: 400px; }
</style>

</head>

<body>

<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu dui eget nulla condimentum gravida. Vivamus erat leo, ultricies quis, gravida a, fringilla eu, urna. Pellentesque a mauris ac nisl semper egestas. Pellentesque ut elit in pede mattis gravida. Donec ac lectus a nisi suscipit placerat. Maecenas quis ipsum. Pellentesque mattis tellus. Suspendisse sollicitudin accumsan tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed metus. Quisque et leo at erat rutrum lobortis. In tempus lectus eget ligula convallis tristique. 
</div>

</body>
</html>
    2009-02-25T15:21:37Z
    from: http://www.nealgrosskopf.com/tech/thread.asp?pid=37
    154
    16
    false
    CSS Horizontal And Vertical Align JQuery Plugin
    2009-02-25T15:21:37Z
    7


    .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
    2008-11-18T02:28:38Z
    "The problem happens when a floated element is within a container box, that element does not automatically force the container's height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow"

http://www.webtoolkit.info/css-clearfix.html
    108
    9
    false
    css clearfix
    2008-11-18T02:28:38Z
    7