How to Make a Website Browser Compatible

These days, the market is flooded with various Internet browsers. Each one of them is freely downloadable and targets different audiences. We, as website developers, will surely want each surfer to view any website "the way we see it" - with minimal differences or no difference at all. The key to this lies in proper and correct website development from the very first moment and adhering to a number of important guidelines manifesting themselves throughout the website building process. The vast majority of websites is created with respect to the requirements of the most popular and wide-spread Internet browsers, such as Internet Explorer and Mozilla Firefox. The question is - how do we attempt to make our website look the same regardless of the browser we use?

The first and the most remarkable issue is working with tables. Tables are a simple and convenient tool for free content placement, and a creative website developer may reach sophisticated results by building inner tables and wise content arrangement. One of the leading differences between browsers is actually table size default values. Ideally, each cell should have height and width settings. In case these settings have not been defined, a browser may "think" there are no such settings and activate its own default values - and different browsers have different default values. A table with no defined size values will look one way in Internet Explorer, whereas Firefox is based on a different technology and will display the table in a different way, unless you strictly define the table's dimensions. Thus, it is crucial to define the size of the table and its cells. It would be enough to specify values for one cell, which will be valid for the entire row or column. Working in such a way will prevent you from unnecessary errors, because all values are numerical and may be recognized by all existing browsers. Another useful tip is related to table size when a table has a background image. Be sure to fit image size to table size, so that it will not be cropped (if it's larger than the table) or repeated (if it's smaller than the table).

Another outstanding difference is working with spaces, which follows from exactly the same reason. The space character in one browser may be one pixel wide, in another browser - a number of pixels, while in the third one there may be a restriction upon displaying more than one space in a row. Some browsers may even treat a single space as a line break. Besides, a space is not a proper character and one should not move the text by means of multiple space insertion. The rule of thumb is - never use more than one space in a row! For the purpose of moving and pushing text around, use centering and alignment tools, indentation changes or place your content in tables. You may enter the page editor and select the entire content by pressing CTRL+A. Redundant spaces and line breaks will appear as contentless "blocks", colored blue. It is strongly recommended to remove them.

Some browsers are being strict about proper alignment, i.e. if the content is not aligned in a certain direction, it may be displayed in a free manner. For example, if we write, let's say, in Arabic - from right to left - in browser A, we should not expect browser B to display our content in the same way. We shall select the text and align it to the right, thus making certain that any browser in any language and of any configuration will know that our Arabic or Hebrew text must be aligned to the right. This is also true regarding images and other contents.

Advanced users having some expertise in HTML may wish to take a look at the source code and replace certain HTML tags, such as replacing tags (paragraph) with tags (division). There is a well-known lack of coordination between browsers in displaying paragraph tags - Firefox, for example, treats each tag as a line break, whereas Internet Explorer 7 ignores them. Ironically, Internet Explorer 8 displays them in a similar manner as Firefox.

Source: http://goo.gl/eOQjM