CodeKeep CSS Feed

Test

Fri, 09 Mar 2012 08:34:03 GMT

Description: Test

Link: http://www.codekeep.net/snippets/84b1a896-ae52-46c5-bd88-57eb86355782.aspx

.tbMid
{
	border-top:1px solid #39F;
	border-bottom:1px solid #39F;
	float:left;
}

Cross-Browser Auto Vertical/Horizontal Centering (Chrome & Forms Compatible)

Fri, 14 Oct 2011 04:26:27 GMT

Description: A way to do 100% DIVs that adjust to content and center themselves both vertically and horizontally automatically.

Link: http://www.codekeep.net/snippets/99b3644d-6bad-4791-976e-77c75e3434bc.aspx

<style type="text/css">	
        html,body,form {height:100%;margin:0px;padding:0px;}
	html{height:100%;}
	body{height:96%;text-align:center;}/*height 96% fixes scrollbar problems*/
					   /*remove text-align for left justification*/
	form{display:block;}/*chrome & forms*/
	#page{display:table;overflow:hidden;margin:0px auto;padding:0px;min-height:100%;}
 
	*: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%;left:-50%;}/*ie7*/
	* html #content{position:relative;top:-50%;left:-50%;}/*ie6*/
 
	#page{height:100%;width:100%;}
</style>

CSS Align Center

Tue, 27 Sep 2011 00:16:31 GMT

Description: Align all body to center of the screen

Link: http://www.codekeep.net/snippets/5fa4c46b-6853-4bae-99ed-85727262cbda.aspx

<body style="margin:0 auto;">

css two column table

Fri, 09 Sep 2011 17:18:00 GMT

Description: css two column table

Link: http://www.codekeep.net/snippets/ebb74b9f-47ec-4f74-bd35-06253fc05ec1.aspx

<style type="text/css">
#wrap {
   width:600px;
   margin:0 auto;
}
#left_col {
   float:left;
   width:300px;
}
#right_col {
   float:right;
   width:300px;
}
</style>

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
</div>

Boxmodeladderall

Tue, 23 Aug 2011 14:34:16 GMT

Description: classical box model hack

Link: http://www.codekeep.net/snippets/cef1082e-fd16-4095-9317-956ba9f403cc.aspx

div.content { 
  width:400px; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  width:300px;
}

html>body .content {
  width:300px;
}

Fix menu problem in ASP.net pages with Chrome

Thu, 21 Jul 2011 15:17:23 GMT

Description: Fix menu problem in ASP.net pages with Chrome

Link: http://www.codekeep.net/snippets/5c0c64b3-b655-4e16-9d6c-1e8b60469d53.aspx

img[alt='Skip Navigation Links'] {
    display: none;
}

Min-Height-Hack f�r alle Browser

Wed, 23 Feb 2011 15:36:50 GMT

Description: Alle Browser stellne dies dar.

Link: http://www.codekeep.net/snippets/fa19804b-6e87-499b-aefc-8f89f92da582.aspx

#content {
min-height:460px; 
height:auto !important; 
height:460px; 
margin:0 auto; 
width:<?php echo $pagewidth; ?>;
}

CSS conditional coomments CC

Sun, 16 Jan 2011 18:51:31 GMT

Description: CSS conditional coomments CC

Link: http://www.codekeep.net/snippets/41cb3be8-0131-4e41-a816-ef59a5c57087.aspx

< !--[if IE 6]> = explizit Version IE 6    /  (explizit)
< !--[if !IE 6]> = not -Operator   /  (to negate)
< !--[if lt IE 6]> = kleiner als   /  (Less Than)
< !--[if lte IE 6]> = kleiner oder   /  (less or equal)
< !--[if gt IE 6]> = groesser als   /  (greater than)
< !--[if gte IE 6]> = groesser oder gleich   / (greater or equal)

CSS for Web- and/or Maillinks

Sun, 16 Jan 2011 18:48:11 GMT

Description: CSS for Web- and/or Maillinks worked in IE7 IE8b2 FF2 FF3 SF3.1 OP

Link: http://www.codekeep.net/snippets/c5f056ec-17bc-4ea1-81e0-a18c0245f834.aspx

a[href^='http://'] {
    padding-right: 15px;
    background: url(extern.gif) right no-repeat;
}
a[href^='http://www.DOMAIN.com'],
a[href^='http://DOMAIN.com'] {
    padding-right: 0;
    background: none;
}
a[href^='mailto:'] {
    padding-right: 15px;
    background: url(mail.gif) right no-repeat;
}
a[href^='mailto:USER'] {
    padding-right: 15px;
    background: url(USERPIC.gif) right no-repeat;
}

