Contact
About
PrivacyWelcome to TheCredence.com - You may like to subscribe to our RSS feed to stay updated.
As declared by me in my previous post, I was trying to not post PHP stuff but than I had to change my mind as I am not able to finish any of the pending drafts(there are 6 currently!) so I am again putting a PHP post.
I have to say, this blog is seriously turning into PHP blog only 
I will sit tonight and finish all the pending articles on social bookmarking, SEO and Eric Schimidt on Web 3.0 to maintain neutrality 
Anyway this tutorial is about a Problem which has bugged me a lot and I am sure that I am not the only one. The eternal problem of building websites/pages which look good in all browsers. The moment you use a little javascript + some tables + css, there are very good chances that the page will get screwed up in some version of some browser.
Either it will not display something properly or the font sizes don't match in all browser making the page look ugly. To solve these problems, What you can do is to identify the browser type and tell browser to read only a part of your html source code related to that browser. These are somewhat like Guards Operators in C.
The browser type can be detected using many different techniques. Conditional comments are a feature only available to IE 5 or later. You can use it to expose CSS styles or any html code to a particular version of IE. These are comments that will be ignored by other browsers
Edit 1 - darn, Wordpress is not able to show the exact codes due to these expressions hence I have to put the codes as it is. I have separate the code with "----------------" and have italicized the code to make it stand out.
Introduction and syntax
There basic syntax of conditional expressions is as follows:
--------------------------------
<!--—[if expression]--> HTML <!--[endif]-->
--------------------------------
If the expression is true than the html inside will be executed. For example,
--------------------------------
<!--[if IE 5]>
Welcome to Internet Explorer 5.
<![endif]-->
--------------------------------
The "html" will only be visible in IE 5.
Expression types
* Internet Explorer: The only currently supported feature is the string "IE", corresponding to Internet Explorer. Example,
--------------------------------
<!--[if IE]>
Welcome to Internet Explorer 5.
<![endif]-->
--------------------------------
* Version number: An integer or floating point numeral, corresponding to the version of the browser. Example,
--------------------------------
<!--[if IE 6]>
Welcome to Internet Explorer 6.
<![endif]-->
--------------------------------
* NOT operator: The “!” operator is also available for use.
* Comparison operators: There are several comparison operators you can use. Such as lt, lte, gt and gte. They are just the short version of “less-than”, “less-than or equal”, “greater-than” and “greater-than or equal” operator.
--------------------------------
<!--[if lte IE 7]>
This browsrs version is less then or equal to IE 7.
<![endif]-->
--------------------------------
Implementation
The conditional comments are implemented in two ways. Down-level hidden and down-level revealed.
In down-level hidden style the higher version condition is placed first and lower versions ignore it. Example,
--------------------------------
<!--[if IE 6]>
Welcome to Internet Explorer 6.
<![endif]-->
html
--------------------------------
While down-level revealed style gradually reveal styles for lower version browsers.
--------------------------------
<!--[if !IE]-->
<link href="non-ie.css" rel="stylesheet" type="text/css" />
<!--[endif]-->
--------------------------------
When comparing this type of comment to the basic HTML Comment, notice that there are no "--" characters immediately after the opening "
Conditional expressions are powerful and valid way for browser detection. Most other ways rely on browser bugs, But this technique is totally valid and much more organized. So lets solve some pesky browser incompatibility error, shall we ? [If someone can tell me how can I display the codes properly in wordpress than that would be awesome!]
Edit 2 - If you are wondering about what happened to Firefox, Mozilla or Opera than any version of it will have equivalent to IE. Just check it on net and apply the code. Sometimes trial and error is also not a bad thing to do.
Related - Best PHP Frameworks, Create thumbnails using GD and PHP, Make Linux desktop like Windows.
Popularity: 6% [?]
(No Ratings Yet)
Loading ...Links you may find interesting -