PositioningOnly block level elements have margin and padding
Use even numbers to avoid covering 99% of the page
Use margin:0 auto and width:980px to center all container divs
Avoid using absolute or relative positioning on main content divs
Use a fixed width for all relatively positioned text to make sure it does not overflow its parent div or become truncated
Use block level tags around all inline elements so that no inline elements are a direct child of the container divs. Remember to set the dimensions of the inner blocks to be less than the dimensions of the container divs.
Use position:relative and left:xxx(where xxx is equal to the remaining space between the start of column and the edge of the window) to remove the space between the rightmost column of the layout and the body.
Use margin-left:xxx(where xxx is the same as above) as well as margin-right:yyy(where yyy is the minimum value needed to make the column visible) to achieve the same effect
Use position:relative when attempting to move elements within a container without moving any neighboring elements instead of using margin and padding adjustments
Use visibility:hidden instead of display:none to create a placeholder for unseen elements
Use display:block or vertical-align: bottom on images inside tables to avoid extra whitespace
Use display:table, display:inline-block, or display:compact instead of floats to align block level elements horizontally
Use display:block and set both width and padding values to align inline elements vertically and to align wrapping text and links
Use margin: 0 auto on elements with a width defined in pixels to center block level tags horizontally
Specify the line height to be the same as the height of the containing element to vertically center inline text
Use margin-top: xxx (where xxx is equal to the height of the container div minus the height of the centered element). Divide this value by two to vertically center a block element
Use margin-left: xxx (where xxx is equal to the width of the container div minus the width of the centered element). Divide this value by two to horizontally center a block element.
Use top: 50% and margin-top: -xxx(where -xxx is equal to half of the defined height in pixels) to center absolutely positioned content vertically
Use left: 50% and margin-left: -xxx(where -xxx is equal to half of the defined width in pixels) to center absolutely positioned content horizontally.
You may have to adjust the calculated margin-left values by about 10 pixels in IE specific styles sheets or conditional comments to account for box model differences.
Use position: absolute; bottom: 0; as well as the following steps to align a footer div with the end of a page at any resolution. Next create a container div that is the parent of every other div with position: relative; min-height: 100%; height: 100%. Then set the html and body tags to height:100%. Finally, add bottom padding to the main content div and margin-bottom:-xxx (where -xxx is equal to the height of the footer) to separate it from the footer. The padding may differ between IE and other browsers, so use a separate style sheet or conditional comments if necessary.
Use position:relative with left/right/top/bottom adjustment instead of floats for better cross browser consistency when laying out container elements
Use position:absolute or position:relative with margin adjustments instead of static positioning padding adjustments for better cross browser consistency when laying out content
Use absolute positioning to show important content(Headers, Breaking News) before the rest of the relative content loads
Create space on the page for absolute content by applying margins for the static content which is greater than the width or height of the absolute content
Use absolute positioning with margin shifting to reposition a class of elements (menu titles, footer text, gallery links) at once without giving them the same coordinates
Use vertical-align to center images and text on the same line. Don’t use the sub, super, text-top, or text-bottom values for cross browser consistency
Use list-style-type:none for a >ul< element, display:inline for its >li< elements, and add right side padding or margin for the >a< or >span< tags within to create a horizontal list that can used for tabs, menus, thumbnails, screenshots, etc.
Use display:table for the container div, display:table-row for the parent div, and display:table-cell for the nested divs to create rows and columns in standards compliant browsers.
Use the display:table-cell divs as a container to divide a large row into multiple div blocks for any column
Use display:block for the container div and parent div plus display:inline and zoom:1 for the nested divs to create rows and columns in IE6.
Use display:-moz-inline-box; and display:inline-block; for the container divs to create grids that don’t require zoom:1 or display:table. Remember to still use display:inline for the nested divs to support IE6.
Use vertical-align:top with display:-moz-inline-box to display content consistent with the behavior of display:inline-block on other browsers
If you use overflow:hidden with -moz-inline-box, set a fixed width for the container.
Use display: -moz-inline-box; -moz-box-orient:vertical; to create an inline box with vertically aligned block level child elements
Use display: -moz-inline-block; to create a thumbnail gallery using list elements that wrap and align consistently without floats
Set display properties (text-align, vertical-align,etc)on the parent element if they do not work on the
element itself
Set both the left margin and left padding of the list elements and avoid line-height for consistent placement of bullets across browsers.
Never float two or more columns to the same side, put each pair of left and right floated elements in a wrapper div big enough to contain both elements and padding
Use margin-right:auto with margin-left:0 and text-align:left to left align an hr tag across browsers
Nest an absolute-positioned element within a relative-positioned container with set width and height to freely position a block within a certain area
Use table{caption-side:bottom;} to move a table caption below the table instead of the default position above the table
Use absolute positioning with percentages for the simplest, most consistent display of troublesome elements
Use ‘text-indent: 0′ on elements that are specified ‘display:inline-block’ to avoid inheritance issues
Specify the line height to be the same as the height of the box to align text vertically
Don’t use percentages for margins or borders
Vertical margins and text alignment only apply to block elements
The vertical-align only applies to inline and table-cell elements
Use divs instead of paragraphs when margins don’t take effect
Use position:relative on any elements which need to have a z-index value
If you want relatively positioned elements in one div to overlap relatively positioned elements in another div, you have to raise the z-index of the entire div, or combine the content into the one container div
If you want one element to paint on top of everything else, but you want a child of that element to be behind everything else, make that element the only relatively positioned element, then position the child with a negative z-index.
TypographyNever define font-size for an element without defining it’s line-height
Never use italics
(font-size + vertical padding + vertical margin)/line-height for each element must be a multiple of a baseline number
(font-size + vertical padding + vertical margin) * line-height gives you the total height of each row of text.
Use percentages for all fonts to allow for browser selectable sizing
Never set percentages directly on a tag, always reference an ID or class to avoid cascading issues
Use margins and the
tag (or its equivalents) to control wrapping and vertical alignment of list items and headers
Use a:first-line to set a specific line-height for links that wrap
Use percentages instead of px for cross browser consistency
Use text-decoration:none and list-style-type:none to remove bullets and underlines from links and lists respectively
Use text-transform to capitalize headers and section titles
Use p:first-letter to set a large font and create a literature style drop cap effect for paragraphs
Use list-style-type:decimal in the style sheet instead of changing UL to OL in the HTML to number list items
Use white-space:pre with a return after each letter to display text that reads vertically
Use white-space: -moz-pre-wrap; for Firefox, word-wrap: break-word; for IE, and white-space: pre-wrap for Opera and Safari to force wrapping on predefined text
Use the tag to insert a conditional carriage return that will wrap long words if necessary at the position where the tag is placed. Use wbr:after { content: “0200B” } in the CSS to insert the equivalent HTML entity for Opera and Safari, which do not recognize the tag, in order to produce the effect on those browsers
Set generous bottom margins equivalent left and right margins for paragraph tags globally for create consistent and maintainable leading and gutter standards
Set wider left margins for list items and quoted text to facilitate hanging punctuation
Inline text needs the same font-size, line-height, vertical alignment, padding, border, margins and position values to line up consistently across browsers.
Dimensions
Use ems as the measurement for container divs, and find the number of ems equal to 100% of the page width to use as your baseline
Reduce margins instead of increasing padding for cross browser consistency
Avoid negative margins on nested divs for cross browser consistency
Avoid defining conflicting values(colors, width, height) for the adjacent margins or borders of neighboring elements
Avoid padding and borders on inline text for cross browser consistency
Inline elements cannot have a defined width unless the display:block property is set
Width and height only apply to block or absolutely positioned elements
Add display:block and 100% width/height to anchor tags within table cells or vertical lists to make the click/hover area expand to the width of the parent element
Add display:block and width/height to image tags to maintain placeholder blocks for missing image files
Never set width or height on the same module where borders and padding are defined. Width goes on the parent, and then borders and padding go on a width:auto child
Never use a measurement for the line-height property
Always set a width on floated elements and their child elements
Use paragraphs instead of divs when width and height don’t take effect
Box Model
Use overflow:hidden to avoid scroll bars within a div and the expanding box problem in IE
Use width: auto and overflow: visible on button elements to avoid extra padding in IE
Use overflow:auto to avoid scroll bars within a textarea in IE
Use the HTML 4.0 Transitional doctype to force quirks mode on all browsers
Use the HTML 4.01 Strict doctype to force strict on all browser except IE
In the W3C box model, element width excludes padding and borders
In the classic IE box model, element width includes padding and borders, giving extra spacing for most content
IE6 always stretches boxes to display overflow content, while other browsers do not
IE6 doesn’t implement overflow:visible correctly
Use -moz-box-sizing: border-box; to emulate the IE box model in Firefox. Use box-sizing: border-box; to emulate it in Safari and Opera
Use -ms-box-sizing: content-box; to emulate the W3C box model in IE.
To remove the horizontal scrolling bar, declare overflow-x: hidden; as a style for the body tag
Background Colors and Images
Use the opacity property to create a rollover effect instead of swapping images
Use the background-position property to move an image to one of the eight compass directions behind the foreground text or image
Use the background-position property to change the hover state of links with background images using CSS sprites
Use background:transparent for rollovers where the parent element includes the image in the hovered position
Use background-image instead of image tags for images that are not content related
Defining the width of a static box that follows a float makes IE6 display differently than any standards compliant browser.
Don’t bother with quotation marks around background image URLs.
Use a ridiculous line-height or negative margin along with overflow:hidden to hide text replaced by images
Don’t use ems as the measurement value to hide text
To use an image for an hr tag, wrap it in a div that uses the image as a background URL and set the hr to display:none
Visual Interaction
Use cursor:pointer to emulate the onmouseover event cursor change
IE6 supports the :active, :hover, :focus, :link, :visited link states
Use :active instead of onclick events and :hover instead of onmouseover events when possible
Use “a[href=www.mysite.com]” to target elements with specific attribute values(CSS2 Attribute Selector)
Use “ul > li{…}” instead of “ul li{…}” to only target the first level children of a tag instead of all nested descendants(CSS2 Child Selector)
Add absolutely positioned elements within link tags and reference them in hover definitions(ex. A:hover span{…}) to create rollover dropdown menus without Javascript
Use a:active, a:focus{outline:0;width:0;height:0;} to remove the dotted line around clicked links
Use img {border:none;} to remove the border around images
Use :link,:visited to style links without styling anchor tags.
Use cursor styles and image maps to extend the click area of links to cover the dimensions of their parent elements without using Javascript
Use rel=”external” for all external links and a[rel~="external"] { target-new: tab; } (CSS3 Attribute Selector) to open links in a new tab
Use { target-name: modal; } (CSS3 Attribute Selector) to open links in a modal box
Use matching light colors for the top and left border and matching dark colors for the bottom and right border of a link. On hover, flip the color pairs and relatively position the link down and to the right by one pixel to generate a simple 3D button effect.
Stylesheet Organization
Use a CSS Validator to ensure that typos and conflicting declarations aren’t causing bugs on your page
Define classes to style block level elements(.content) instead of using tag references by ID (#main p) to make them independent of their parent elements
Define body.classname for each customizable element and define a button in Javascript to dynamically switch classes for each applicable node once the DOM event is triggered
Avoid semicolons on the last style declaration to avoid accidentally typing the end bracket before the semicolon and generating an error
Use styles to set properties for tables instead of table tag attributes for cross browser consistency
Add subclasses for common needs, such as highlighting the first or last item in a list, hiding and showing comment text, emphasizing the current navigation selection, and switching star rating colors on and off
Add IDs for standard layout components, such as site title, site logo, breadcrumbs, navigation, sidebars, content, surveys, and edit/back/search buttons
Style fonts and colors for standard layout components first to avoid redundancy and use cascading
when defining nested elements
Reset styles at the beginning of the style sheet to overwrite inconsistent defaults across browsers
Remove redundant and obsolete styles when moving test code to production
Define hover, focus, and active(e.g. :link:hover, :visited:active, etc.) rules in the preceding order of operation to cascade the rules properly
Use classes instead of IDs for any code intended to work inside the sandbox of a third party API, since IDs may be stripped out to avoid conflicts
Debugging
Test in at least four browser engines (Gecko, Webkit, Trident, Presto) each time you make a change
to avoid massive debugging efforts at the “end” of a layout task
Create a copy of the template and remove all divs except the misaligned one and its adjacent divs to debug positioning issues
Remove margins from inner divs when debugging ignored positioning values in absolutely positioned divs
Remove all inline text and start with non-breaking space as the placeholder content to debug width and height issues
Set margin, padding, font-size, and border size to zero for debugging unseen inheritance issues
Use a separate style sheet for IE when absolutely positioned elements or margins are inconsistent with other browsers
Use obvious background colors to highlight misplaced or misaligned nested elements when debugging
inner divs
Layout Emulation
Use multicolumn list to emulate newspaper column layout for articles
Style the corners using four or five pixel high strips before and after the main content div. These strips are created using bold tags. Each bold tag should be styled as display:block; overflow:hidden;. Surronding each set of strips should be a bold container styled as display:block; background:transparent; font-size:1px;. Each one except the last bold tag should be 1 pixel in height. Each one except the first bold tag should have the same background color as the content div. The horizontal margin for each bold tag should equal the sum of the tag’s position plus the number of remaining tags, plus one. This will produce rounded corners.
Use an alternative style sheet if no visited cookie exists for your site to load the home page with just the logo, set the visited cookie, and links to the standard style sheet which reveals the hidden content as an alternative to the traditional Flash based splash page
the main page to the splash page and the rest of the page’s content was hidden.
