This article is for developers who are more touch with HTML and CSS and generally working with table less layout. Due to the nature of the browser many developers faces problems to design the HTML and CSS. For example suppose you fixed some problems in browser like Firefox then same layout break in Internet Explorer, suppose you fixed in IE7 and it breaks in IE6. It takes lot of time to fix the problems for web developers. Its really a nightmare for developers to get the pixel perfect layout.
Sometimes you need to use some special exception rules to fix the layout for the special browser and there is no other way. There are lots of CSS hacks are available that will make sure that certain CSS styles are or are not passed by certain browser.
Mainly there are two ways to hack the CSS, Conditional comments and Easy selectors.
Conditional comments
There are again two types of Conditional comments, Positive and Negative.
The syntax for conditional comments is as follows:
Positive
<!--[if condition]> HTML Content <![endif]-->
Negative
<!--[if !condition]> HTML Content <![endif]-->
And condition is one of the following:
- IE
- Any version of IE
- lt IE version
- Versions less than version
- lte IE version
- Versions less than or equal to version
- IE version
- Only version version
- gte IE version
- Versions greater than or equal to version
- gt IE version
- Versions greater than version
Where version is the version number of Internet Explorer browser, 5, 5.5, 6, 7 or 8.
In the above example, styles.css applies to all browsers, ieonly.css only applies to all versions of Internet Explorer, ie6_and_below.css applies to all versions of Internet Explorer below IE 7 and not_ie.css applies to all non-IE browsers.
Easy selectors
Most in-CSS hacks deal with selector bugs. Below is a list of different IE versions and the beginnings of selectors that are known to select elements in them. All of these selectors use valid CSS.
IE 6 and below
- * html {}
- IE 7 and below
- *:first-child+html {} * html {}
- IE 7 only
- *:first-child+html {}
- IE 7 and modern browsers only
- html>body {}
- Modern browsers only (not IE 7)
- html>/**/body {}
- Recent Opera versions 9 and below
- html:first-child {}
Note that the hack for IE 7 and below is actually two separate selectors: one for IE 7 and one for IE 6 and below. The rest of the desired selector must be added to both parts of the hack. The two parts cannot be combined with a comma, because IE 6 and below will fail to correctly parse the selector and won't be targeted.
Good to know
!important
Cascading Style Sheets cascade. This means that the styles are applied in order as they are read by the browser. The first style is applied and then the second and so on. What this means is that if a style appears at the top of a style sheet and then is changed lower down in the document, the second instance of that style will be the one applied, not the first. For example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red:
p { color: #ff0000; }
p { color: #000000; }
The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, in the above example, you would write:
p { color: #ff0000 !important; }
p { color: #000000; }
Conclusion
Now a days, most of the recent browsers have very good support for CSS - certainly good enough for you to be using CSS to control layout and presentation. Sometimes however, certain page elements will appear differently in different browsers. Don't worry too much if you don't know the reason why - if you can fix it up with these CSS hacks then your web pages should look great across all browsers!
By
Vijay Thummar
Consultant at CIGNEX, India Office