CSS Table with 2 columns

Thu, 21 Oct 2010 20:16:06 GMT

Description: A table designed entirely in CSS with two columns

Link: http://www.codekeep.net/snippets/2e01a275-d6a3-42ff-aa49-913476ad65f7.aspx

/* css table structure */

.table
{    
}
.table col1
{    
}
.table col2
{
    width: 197px;
    margin-left: 197px;
}
.table ul
{
    float:left;
    margin: 0 0 0 25px;
    padding:0;
}
.table ul li
{
    list-style:none;
    padding:3px 5px;
}
.table ul li.even
{
    background:#fff
}
.table ul li.odd
{
    background:#FFFFE6
}

/* end CSS table */

/* HTML */

<div class="table">
            <div class="col1">
                <ul>
                    <li>Name</li><li>
                        <asp:TextBox runat="server" ID="txtName" /></li>
                    <li>Phone</li><li>
                        <asp:TextBox runat="server" ID="txtPhone" /></li>
                    <li>Moving from</li>
                    <li>
                        <asp:TextBox runat="server" ID="txtFrom" /></li>
                    <li>Number of rooms</li>
                    <li>
                        <asp:TextBox runat="server" ID="txtRooms" /></li></ul>
            </div>
            <div class="col2">
                <ul>
                    <li>Address</li><li>
                        <asp:TextBox runat="server" ID="txtAddress" /></li>
                    <li>Postal Code</li><li>
                        <asp:TextBox runat="server" ID="txtPostal" /></li>
                    <li>Moving to</li>
                    <li>
                        <asp:TextBox runat="server" ID="txtTo" /></li>
                    <li>
                        <asp:LinkButton runat="server" ID="lnkSubmit" Text="Request your quote >>" /></li></ul>
            </div>
        </div>

/* end HTML */

CSS Table with 2 columns

Thu, 21 Oct 2010 20:15:26 GMT

Description: A table designed entirely in CSS with two columns

Link: http://www.codekeep.net/snippets/39e041f1-0374-4334-b98f-59abb5af2032.aspx

/* css table structure */

.table
{    
}
.table col1
{    
}
.table col2
{
    width: 197px;
    margin-left: 197px;
}
.table ul
{
    float:left;
    margin: 0 0 0 25px;
    padding:0;
}
.table ul li
{
    list-style:none;
    padding:3px 5px;
}
.table ul li.even
{
    background:#fff
}
.table ul li.odd
{
    background:#FFFFE6
}

/* end CSS table */

/* HTML */

<div class="table">
            <div class="col1">
                <ul>
                    <li>Name</li><li>
                        <asp:TextBox runat="server" ID="txtName" /></li>
                    <li>Phone</li><li>
                        <asp:TextBox runat="server" ID="txtPhone" /></li>
                    <li>Moving from</li>
                    <li>
                        <asp:TextBox runat="server" ID="txtFrom" /></li>
                    <li>Number of rooms</li>
                    <li>
                        <asp:TextBox runat="server" ID="txtRooms" /></li></ul>
            </div>
            <div class="col2">
                <ul>
                    <li>Address</li><li>
                        <asp:TextBox runat="server" ID="txtAddress" /></li>
                    <li>Postal Code</li><li>
                        <asp:TextBox runat="server" ID="txtPostal" /></li>
                    <li>Moving to</li>
                    <li>
                        <asp:TextBox runat="server" ID="txtTo" /></li>
                    <li>
                        <asp:LinkButton runat="server" ID="lnkSubmit" Text="Request your quote >>" /></li></ul>
            </div>
        </div>

/* end HTML */

Reset CSS

Tue, 27 Jul 2010 16:27:48 GMT

Description: A Reset CSS script to minimise the differences between different browsers and help to get a consistent look between them

Link: http://www.codekeep.net/snippets/ec30b9c2-6da4-486e-b454-5178ff04f04e.aspx

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

CSS UNIVERSAL

Tue, 04 May 2010 17:30:20 GMT

Description: CSS UNIVERSAL

Link: http://www.codekeep.net/snippets/f95c12ad-7ce0-45a3-8a2b-bcff65bedfaa.aspx

/* code by Ton Trevisan */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
       margin: 0;
       padding: 0;
       border: 0;
       outline: 0;
       font-size: 100%;
       vertical-align: baseline;
       background: transparent;
}
body {
       line-height: 1;
}
ol, ul {
       list-style: none;
}
blockquote, q {
       quotes: none;
}

/* remember to define focus styles! */
:focus {
       outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
       text-decoration: none;
}
del {
       text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
       border-collapse: collapse;
       border-spacing: 0;
}

Center a div both horizontally and vertically

