The html code
The 'new' thing on the block for css layout are the conditional statements. They are comments that acts like if statements. Browsers don't render css the same and when you use these statements you can keep your css files clean of hacks. Much of the rendering quirks have to do with positioning the elements so you can create a general css file for the cross-browser styles. Because some of the rendering is different in IE6 and IE7 you can create a general IE file. So lets look at the code for it now, the css examples will follow later.
<link rel="stylesheet" type="text/css" href="css/default.all.css">
<!--[if IE]> <link href="css/default.ie.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lte IE 7]> <link href="css/default.ie7.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lte IE 6]> <link href="css/default.ie6.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !IE]>--> <link href="css/default.non.ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
The conditional comments can be hidden, like the IE stylesheets, or visible like the non iE stylesheets.
The css code
Another thing i discovered is the peek-a-boo bug when there are floating divs inside another div. If you want to display a border for the container div the border disappears and appears magically if you scroll the page. Of course this only happens with IE.
There are two solutions. One is to set the position to relative but i experienced that if there is a hover-to-showmenu that works with absolute positions the shown items appear to be under the relative positioned element.
Here is where solution 2 kicks in. With the IE only zoom style you can get rid of the peek-a-boo bug without breaking javacripted behaviour if you set it to 1.
It's a bit of common knowledge but maybe someone can benefit from this.
