Cascading Style Sheets/Compatibility
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 styling task
Only use classes for a collection of elements that may appear in multiple sections of a single page, otherwise just reference the collection using the ID of their container
Validate the HTML and CSS code to make sure the markup is not breaking the layout and the style rules do not contain any syntax errors
Make sure that margins and paddings have been reset if there is mysterious whitespace between elements
Make sure that there are no line breaks or whitespace between an anchor tag and a nested image or span if the layout is mysteriously broken
Make sure that all four corners of each element is visible using the a browser-based box model tool (eg: Web Developer Toolbar for Chrome, Firebug for Firefox, Opera Dragonfly, or IE Developer Toolbar) to identify overflow related issues. If the width is too large and the right border is missing, reduced the fixed width of the element. If the height is too large and the bottom border is missing, turn off overflow if the content is not truncated, otherwise reduce the height or reposition any neighboring elements with absolute positioning, relative positioning, or negative margins that are obscuring the content
Use applied styles context menu in the IE Developer Toolbar to see which rules in the cascade are overwriting the ones you want
Make sure the parent element used to increase specificity is available in all templates
Copy and paste generated source in HTML validator for pages where the validator doesn't work on the URL
Make sure that padding for any child elements is not forcing the container to expand outside of its defined dimensions, and reduce the dimensions accordingly if you cannot avoid setting both padding and width or height on the same element
Make sure to test the layout with and without toolbars in the browser chrome to make sure no min-height bugs are triggered by adding or removing menus from the browser
Make sure that styles you have defined are not being overwritten by existing styles with more specificity or those defined later in the CSS code by increasing the selector weight using references to parent classes or IDs
Make sure to use Firebug or Web Inspector (CTRL + Shift + C) to verify mini-resets of localized CSS rules and increase the selector weight if necessary to override cascading that may inadvertently cause mysterious layout issues
Make sure to increase the selector weight of IE specific CSS rules when doing so for universal styles
Make sure that the width and height dimensions of the container allow enough space to provide the vertical or horizontal positioning declared in the CSS code
Make sure that the width and height dimensions of all floated elements fit within the constraints of the container
Make sure that the width of right aligned content such as label copy is only as large as needed to avoid using left margins or padding for alignment since it may not be consistent across browsers
Make sure that floated elements with wrapping content have a defined width and proper text alignment
Make sure that any containers that expand on :hover have the a default width and height which is greater than or equal to the size of any nested elements
Make sure that fixed-width containers use overflow:hidden so shrinkwrapped nested blocks don't cause margin collapsing in older versions of Firefox
Make sure that all inline elements are absolutely positioned or contained in block level elements
Change the position attributes of the container to make sure it allows absolute or relative placement of nested elements
Create a copy of the template and remove all divs except the misaligned one and its adjacent divs to debug positioning issues
Put a container div around block level elements that don't respond to display:inline or display:inline-block declarations
Remove margins from inner divs when debugging ignored positioning values in absolutely positioned divs
Remove all inline text and start with a 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 display:block with a fixed height if margins are inconsistent for inline text in situations such as creating a header using markup and one-pixel high element with margin offsets to create rounded corners
Use a unique fixed width for each row instead of margin offsets to create rounded corners inside of inline-block containers for IE6 and IE7
Use a unique background-position for each row to create rounded corners with a background image covering half of the container but not the other
Use IE specific styles when absolutely positioned elements or margins are inconsistent with other browsers
Use a fixed width container when absolutely positioned elements do not appear within the correct relatively positioned parent in IE
Use position:relative on a container with overflow:scroll or auto if content with position:absolute or relative behaves like position:fixed upon scrolling in IE
Use obvious background colors to highlight misplaced or misaligned nested elements when debugging inner divs
Use inline styles and remove ID and class references to display elements that are invisible due to an unknown CSS error
Use word-wrap:break-word(CSS3 Property) or wbr(and its alternatives) to break lines within long words to prevent overflow of an unbreakable string from causing horizontal scrollbars or inadvertent wrapping of blocks to a new line
Use table specific font rules in IE5 set since those applied to html and body tags do not cascade to table elements
Use divs instead of paragraphs when margins don't take effect
Use divs instead of paragraphs to avoid the inherit vertical margins between paragraphs
Use display:inline on an absolutely positioned elements to avoid hasLayout issues
Use margins to move absolutely positioned elements instead of directional shifts
Use border-collapse: collapse; and border-spacing:0 to remove gaps between table columns
Use border styling on the td element instead of the tr element after doing the above to create grid lines on a table
Use empty-cells: hide to remove borders from empty table cells
Use position:relative on inline text and position:absolute on block-level containers and media
Use inline-block to give hasLayout to a relatively positioned container
Make sure class selectors aren't inadvertently overridden by default values of ID selectors, especially background-position changes for sprites, by dividing the properties of ID selectors using longhand notation
Use vertical-align middle to line up inline-block elements in IE; use vertical-align:top for form elements
Use overflow:visible on parent elements if negative margins don't reveal overflow content
Create more classes with specific names instead of creating more complex parent=>child references
Make sure there's not a more specific CSS rule or one that comes later in the style sheet which is overriding the desired effect
Make sure the there's not a number at the beginning of the ignored class or ID name
IE will only change the state of a hovered child element when something changes on the anchor tag, so use a redundant effect like a:hover{ visibility:visible; } if something like a:hover span { display:block; } doesn't work
IE will only change the state of a hovered child element that is referenced using a parent class or id if a property is set on the anchor tag that hasn’t been declared in any other pseudo classes for that anchor, such as text indent:0, float:none, direction:inherit, visibility:inherit, white-space:normal, etc ex. .class a:hover span{} needs .class a:hover{visibility:inherit;}
IE will increase the width of a container with an italicized font style so use overflow:hidden to avoid inconsistent wrapping if possible
If links on a page are clickable in IE only, look for an absolutely positioned element that overlaps the links and raise the z-index value of the link container or reposition the layout so the overlap does not happen
If the property value for a group of elements doesn't work, redefine that property value for one of those elements to see if a comma is missing or an unsupported selector nullified the entire rule
#business_photo, .sentence, .instruction, .list > li { padding-bottom: 24px; }
/* Redefine the same padding value because the descendant selector nullifies the above line in IE6 */
#business_photo { padding-bottom: 24px; }
If neighboring elements are mysteriously repositioned when an event or hover triggers the display or a submenu or other hidden content, make sure that content is not relatively positioned in external CSS, inline CSS, or generated JavaScript attributes.
If margins between a series of lists with headers are inconsistent due to special cases such as scrollbars for overflow in long lists or different margins for the first or last list, remove margins from the lists themselves and put them on the headers and use padding at the top and bottom of the container to handle spacing between the first or last list and the borders
If a border does not show up on around an element, make the color black or white to see if the color is too light or dark to distinguish from the background
If a div is being pushed beneath its specified position to a new line, use the mouse to select the content within the div to see if the dimensions of a block element within it are causing overflow outside the container. Make sure to set the width of any forms within the container in addition to validating the HTML to make sure no block tags are missing or inline tags have block tags nested within them.
If a hover or visited state of a hyperlink is not working correctly, do the following checks: -Make sure the pseudo classes are defined in the correct order -Make sure the pseudo classes don't share the same definition as a less-specific element, like a:hover{color: #ccc;} and .mylink:hover{color: #ccc;} since the browser will group them together and parse the less-specific rules in the cascade before the more specific rule, such as .mysite{color: #eee;}. If this is the case, add a reference to the parent container to the pseudo class rules, for example .mymenu .mylink:hover{color: #ccc;} to increase the selector weight. -Make sure the pseudo classes are defined or the element selector instead of the class selector, for example .nav a:hover vs nav a.submenu:hover. This may not work in IE6. -Make sure the rules are defined in the proper order, which is the following: 1. :link, :visited 2. :hover, :focus 3. :active
Since a link can simultaneously be in the :visited, :hover, and :active states, and they have the same specificity, the last one listed wins.
Increase or decrease the text inside a container to make sure it wraps text and resizes properly
Increase or decrease the font size of the browser a few times to see how it affects your backgrounds and margins, especially for text used in headings and navigation
Apply classes to different elements to make sure each class is not dependent upon a specific tag
Include several block elements such as a few paragraphs and a large list inside a div to see if it breaks the flow of the container
Set position:relative on floated elements if they are not visible in IE6 or IE7
Set a fixed width or height for a data table cell if word wrapping causes any nested containers with relative dimensions to expand. If there is a div container with a percentage width inside any table cell, content that forces word wrapping in another cell causes the relative width of the div will grow in IE6 and IE7 to match the overflow width of the table cell if an explicit width or height is not set on the cell to contain the content
Reset the line-height of an element if it stretches larger than its defined height in IE
Use clear to break an element away from a floated sibling and wrap it to a new line
Separate HTML structure and CSS design by developing the naming conventions and organization of the container styles without thinking about the content
Create a reusable library of headers, footers, submenus, navigation bars, lists, forms, and grid layouts
Use consistent semantic style names for classes and IDs
Design modules to be transparent on the inside
Extend objects by applying multiple classes to an element
Use CSS reset styles, web-safe fonts, and grids on all projects
Avoid location dependent styles that break outside of the cascade
Avoid using a class name that describes the tag or property it is mapped to, such as .hidediv or .floatleft
Avoid using IDs to style content within the main layout containers
Avoid using images to replace text
Avoid drop shadows and rounded corners over irregular backgrounds
Avoid nesting divs inside of spans or having spans adjacent to divs to prevent triggering side-effects caused by the behavior of anonymous block boxes
Using 1px dotted borders in IE6 is buggy and will display a dashed border. Use an IE6 specific style of 2px border-width and a lighter shade of the desired color to offset the larger pixel size.
Any vertical-align value besides top or bottom will be rendered inconsistently across browsers for form elements
Only use the !important declaration to create user style sheets or to override an inline style if the HTML markup is not editable. The !important declaration must follow the value of the property that it intends to give weight to. Since inline styles can be added to any HTML tag, using the style attribute selector is the only way to override those styles if a class or ID attribute is not defined for the element, as in the following example:
div[style]{ background-color: #f00 !important; }
When using abs pos elements, make them the last child element of the rel pos container in the HTML source order for IE6
Use an abs pos span nested inside an href to create dropdowns that show up in different places
Use the nested span trick to highlight the parent container of a nav list by setting it's background color to the desired nav background and making it visible on hover. Make the ul the rel pos parent and give it overflow hidden, and make the empty span bottom:0; z-index:-1; height: 99em; and width equal to the nav
<ul id="nav"><li><a href="#"><span></span>Test 1</a></li></ul>
Use the nested span trick to create polygonal shaped links by offsetting their background positioning and placing them over the desired content
Use a:focus{width:0,height:0,outline:0} to remove dotted borders
Use abs/rel positioning to emulate outlines in IE6/7
Use resets to debug margin/padding issues
Use margins is remove padding and top/bottom positioning for abs positioned elements if spacing is off
Use :default to select all radio button sets
Use :active as :focus in IE6
Make sure parent div used for specificity is available in all templates
Use relative/absolute div with a background color to replace text with ellipsis using the following steps:
Create a content div with the original content and a height equal to the font-size * the number of rows you want visible
When a JavaScript event is triggered, reduce the height to the new number of rows you want visible by adding a class with that setting
Make sure class selectors aren't inadvertently overridden by default values of ID selectors, especially background-position changes for sprites, by dividing the properties of ID selectors into pieces
Use vertical-align middle to line up inline-block elements in IE; use vertical-align:top for form elements
Use change events to delegate input and select elements
Use active link states and relative positioning to respond to link clicks
Use the following alternatives for buffering offscreen content: -Negative margins instead of display:none -Relative positioning offsets instead of visibility:hidden for text -background-position instead of visibility:hidden for images -display:inline block instead of display:table -clip:rect instead of max-width/height
Absolutely positioned elements moved outside of their relatively positioned parents in Firefox 2 cause the containers to stretch
Use margins for the outermost elements
Use padding for elements that have a background color or image
- -moz-only-whitespace matches an element that has no child nodes at all or empty text nodes or text nodes that have only white-space in them. Only when there are element nodes or text nodes with one or more characters inside the element, the element doesn't match this pseudo-class anymore.
- -moz-selection (::selection) pseudo-element applies to the portion of a document that has been highlighted (e.g. selected with the mouse) by the user.
The :-moz-first-node pseudo-class matches an element that is the first child node of some other element. It differs from :first-child because it does not match a first child element with (non-whitespace) text before it.
The :-moz-last-node pseudo-class matches an element that is the last child node of some other element. It differs from :last-child because it does not match a last child element with (non-whitespace) text after it.
The ::-moz-list-bullet pseudo-class is used to edit the bullet of a list element.
The :default pseudo-class is used to identify a user interface element that is the default among a group of similar elements
Use -ms-text-align-last for orphan lines at the end of paragraphs
Use xsl:number to mimic generated content for counters in IE
Use outlines to style buttons with white accents
Use q { quotes: '"' '"' } to define quote characters
Use the following to trigger quote character display:
q:before { content: open-quote }
q:after { content: close-quote }
Use fixed positioning with @media print to show header and footer containers on every page
Use absolute:positioning instead of fixed positioning to avoid showing header and footer containers on every page