CSS tricks to solve common browser compatibility problems
Author:Sanjeev Maharjan
Browser compatibility is the foremost and the most important while designing your web applications. Here are few most common browser compatibility issues:
- Margin values appear more than specified, especially in IE
- Layering with z-index values dont work
- Your background color or image is partly visible when applied to div container
- Your page is not showing according to css contents you specified in your css file included [In Safari to be more specific]
- Z-index doesnt work with Select form item in IE
These listed above are most common issues (most common problems I faced I guess). The solutions to them are also very simple. So, lets solve these browser compatibility issues.
- Solution to first issue is the use of display attribute whenever you use margin attribute in your css. It simply does all the trick and solves your over-sized margin issues.
- Solution to our next issue of layering would be to use position attribute along with z-index values.
- Third issue could be solved in two ways; either you specify the height value for the div container or you use clear:both in the div container using the background-image/color.
- To make sure that your page appears as you defined the css values in safari browser, remove all the extra codes in the css file which include comments mostly.
- The last problem is quite tricky. There is no particular way to solve it but something we cant solve could always be avoided. So if you dont want select list items to appear on top when you are displaying pop-ups then hide them whenever you are using overlapping layers or popups over select list items. Use javascript or jquery to do so.
So these were your most occuring issues while making a web applicaton browser compatible and now these problems are solved. Now dont waste time on finding new solutions and start solving the new problems... Have fun with css...
COMMENTS
![[-]](http://www.maharjansanjeev.com.np/images/minus.jpg)
