Cascading Style Sheets, more commonly known as CSS, is used to denote the look as well as the formatting of a document, written in markup languages like HTML and others. However the most commonly used browser, i.e. Internet Explorer hasn’t been all that happy about CSS properties and has constantly faced compatibility problems with it. Microsoft, the father of Internet Explorer has often been criticized for ignoring some of the most useful and important CSS properties, which could have made the web experience on IE very unique and special. Some of the common compatibility issues between IE and CSS are listed below.
Outline
The ‘outline’ property offered by CSS, has been very useful in determining the source of the problem or error in the web coding program. This property enables one to put border around the block level elements, which are at fault. However neither Internet Explorer 6 nor 7 supports the CSS Outline property.
Empty-Cells
One of the most common CSS properties like Empty Cells is also not supported on the Internet Explorer. The Empty Cell Property applies to those elements that have their display in table-cell format. In such cases, while undertaking the dynamic repopulating of a table, if you don’t want to display the borders, background color, or background image on the empty cell, you can remove them by using ‘Use empty-cells: hide’.
Clip Property
Another simple and commonly known CSS property is the ‘Clip’. The Clip Property, allows the programmer to point out the invisible areas in an element. The common syntax of Clip looks like:
div.clipped {
padding: 20px;
width: 400px;
height: 400px;
clip: rect(20px, 300px, 200px, 100px);
position: absolute;
}
However, neither Internet Explorer 6 nor its upgraded version7 supports this property.
Display
Thanks to the compatibility issues between IE and CSS, only one of the three values i.e. ‘Inline’, ‘Block’ and ‘None’ is used by programmers in designing a webpage. Apart from the usual properties, Display can also be modified with values like ‘inline-block’, ‘table’, ‘inline-table’, and ‘table-cell’, which can be pretty handy in resolving the specific layout issues.
Caption-Side
The Caption Side Property of the CSS enables the programmer to determine on what side of a table, the table’s caption would appear. The commonly accepted values for this property are listed as top, bottom, left and right. However, neither IE 6 nor 7 accept this property, and therefore the caption will always appear on the top of the table.
The ones listed above are some of the most common compatibility issues between IE and CSS, an in-depth analysis can reveal many other issues. Web Design India
Before the year 2004 when Internet Explorer 6 was dominating browser market share, netizens used to face severe problems of Float Margins in the said version of explorer. During this period, tech experts were unable to fix the problem in an altogether manner, which had lead netizens to work along with the unfixable bug. The bug was entailing great variations in the ‘setting of margin’, further playing havoc with the display of any object on the web page.