Tue, 04 May 2010 09:01:02 GMT

Description: A CSS only method of centering a div both horizontally and vertically

Link: http://www.codekeep.net/snippets/97b43cbd-824d-43f6-a9ae-dc979336a4f0.aspx

#outer { 
    position: relative; 
    width: 40%; 
    height: 120px; 
    margin: 20px auto; 
    border: 2px solid #c00; 
} 
#inner { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    top: 10px; 
    left: 50%; 
    margin-left: -50px; /* width/2 */
    background-color: #00c; 
}

Rounded Corners CSS and HTML

Thu, 04 Mar 2010 18:54:55 GMT

Description: Simple markup for rounded corners with CSS and html layout. This does nor render rounded corners in IE

Link: http://www.codekeep.net/snippets/8d0be41f-4277-43b1-8f4d-4862cb7564af.aspx

<html>
<head>
<style type="text/css">
#container #surface {
-moz-box-shadow:1px 2px 6px rgba(0, 0, 0, 0.5);
background:none repeat scroll 0 0 #E9EAEE;
border:2px solid #FFFFFF;
margin:0 auto;
padding:5px 5px 5px;
text-align:center;

}

#Surface
{
	-moz-border-radius: 10px 10px 10px 10px;
}

</style>
</head>
<body>

<div id="container"
  <div id="surface" >  
      	<textarea readonly="readonly"  id="code"></textarea>
  </div>
</div>


</body>
</html>

Engraved hr

Thu, 18 Feb 2010 14:14:41 GMT

Description: It shows hr as at http://trreed.com/

Link: http://www.codekeep.net/snippets/25f1ba41-e0b8-492b-be2d-7e3890c4b62c.aspx

.divide {
	display:block;
	width:100%;
	height:1px;
	margin-top:40px;
	background:#0f1419;
	border-bottom:1px solid #505f6e;
}

Layout Using Div

Mon, 25 Jan 2010 05:14:55 GMT

Description: Layout Using Div

Link: http://www.codekeep.net/snippets/cb6b0d08-a068-49b3-bdfb-915d7d3dade6.aspx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<style>
		html
		{
			font-family:Verdana, Sans-serif;
			font-size:12px;
		}
		#header
		{
			width:800px;
			margin-left:auto;
			margin-right:auto;
			text-align:center
		}
		#footer
		{
			width:800px;
			margin-left:auto;
			margin-right:auto;
			text-align:center
		}
		#content
		{
			width:800px;
			margin-left:auto;
			margin-right:auto;
			border:solid 1px black;
		}
		#left
		{
			position:relative;
			float:left;
			width:200px;
			padding:10px;
			border-right:solid 1px black;
		}
		#right
		{
			position:relative;
			float:left;
			padding:10px;			
		}
		#clear
		{
			clear:all;
		}
	</style>
</head>
<body>
	<div id="header">
		<h1>Header</h1>
		<table>
			<tr>
				<td>Home</td>
				<td>Home</td>
				<td>Home</td>
			</tr>
		</table>
	</div>
	
	<br />
	
	<div id="content">
		<div id="left">
			<h1>Left</h1>
			The quick brown fox jumps over the lazy dog<br />
			The quick brown fox jumps over the lazy dog<br />
			The quick brown fox jumps over the lazy dog<br />
			The quick brown fox jumps over the lazy dog<br />
		</div>
		<div id="right">
			<h1>Right</h1>
			The quick brown fox jumps over the lazy dog<br />
			The quick brown fox jumps over the lazy dog<br />
			The quick brown fox jumps over the lazy dog<br />
			The quick brown fox jumps over the lazy dog<br />
			<br id="clear" />
		</div>
	</div>
	
	<br />
	
	<div id="footer">
		<h1>Footer</h1>
		Copyright &copy; EPSON Precision Phils., Inc.<br />
		For details, contact the webmaster <a href="#">webmaster@eppi.epson.com.ph</a>
	</div>
</body>
</html>

Cross Browser Min Height

Sun, 01 Nov 2009 12:55:12 GMT

Description: hack for minimum height

Link: http://www.codekeep.net/snippets/bae9f62a-b030-46b2-8d60-f860f5b6ed66.aspx

#container{
   
      height:auto !important;/*all browsers except ie6 will respect the !important flag*/
   
      min-height:500px;
  
      height:500px;/*Should have the same value as the min height above*/
  
}

Pocket PC Help CSS file

Thu, 10 Sep 2009 23:10:09 GMT

Description: This is the help.css file mentioned in my other HTML Posts for the Pocket PC Help Pages.

Link: http://www.codekeep.net/snippets/5bfe6d11-199f-40e2-bdab-3e49d4644293.aspx

