IE6, IE7, FF...

Using these stupid hacks is discouraged by some people smarter than me. However, should the need rise, here's a hint from some dude Neil Kilbride:

"Although Firefox and IE7 and more similar than ever in rendering CSS, IE6 has always had a mind of its own, adding padding and spacing amongst other things in random locations. However, there is a simple way to cater specifically for the major browsers. IE6 recognises underscore lines, but IE7 does not. IE6 and IE7 recognise period lines. For example..." (link to complete post above).

jQuery JavaScript library

"..a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages."

Some dude Simon Willison has a nice overview.

Another one from developerWorks.

Timeline: "DHTML-based AJAXy widget for visualizing time-based events"

Très cool. Src here:

http://simile.mit.edu/timeline/api/timeline-api.js.

Images flowing over bottom of container div

float: right; images don't add to height of the div they are in. So they flow over. To prevent this, add a <div id="clear_right"/>: #clear_right { clear: right; } after the images.

CSS Basic layout

This has:

• Top div, includes logo and "slogan"
• Left side menu bar
• Main content

Surely not foolproof but it works. position: absolute and margin-{top,left}: {px,%} are used in positioning.

body {
  font-family: verdana, "trebuchet MS", helvetica, sans-serif;  
  margin: 35px;
  text-align: center; /* IE hack */
}

img { border: 0px; }

#main {
  margin: 0 auto 0 auto;
  text-align: left;
}

#top {
  position: absolute;
  margin: 0px;
  height: 100px;
}

#logo { float: left; }

#slogan {
  float: right;
  font-size: large;
  font-weight: bold;
  margin-right: 35px;
  margin-top: 35px;
}

#menu {
  position: absolute;
  float: left;
  width: 25%;
  margin-top: 120px;
}

#content {
  position: absolute;
  padding: 5px;
  margin-top: 120px;
  margin-left: 25%;
  width: 70%;
}

Center content using CSS

With IE (v. 6 at least), things can get quite ugly. One has to use all sorts of dirty little tricks to make stuff render in at least approximately similar way across browsers. Here we center a fixed width <div id="main"/> on the page:

body {
 ...
 text-align: center; /* IE hack */
 ...
}

#main {  /* the main container div */
 min-height: 555px;
 height: 555px;
 min-width: 888px;
 width: 888px;
 margin: 0 auto 0 auto;
 text-align: left;  /* "cancel" the IE hack above */
}