How to get Cross Browser Compatibility Every Time

Page 1

   

Home About Portfolio Blog

Woah you're using IE6! This site won't function properly in IE6 just yet. Why you ask? IE6 is an old browser that is being phased out. Many websites will drop support for it soon. Normalyl I would fix up the bugs, but since this is my personal site, I don't really care You can get a better browser, and it will make designers happy - Firefox or Safari. You'll thank me later.

How to get Cross Browser Compatibility Every Time 18th June, 2008 | 26 Comments | Filed under Browsers Cross-browser compatibility is one of the most time consuming tasks for any web designer. We’ve seen many different articles over the net describing common problems and fixes. I’ve collated all the information I could find to create some coding conventions for ensuring that your site will work first time in every browser. There are some things you should consider for Safari and Firefox also, and IE isn’t always the culprit for your CSS woes. I’ve conducted all this research so I have a better understanding of the bugs of IE6 for my Grid Plugin. I want people to be able to forget about browser bugs when creating layouts, and the plugin will remove all these problems - well, that’s the goal. I’m only going to be concerned with the major browsers - Firefox 2+, Safari 3+ and Internet Explorer 6+. IE6 is slowly declining and my site only has 3%. I don’t actually even support it. This luxury isn’t an option on client sites however, and it needs to be catered for. If you know the IE6 bugs you can generally know if your site will break before you even check it in a browser. This isn't an article for the super-experienced web designer, but hopefully will give some insight to some people who don't understand the mysteries of IE6 and cross browser compatibility.

Summary Here is a quick summary for those of you who don't want to read the whole article: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

Always use strict doctype and standards-compliant HTML/CSS Always use a reset at the start of your css Use opacity:0.99 on text elements to clean up rendering in Safari Never resize images in the CSS or HTML Check font rendering in every browser. Don't use Lucida Size text as a % in the body, and as em's throughout All layout divs that are floated should include display:inline and overflow:hidden Containers should have overflow:auto and trigger hasLayout via a width or height Don't use any fancy CSS3 selectors Don't use transparent PNG's unless you have loaded the alpha

Element Inconsistencies Every browser renders particular elements differently - different amounts of padding, margins, borders etc. This means your site can look different in every browser if you use default styles. http://anthonyshort.com.au/blog/comments/how-to-get-cross-browser-compatibility-everytime/


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.
How to get Cross Browser Compatibility Every Time by Rupak Ganguly - Issuu