While continuing to practice further more after the weekend, I tried my design in different browsers and came across some annoying problems which I felt the need to discuss.
In my design I used border-radius to round-up corners of some coloured boxes. I knew that this kind of styling differs from browser to browser therefore I included different code that would work in different browsers. To my surprise some Internet explorer versions do not support this feature, only IE 9 supports it. Another way to obtain this feature is by setting an image with round borders in the background which obviously involves much more work.
Other Problems I encountered were margin related. While testing in Chrome I set up some margins to position some text areas. Internet Explorer Positioned the text areas differently from chrome and therefore my design was slightly messed up. As some of my friends suggested, adding * { margin:0; padding:0;} in the beginning of the CSS file solves this margin problem.
I also encountered other minor issues due to features that work in chrome but do not work in Internet explorer. I used the corresponding Internet Explorer code to solve these issues.
The website http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx contains an interesting list of supported CSS functionality for IE.
It was more difficult than expected to create a style that looks that same in all browsers, fortunately these differences are being reduced as the newer browsers have much more features in common.
No comments:
Post a Comment