I started running the causes through my head; position is relative, IE 7, target layer opens below event element…and then it hit me! Simply position the layer above the event triggering element! It worked because everything above the relative container was rendered before it in the source html. It was like manually reversing the z-index with jQuery except, since it was going in reverse, the browser had stacked the items correctly! Luckily the component I was working on had both the space and design to accomodate such a solution.

1. Create raw html code with only the most basic tags and high level block divisions. This step is important to finish first so that anytime after it is done, the markup can be passed on to a developer. Don’t add ANY CSS until you are done!
2. Start applying structural styles first to get the basic layout worked out.
3. Apply any background images on the high level structural elements and/or body.
4. Apply non-color styles such as padding, margins, font-size, to block level elements, then inline elements if necessary.
5. Apply final colors and finish any fine-tuning

Also, don’t forget to test in all supported browsers after each step.
]]> http://www.thetransient.com/build-htmlcss-pages-or-components-from-the-ground-up/221/feed/ 0