When debugging, you may save yourself a lot of headache by simply validating your code first. Improperly-formed XHTML/CSS will cause many a layout glitch.
To validate your pages use the free tools provided by w3.org:
Validate XHTML (http://validator.w3.org)
Validate CSS (http://jigsaw.w3.org/css-validator/)
Build and test your CSS in the most advanced browser available before testing in others, not after.
If you build a site testing in a broken browser, your code begins relying on the broken rendering of that browser. When it comes time to test in a more standards-compliant browser, you will be frustrated when that browser renders it improperly.
Instead, start from perfection and then hack for the less able browsers. Your code will be more standards-compliant from the start, and you won’t have to hack as much to support other browsers. Today, this means Mozilla, Safari, or Opera.
Floats are tricky, and don't always do what you expect. If you run into a situation where a float extends past the border of the containing element, or just doesn't behave as you'd expect, make sure what you want is correct.
IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it’s best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width.
If you rely on @import alone for external style, sooner or later you will notice that IE ‘flashes’ plain, unformatted HTML briefly before applying CSS. This can be avoided.
IE doesn't support it. But it treats width as min-width to a certain degree, so with a bit of IE filtering, you can achieve the same end result.
Sometimes rounding errors will cause something like 50% + 50% to add up to 100.1%, which ends up breaking layouts in some browsers. Try bumping down the 50% to 49%, or even 49.9%.
If you use a classic anchor in your code (<a name="anchor">) you will notice it picks up :hover and :active pseudo-classes. To avoid this, you will need to either use id for anchors instead, or style with a slightly more arcane syntax: :link:hover, :link:active
There are browser-specific CSS extensions that aren't in the official spec. If you’re trying to apply filters or scrollbar formatting, you’re working with proprietary code that won’t work in anything but IE. If the validator tells you the code you’re using isn't defined, chances are it’s proprietary, and won’t work consistently across browsers.
Especially useful when working on large, unfamiliar CSS files. Comment out roughly half of the CSS. If the problem still occurs, it's in the other half. Comment out what's left and test again. If the problem stops occurring, its in the commented out section. Refine your comment scope and test again. Continue until problem has been diagnosed.
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)
Borders, margins, and padding shorthand assumes a specific order: clockwise from the top, or Top, Right, Bottom, Left. So margin: 0 1px 3px 5px; results in no top margin, 1px right margin, and so on.
CSS requires you to specify units on all quantities such as fonts, margins and sizes. (The only exception is line-height, oddly enough, which doesn't require a unit.) The behaviour of any particular browser when sizes aren't specified should not be relied upon. Zero is zero, however, be it px, em, or anything else. No units are necessary. Example: padding: 0 2px 0 1em;
Advanced browsers like Mozilla and Opera allow you to resize text no matter which unit you use. Some users will definitely have a larger or smaller default than you; try to accommodate as large a range as possible.
Some browsers are case-sensitive. Using a class like 'homePage' is fine, provided you're consistent with your letter case. Applying style to 'homepage' will cause problems in strict user agents (like Mozilla).
One of the lesser known, but really useful CSS commands is the text-transform command. Three of the more common values for this rule are: text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. The first rule turns all characters into capital letters, the second turns them all into small letters, and the third makes the first letter of each word a capital letter.
If you work with a stylesheet embedded in your HTML source, you eliminate any potential caching errors while testing. This is very important when working with some Mac browsers. But make sure to move your CSS to an external file, imported with @import or <link> before launching.
A universal rule like div {border: solid 1px #f00;} can go a long way toward pinpointing a layout problem. But adding a border to specific elements can help identify overlap and extra white space that might not otherwise be obvious.
When setting a background image, resist the urge to surround the path with quote marks. They’re not necessary, and IE5/Mac will choke.
Mac IE5 chokes on the empty style sheet and the page load time increases. Instead, have at least one rule (or perhaps even a comment) in the style sheet so that MacIE doesn't choke.
As well, here are some notable theory items that don’t particularly apply to the functionality side of things, but should be considered when developing:
Make sure to comment blocks of CSS appropriately, group like-selectors, and establish a consistent naming convention, white space formatting (recommendation: a single space instead of a tab for cross-platform considerations), and property order.
If you create a .smallblue class, and later get a request to change the text to large and red, the class stops making any form of sense. Instead use descriptive classes like .copyright and .pullquote.
Keeping your CSS light is important to minimize download times; as much as possible, group selectors, rely on inheritance, and reduce redundancy by using shorthand.
Place your CSS rules in an external stylesheet, so that they do not need to be downloaded again each time a new page is loaded.
A lot of website's highlight the top level navigation element relating to each user's location within the site and this helps users to see where they are at any one time.
To achieve this, you'll need to assign a class to each navigation item. e.g.
<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="links">Links</a></li>
<li><a href="#" class="reviews">Reviews</a></li>
</ul>
You'll then need to insert an id into the <body> tag. The id should show where the users are located within the site, and should change when users move to a different page. When on the 'Home' page, it should read <body id="home">, on the 'Links' page it should read <body id="links">, and on the 'Reviews' page, <body id="reviews">.
Next, you create a new CSS rule:
#home .home, #links .links, #reviews reviews
{
all the styles for the highlighted navigation go here.
}
This basically creates a rule that only takes effect when class="home" is contained within id="home" etc and will only occur when the user is on the appropriate page of the site. These simple steps seamlessly create a highlighted navigation element.
Full credit to Dave Shea who prepared the major part of this excellent checklist Don't forget to visit Dave's CSS Zen Garden site to see a lot of really cool CSS designs.
Read more articles about PC repairs, Web design & SEO...