Your CSS design’s cross-browser problems must have given you many a sleepless night. Just when you have decided that you’ve created the best CSS-based layout you could have ever come up with, to your horror you discover that it totally collapses on one of the browsers. The main problem is often replacing HTML tables with DIVs, or deciding the positions of various elements, as different browsers have their own ways of measuring screen space. Whether it’s FireFox, IE or now Google Chrome, your CSS design must look equally good in all major (or minor) browsers. How do you achieve that? How do you create cross-browser CSS designs, especially when you are not the so-called CSS ninja.
One solution would be creating the simplest of layouts, with bare-minimum frills. In order to make cross-browser CSS designs you can also create browser-specific CSS files, and then call them after detecting the browser. This is cumbersome, as your CSS code increases and it becomes difficult to manage and track multiple CSS files. Some designers also use CSS hacks to create cross-browser designs, but this is not advisable as after a while the browsers for whom the hacks have been written stop noticing them.
This blog post discusses 15 techniques and tools that can help you create cross-browser CSS designs.