Cascading Style Sheets (CSS) is a powerful framework for web pages. I've made a few notes for some of the things that I need to refer back to. Continuously updated.

Microsoft IE, Firefox and Safari and other browsers can be frustrating to work with layout wise even if you use W3C compliant XHTML and CSS as they don't necessarily all work exactly the same. I tend to work with XHTML 1.0 Strict and CSS 2 since most of my work is publicly available, although I've certainly used tags and attributes that are not in the strict DTDs. Here's a few tips and tricks I've amassed over time. These are assuming you are working with CSS2 and beyond as some of this doesn't apply to the older CSS1 standard.

Internet Explorer and hasLayout (aka Disappearing Content in IE)

I ran into an issue where some of my content wasn't displaying correctly in IE. This was the case in my tests using IE6 and IE7. The content would appear briefly and then disappear. If I hovered over a form element (or anything else that caused a page repaint of some sort), then the content would blink in and display for a few moments before it would disappear again. A little research turned up the IE hasLayout problem. Some information about the problem is this excellent explanation exploring the problem: the hasLayout concept which also points to a chart on triggering hasLayout.

It turns out that maybe I inadvertently triggered this problem by defaulting my DIV tags to position:relative (instead of static). This is so that floats and absolutes get positioned from the containing container as one would generally expect. I like the explanation on how to fix layout using one line, although I only had to do it for DIV tags and not for the UL tags as described, and I had to set it for LT 8 not 7 since the problem shows up in 7 as well.

Standards, the Box Model and Compatibility

I've run into a number of issue of compatibility, of course, especially related to IE's support. The biggest problem comes from IE's support of the W3C Box Model, especially related to the fact that Internet Explorer 5 and 6 use their own proprietary interpretation (surprise, surprise) instead of the defined standard. Right or wrong, it's a standard, and there is a reason for standards -- interoperability. Sigh. So, you have to do what you can to get IE out of what is known as Quirks mode. The best thing is to define your site using the XHTML 1.0 Strict as that will bring the most compatibility.

Solutions worth exploring:

• Separate CSS files - probably the best solution, but maybe the most work, too
• Tantek Hack - by Tantek Celik
• IE7 - Javascript-based solution, but it's got its issues as well and if you resize anything, you'll have call a separate recalc module; if you use this, for faster display, you will want to always attach styles to specific container tags.

I also found some information for defining the correct box model, but it's all proprietary code designed to fix problems introduced by each browser's interpretation of the standards.

Define Everything

First, define all the basics and define them up front. I use a * definition right off the bat and set it all to zero along with relative positioning (so my absolutes seem to work correctly more easily without tracing them down). Make sure you do some explicit definitions right off: * { default styles }

Because of the box model, don't define DIVs with a width of 100% when specifying paddings and margins as it will then be wider. DIV widths of auto size as wide as possible unless position is set to absolute where it shrinks to fit.

Floated and absolute-positioned DIV tags don't affect the size of other DIVs in the same container. However, the text containers (h, p, ul, ol, li, table, etc.) do adjust for floated (but not absolute) DIV containers. Funny that, and I'm sure there's a definitive reason for it.

I make a default position of relative for DIVs for easier positioning overall.

Additionally in IE6, if the footer DIV has one or more absolute positioned elements that position along the bottom, make sure to use the height suggestion in this document, or you will get a much longer footer than you meant to get and your content way below the end of the intended spot -- even specifying relative positioning.

Multiple Styles

You can apply more than one style using the class attribute: class="style1 style2 style3" will apply each of these styles in order, as well as any applied to the ID and it's associated styles as well. I'm not yet positive of the fully strict order when using ID, ID styles, and generic styles not hooked to an ID or the main container dev. I'm going to guess: container, container styles, id, id styles, generic styles (but don't quote me yet).

Font Sizes and Line Heights

Line heights are based on the font-size. However, if you change the font-size without defining it in ems, then the line heights get messed up. So, you want to define it all based on ems. Most browsers use a standard font size of 16pts. I set the html tag to 16pt and then in the body tag, I set the default font size to 0.625em which takes it to 10px or 10pts in height. That makes it MUCH easier for me to know what I'm defining anywhere else in the site. Because it's then all relative, line heights and all of that work correctly and the font-resizing tools work better, too.

Height Compatibility

For heights, since some IE versions (<6) interpret the height tag as the min-height, you'll want to do some explicit definitions for certain heights, whether explicit or :
div#id1 { min-height: 27px; }
* html div#id1 { height: 27px; }

Important

Some attributes are important and you don't want to have them over-written. You can apply an !important to the style definition so it's not overwritten (except by another !important). I haven't tested, but I would expect the last important to trump the definition.

Lists

IE doesn't do lists right when it comes to positioning of the bullets and such. If you change line-heights, then bullets positioning doesn't work as well as in Firefox, so you'll want to explicitly define line-height and text-size up front and early and make sure you define the lists the way you want them to generally display.

CSS Selectors

You can target containers hierarchically by using CSS2 definitions using the universal selector — * (asterisk), the child selector (and grandchildren, etc.) — > (greater than), and/or the adjacent-sibling selector — + (plus). By mixing and matching these selectors, you don't have to id every container to apply styles to it. Note that white space is okay, and un-contained text won't mess up the equation either.

Universal Selector

The * makes it apply to any container.

Child Selector

The > makes it apply directly to a container child (such as body > ol > li, where ol is the child of body and li is the child of li and the grandchild of body).

Adjacent-Sibling

The + makes it apply to adjacent containers (right next to each other, not contained), such as h1 + p, where p is directly adjacent to h1.

Pseudo-Classes

There are a number of pseudo-classes (like the :hover, :focus, :visited applied to the a links) that give more control, such as :first-child, :before, :after, :left, :right, :first and more.

Centering Fixed-Width Sites

In the Web 2.0 world, fixed width sites have become the norm again with the rule being that people are more comfortable scrolling vertically than in the past, and it gives designers much tighter control over content display. I'm not the biggest proponent, but many want it this way. However, IE and Mozilla browsers once again implement things differently, with IE misbehaving (of course).

I tried giving a background to the body tag and then putting a wrapper DIV in the middle of the page, but IE doesn't do the color correctly, for whatever reason. So, you actually need two DIVs, one that fills the screen to have the background, and another to put the content inside a fixed-width window. Today's standard seems to be 960px wide. Here is sample code that will "float" your main content container in the center with the outer background blue:

#bg-wrapper {
    background-color: blue;
    text-align: center;
}
#content-container {
    width: 960px !important;
    margin: auto;
    text-align: left;
}