Help
The original posts have had over 13,000 combined views there has been over 420 downloads at my Killersites' Box.net account. My Thanks to everyone that has contributed!
:: Download at Box.net :: http://www.box.net/shared/j2q23gqzue
:: CSS to copy & paste ::
Quote
/* ======== DomainName.com Screen Stylesheet ::
Author: Name, Website
Created: Date Intitals
Updated: Date Initials
TOC: Resets; HTML & Body; Links; Typography; Lists; Tables;
Classes; Template; Navigation; Page Styles; Forms; Other;
----------------------------------------------------------------- */
/* ======== Resets ::
----------------------------------------------------------------- */
body, address, blockquote, h1, h2, h3, h4, h5, h6, p, pre, dl, ol,
ul, dd, dt, li, fieldset, form {margin:0;padding:0;}
/* ======== HTML & Body ::
----------------------------------------------------------------- */
html {font-size:100.01%;height:101%;}
body {
height:100%;
font:62.5%/1.4 Arial,Tahoma,Geneva,Helvetica,sans-serif;
background:#fff;
color:#333;
}
/* ======== Links ::
----------------------------------------------------------------- */
a,a:visited {text-decoration:underline;}
a:active, a:focus, a:hover {text-decoration:none;outline:none;}
a img {border:none;}
/* ======== Typography ::
----------------------------------------------------------------- */
/* ==== Resets for Nested elements
- Helpful for Relative Font Size Sites (Not Needed for Fixed Font Size Sites) ==== */
blockquote p, p blockquote, div div, div li, div p,div dt,div dd,
li li, li li li,ul ul, p address, p pre, pre p,
td address, td h1, td h2, td h3, td h4, td li, td dd, td dt, td p, td pre {font-size: 100%;}
abbr,acronym {text-decoration: none;border:0}
address, h1, h2, h3, h4, h5, h6, dd, dt, li, p, pre {padding:.6em 0;}
h1 {font-size:2.2em;}
h2 {font-size:1.8em;}
h3 {font-size:1.6em;}
h4 {font-size:1.4em;}
h5 {font-size:1.2em;}
h6 {font-size:1.1em;}
address,blockquote,div,dd,dt,li,p,th,td {font-size:1.2em;}
dt {font-weight:bold;}
pre {font-size: 12px;}
q:before,q:after {content:'';}
/* ======== Lists ::
----------------------------------------------------------------- */
dl, ol, ul {margin-left: 20px;}
li, ol, dd, dt {vertical-align:middle;list-style-position: inside;}
/* ======== Tables ::
----------------------------------------------------------------- */
table {
border:none;
border-collapse:collapse;
border-spacing:0;
overflow:hidden;
word-wrap:break-word;
}
caption, th, td {text-align: left;vertical-align:top;}
/* ======== General Purpose Classes ::
----------------------------------------------------------------- */
.alignleft {text-align:left;}
.alignright {text-align:right;}
.center {text-align:center;}
.clear {clear:both;padding:0;margin:0;line-height:0;}
.external {/* if needed with new window JS */}
.floatleft {float:left;}
.floatright {float:right;}
.hidden {display:none;}
.inline {display:inline;}
.large {font-size:20px;font-weight:bold;}
.light {color:#999;}
.png {/* if needed with png fix JS */}
.small {font-size:10px;font-weight:normal;}
/* ======== Template ::
----------------------------------------------------------------- */
#wrap {width:900px;margin:0 auto;}
#header { }
#content { }
#main {float:right;}
#sidebar {float:left;}
#footer {clear:both;}
/* ======== Navigation ::
----------------------------------------------------------------- */
/* ==== Main Menu ==== */
#menu ul {margin:0 auto; list-style: none;}
#menu li {float: left;}
#menu a {display: block;}
/* 2nd Tier Child Menu with accessible drop down method */
#menu li ul {position: absolute;top: -999em;left: -999em;}
#menu li:hover ul, #menu li.hover ul {top: auto;left: auto;}
/* ==== Footer Menu ====- */
#footer ul { }
#footer li { }
#footer li a { }
#footer li a:active, #footer li a:focus, #footer li a:hover { }
/* ======== Page Styles ::
----------------------------------------------------------------- */
/* ======== Forms ::
----------------------------------------------------------------- */
label {cursor:pointer;}
fieldset {border:0;}
input,label,select,textarea {
line-height:1.2;
vertical-align:baseline;
font-size:inherit;
font-family:inherit;
}
input[type="radio"], input[type="checkbox"] {position:relative;top:1.5px;}
input[type="text"],textarea {padding:.2em;}
textarea {overflow:auto;}
/* ======== Other ::
----------------------------------------------------------------- */
There are many helpful tips, suggestions, and solutions posted here in the original forum!
The very first, original thread that started this conversation offers additional information of the origins of these CSS settings and why I use what I do. I explored many CSS reset and CSS framework approaches and realized that they were overkill for the majority of my projects.
This file is not meant to fit everyone's projects and needs. It will reset the most common cross browser inconsistencies and provide a method of organization, commenting, and serve as a foundation to build your own file.
Will you please post any suggestions, changes, or improvements?
Also, please keep replies focused to the subject of initial css files, css reset files, frameworks, etc., to keep this thread a useful tool for everyone at KS.
:: Revision History ::
-> Ver. 2.0 -> 6-7-08 -> New version carried over from original thread and added resets for caption, th, td
-> Ver. 2.1 -> 6-10-08 -> Revised to include basic typography settings suggested by Wickham:
Using a unitless line-height in the body, and fixes for margin and padding in typography section.
-> Ver. 3.0 -> 12-20-08 -> Updated Typography and Form sections. Corrected issue with nested resets. Support for an IE6 hover bug as suggested by Eric (eewatson).
-> Ver. 3.1 -> 9-4-09 -> Updated Resets, Forms, Changed Comment Style, less than 4 rules are written on the same line to conserve space and reduce file size.
.
This post has been edited by shelfimage: 04 September 2009 - 10:25 AM
