When building a webpage, we wish to make it compatible for as many browsers as we can. The reason is that many different browsers exist, and with a growing population of internet users, even the least commons are used by a large number of people. Different browsers render pages differently. Before we will continue we will explain the term “layout engine” or “rendering engine”.

“A layout engine, or rendering engine, is software that takes marked up content (such as HTML, XML, image files, etc.) and formatting information (such as CSS, XSL, etc.) and displays the formatted content on the screen. It "paints" on the content area of a window, which is displayed on a monitor or a printer. A layout engine is typically used for web browsers, e-mail clients, or other applications that require the displaying (and editing) of web contents.”

http://en.wikipedia.org/wiki/Layout_engine


There are many different rendering engines that we come across. Firefox uses a rendering engine called Gecko. Internet Explorer uses Trident (MSHTML), Opera is using presto. Konqueror (common on unix/linux) is using KHTML, which is a KDE open source engine. Based on the KHTML, there is the WebKit, which is used by Safari and Google Chrome.
The variety of rendering engines makes like really difficult for us web developers. In fact, we will normally have to check everything we write on all different browsers. The differences not only appear between browsers, but sometimes between different versions on the same browser. Here we will discuss a variety of differences between different versions on Internet Explorer. Different browsers also use different JavaScript engines. We will not refer to JavaScript changes here.
The first thing you should know is that Internet Explorer 8 was the first version that renders the page correctly according to the Web Standards Project (WaSP). The group provided a test that can state whether a browser is viewing the contents according to web standards (read more - http://en.wikipedia.org/wiki/Acid_2_test). IE 6/7 using an older Trident version did not pass this test. Firefox will render the page a lot like IE8, since there are both compliant. When writing a web page, we need to make sure that it shows properly even in browsers that are non-compliant. IE 6 is the most problematic. Here are some differences we can notice:

  • IE6 does not support PNG rending. This was introduced first in IE7.
  • In IE6, margin in many occasions is not accurate. Here is an example code. This will look identical in IE7/8/FF, but notice that on IE6 the left margin will be about twice as wide as it should be:
    <body style="border:1px solid; height: 100%; width: 100%; padding:0px; margin:0px;">
    <div style="border: 1px solid; float: left; width: 30px; height: 20px; margin-left: 20px;">Text</div>
    </body>


    Incorrect margin on IE6

  • For <div>’s height, we set the height attribute in the style. For <div>s with a small height, this will not always be enough. In IE6 the height of the <div> is the maximum between line-height/font-size/height, hence, if we want a <div> with the height of 8 pixels we will define height:8px; font-size:2px; line-height:2px; for example.
  • CSS min-height attribute is not recognized by IE (all versions).
  • Float attribute is treated differently in different browsers. It is not recommended to have floating objects and non-floating objects in the same level under the same parent. Here is a little code example. This shows differently on IE and on FF:
    <body style="border:1px solid; height: 100%; width: 100%; padding:0px; margin:0px;">a
    <div style="border: 1px solid; float: left; width: 30px; height: 80px;">Text</div>
    </body>
  • Inheritance in CSS is very commonly used. One thing we have to make sure of, is that the hierarchy is very clear. We will avoid having the same class name twice in the same hierarchy. For example:
    .header .left .linksList .left {}
    This can cause us problems. When we work under the hierarchy of .linksList, if we specify a <div> with the class left we will inherit both from .header .left and from .header .left .linksList .left. This can be interpreted differently under different engines.


There are many more differences. The key is to take the time when you build the HTML layout, and check how the code works in the different browsers. A tool I recommend using is IETester (http://www.my-debugbar.com/wiki/IETester/HomePage). It is a program that can view a page as it would appear in different versions of IE. It contains the different versions of the Trident rendering engine.

 

Viewed 12877 times.
Share |
How to migrate from o... (Daniel, 16:52 06/04/2013)
How to redirect SNMP ... (Daniel, 18:32 24/08/2012)
How to add httpd.conf... (Daniel, 19:20 24/03/2012)
How to avoid entering... (Daniel, 03:11 27/12/2011)
How to configure SOFT... (Daniel, 23:24 26/12/2011)
Subversion - Tortoise... (21:02 17/01/2010, 119184 views)
How to install Nagios... (01:08 23/12/2011, 43944 views)
Byte Order Mark (BOM)... (17:36 22/02/2010, 28079 views)
How to avoid entering... (03:11 27/12/2011, 23402 views)
Raid Types (17:54 09/02/2010, 20784 views)