body
{
	padding: 2px 2px 2px 2px;
	margin: 0;
	line-height: 1em;
	background: #D3D3D3;
	color: #383838;
	font: 8pt TAHOMA;
	
}
h1
{
	color: navy;
	font: bold 9pt TAHOMA;
}
h2
{
	color: navy;
	font: bold 8pt TAHOMA;
	background: #CCCCFF;
	text-align: center;
}
h3
{
	font: bold 8pt TAHOMA;
}
h4
{
	font: italic bold 8pt TAHOMA;
}
h5
{
	font: italic 8pt TAHOMA;
}
#title
{
	background-color: Navy;
	width: 240px;
	padding: 5px 5px 5px 5px;
	color: white;
	font: bold 9pt TAHOMA;
}
#main
{
	background-color: White;
	font: 8pt TAHOMA;
	width: 240px;
	padding: 5px 5px 5px 5px;
	border-left: 1px solid navy;
	border-right: 1px solid navy;
	border-bottom: 1px solid navy;
}
.table
{
	width: 100%;
	border: solid 2px #383838;
	border-collapse: collapse;		
}
td
{
	border: solid 1px #383838;
	padding-left: 5px;
	padding-right: 5px;
}
tr
{
	border: solid 1px #383838;
}
.table .header
{
	font: bold 8pt TAHOMA
}
.table .headercenter
{
	font: bold 8pt TAHOMA;
	text-align: center;
}
.table .data
{
	font: 8pt TAHOMA
}
.table .dataCenter
{
	font: 8pt TAHOMA;
	text-align: center;
}
#footer
{
	width : 240px;
	text-align: center;	
}

ModalBackgroundCss

Fri, 28 Aug 2009 14:48:14 GMT

Description: modal background CSS for ModalPopupExtender

Link: http://www.codekeep.net/snippets/2b627664-9432-40ea-b3d8-60ef404dbd98.aspx

.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}

Align

Fri, 27 Mar 2009 08:51:58 GMT

Description: Align's the first of 2 items (on one line). usefull with forms to have all labels ligned up and all textboxes. Without the need for div's, table or a break between the label and the box.

Link: http://www.codekeep.net/snippets/00b36409-1fde-456a-b465-91a2909d3cd1.aspx

    width: 150px;
    display: block;
    float:left;

Style information for a DIV container that'll center your stuff in a webpage

Thu, 26 Mar 2009 09:51:33 GMT

Description: I found this on flumpcakes.co.uk, if you create a div on your webpage with an id of container then this bit of code in your stylesheet will center your page.

Link: http://www.codekeep.net/snippets/fad442e4-0537-4c55-bd3e-e2b1a6f9c356.aspx

body {text-align: center; /* for IE */}
	
#container {
	margin: 0 auto;   /* align for good browsers */
	text-align: left; /* counter the body center */
	width: 80%;
	min-width:800px;
}

Remember "LoVe/HAte" linking

Mon, 02 Feb 2009 16:17:38 GMT

Description: REF http://www.mezzoblue.com/css/cribsheet/

Link: http://www.codekeep.net/snippets/43eababc-b352-4d13-8e50-e6ea606da243.aspx

When specifying link pseudo-classes, always do so in this order:  
Link, Visited, Hover, Active. Any other order won't work consistently. 
Consider using :focus as well, and modify the order to LVHFA 
(or "Lord Vader's Handle Formerly Anakin", as suggested by Matt Haughey)

Set a Float to Fix a Float - Containing Floats

Mon, 02 Feb 2009 16:07:43 GMT

Description: Eric Myers method - http://www.complexspiral.com/publications/containing-floats/

Link: http://www.codekeep.net/snippets/39695975-ee3c-436b-84ab-0efbf99e9695.aspx

    <div class="item">
        <img src="w6144.gif">
        Widget 6144
        <br>
        $39.95
    </div>
    <div class="item">
        <img src="w6145.gif">
        Widget 6145
        <br>
        $44.95
    </div>
    <div class="clearer">
        &nbsp;</div>
    <p>
        Widgets are sold on an "as is" basis without warranty or guarantee.</p>

CSS Image Replace

Sat, 24 May 2008 19:04:46 GMT

Description: Using CSS, replace a div area with an image

Link: http://www.codekeep.net/snippets/66aa5355-ec61-4fdb-8c2f-2acd98e4e6cc.aspx

#ID_OF_ELEMENT {
    padding: HEIGHT_OF_IMAGEpx 0 0 0;
    overflow: hidden;
    background-image: url("hello_world.gif");
    background-repeat: no-repeat;
    
    height: 0px !important;
    height /**/:HEIGHT_OF_IMAGEpx;
}