Posted by: daka December 28, 2009
web-designer
Login in to Rate this Post:     0       ?        

There is no specific code to make website cross browser. This is all depends on browser and standard W3C recommendations. There are some specific problems with browsers specially IE. Here is what you need to do make website cross browser functional-


Validate your site

Validators are available for both X(HTML) (http://validator.w3.org/) and CSS (http://jigsaw.w3.org/css-validator/). Any errors that show up while validating could be a potential cross-browser functionality broker. So first make sure that there are no errors.

Stay in standards mode

Browsers render HTML in two ways

  • Standard Mode – it works according to w3c recommendations
  •  Quirks mode - technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standards mode. In Quirks mode they keep all their old bugs just to help regular users.

So what happens if you run your website in Quirks mode – different browsers render your pages differently which is what you don’t want. That’s why standard mode is recommended. You can limit those problems In Standard Mode by using HTML 4.01 Strict doctype. When you design in "strict mode," Internet Explorer 6 and above will show behavior much closer to that of Firefox, Safari and other modern browsers.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">


Note: you have to specify the strict DOCTYPE at the very top of your page. Otherwise, Internet Explorer runs in a "quirks mode" where it attempts to emulate the behavior of older browsers.

 

Avoid default style

What happens if you don’t use css? Your sites still have certain look. Headers will be larger than text paragraphs and blockquotes will have padding. Size of text is something that is pretty similar across browsers but something that’s not is padding and margins. Just for example- With no styling an gets a padding in Firefox but a margin in IE.

You can solve these kinds of problems by resetting all margins to their defaults at the top of your css file. This can easily be done by typing in * {margin: 0; padding: 0 ;}.

 

Note- * is a universal selector that applies the same rules to all elements.

 

Browser bugs

IE is the worst browser when it comes to handling CSS and it has lots of bugs. The common bugs are listed here so if you encounter any of them, do fix them. Sometimes you may not find your bugs in that list so if nothing else work use “*HTML” hacks. You can use writing like this - * html #element {code ;}. HTML hacks is only for IE. However HTML Hacks does not work in IE7. But there is work around in IE7 that is conditional statements.

Some other things you need to consider – 

Last edited: 28-Dec-09 06:04 PM
Last edited: 28-Dec-09 06:06 PM
Last edited: 28-Dec-09 06:08 PM
Read Full Discussion Thread for this article