IE cross browser compatibility problem - html

i have a problem in using IE. Everthing is good in using firefox but IE 6 seems to be creating more trouble for css. so i used
<![if !IE]>
<link href="ie6.css" rel="stylesheet">
<![endif]>
To fix a problem but it doesnot work. Anything wrong in this code? Because when i altered this css nothing has changed in IE.

Well, your conditional comment says "if not IE".
Also note that you're using a downlevel-revealed conditional comment, which means every browser (except IE) will include the extra CSS file.
Use <!--[if IE]><![endif]--> instead.

Try using this condition statement:
<!--[if lt IE 7]>
<link href="ie6.css" rel="stylesheet">
<![endif]-->
Basically its saying if the browser is less than IE7 then use this style sheet. Works for me.

Try
<!--[if lte IE 6]><link href="ie6.css" rel="stylesheet"><![endif]-->

I'm using this;
<!--[if IE 6]>
this place for your stuff.
<![endif]-->

Change:
<![if !IE]> ! means not IE there
To:
<![if IE]> means if it is IE
to use IE-based CSS.

Is the ie.css placed after any other css files? If you have placed it before your regular css it will be overridden.
It should look something like this:
<link href="other.css" rel="stylesheet">
<![if IE]>
<link href="ie6.css" rel="stylesheet">
<![endif]>

Related

Conditional comment for !IE breaks for old versions of Firefox

I am in a situation where I need to load one of two stylesheets based on what browser is accessing the page:
if anything but IE then load the "new" stylesheet
if IE >= 9 then load the "new" stylesheet
if IE < 9 then load the old stylesheet
This is the code used to achieve that:
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
This works well in all modern browsers, and old versions of IE correctly load the old styles. However in old versions of Firefox (3.6) and potentially others, the new css is not loaded and instead --> is printed to the web page. This is because of the line that states !IE - <!--> has to be added, otherwise IE 11 does not load the stylesheet. If I take that out it works properly in Firefox 3.6.
What is the proper way to set up these conditional comments to ensure it will work properly for the various browsers and versions?
I believe the problem lies in one of the <!-- delimiters, specifically the one in your IE9 conditional statement just before its corresponding <![endif]-->. The <!--[if gte IE 9]> comment hasn't been terminated yet, so it's actually invalid to have another <!-- delimiter there since it's not possible to nest comments in HTML. While current versions of Firefox behave as expected, I wouldn't be surprised if this was the reason Firefox 3.6 handled it differently.
If you get rid of that, Firefox 3.6 behaves correctly:
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<![endif]-->
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
In fact, you can make your code much DRYer by giving your IE9 conditional statement the <!--> treatment, like so:
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
This eliminates the extra reference to the "new" stylesheet altogether while still allowing all browsers as well as IE9 to access it. Note that no other version of IE beyond 9 actually supports conditional comments anymore, so you could go further and change gte IE 9 to just IE 9, and it would still work in newer versions of IE (along with other browsers). Of course, you are welcome to keep it that way for the sake of clarity.
On a side note, although I said that it's not valid to have a <!-- sequence within a comment, the <!--> is interpreted as <! followed by the end delimiter --> rather than a <!-- followed by a >, which is why that bit is fine.

Combine HTML conditional comments to include IE8+ and not IE

I know that for targeting IE8+ you should use:
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
For targeting non IE browsers you can use:
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
You can also combine conditions like this:
[if (IE 6)|(IE 7)]
But my problem, now that I want to target IE8+ or non IE browsers, I try to target them like this:
<!--[if (!IE)|(gte IE 8)]> -->
This should be non IE or IE8+ browsers
<!-- <![endif]-->
This seems to work for non ie browsers but add --> to IE.
I'm guessing it has something to do with the types of comments downlevel revealed, and downlevel hidden, but I'm not sure how to handle them.
From: link
The next example is the opposite: "Only show this content if the
browser is NOT Internet Explorer".
<![if !IE]>
Place content here to target all users not using Internet Explorer.
<![endif]>
Conditional comments are only recognized by Internet Explorer — other browsers treat them as normal comments and ignore them. Note that in the second example above (the one that targets "other" browsers), the content is not actually inside a comment — that's why other browsers display it.
So I think that you can not combine two different types of conditional comments
This is what works for me. I ended up having to include the non-IE-8 css twice:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/css/ie8.css"/>
<![endif]-->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="/css/non_ie8.css"/>
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="/css/non_ie8.css"/>
<!--<![endif]-->
See:
http://msdn.microsoft.com/en-us/library/ms537512.ASPX
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Of course, this causes a performance hit, and makes the code harder to maintain. It does, however, work (at least on the browsers I've tried).
You might consider a good css library, if you can find one that meets your needs.

IE Stylsheets/ Conditional comments Not working

I am trying to make a website look better in IE, so i decided to use conditional comments. So I used this conditional comment to link to the stylesheet.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<![end if]-->
That doesn't work, and it will either use the default stylesheet or it will display a blank page. So then i read somewhere that the comments were like this.
<!--[if !IE]>-->
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<!--<![endif]-->
So i tried that and it did the exact same thing as the other one but the --> shows up on the page. I am still somewhat new to html, and any help would be nice.
Here is the correct format of the comment:
<!--[if IE ]>
Special instructions for IE here
<![endif]-->
here is a NOT IE comment:
<!--[if !IE ]>
According to the conditional comment this is not IE
<![endif]-->
source: http://www.quirksmode.org/css/condcom.html
edit: just noticed that their 'not' example is wrong. i have corrected it.
You should use like this :
Syntax :
<!--[if IE 8]> = IE8
<!--[if lt IE 8]> = IE7 or below
<!--[if gte IE 8]> = greater than or equal to IE8
<!--[if IE 8]>
<style type="text/css">
/* css for IE 8 */
</style>
<![endif]-->
<!--[if lt IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
reference link 1
reference link 2
Also its always good to declare what versions of IE you want to pull up the conditional sheet, for example if you want IE 9 and lower it would be as stated below.
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<![endif]-->
HTML conditional comments were disabled in IE10. CSS conditional comments can be used to target styling in IE10+.
https://www.mediacurrent.com/blog/pro-tip-how-write-conditional-css-ie10-and-11/
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
// IE10+ CSS here
}
When faced with this problem, we went with the <script type="module"> solution. More details here.
We also wanted to access global variables we set using the ES6 code from other ES5 scripts to determine if we wanted to do something different. Obviously an export isn't going to work in this case, but you can assign variables to window.<something> and then access them like you would any other variable.
Only browsers running ES6 and supporting modules will run scripts included with type="module".

Extra text issue in IE7 only

I am getting extra text <![endif]--> in IE7 but on all other browsers does not show.
I searched this code in all files but didn't find it. I am using Drupal-7.
Please check this link here
You aren't writing those end tags correctly in some areas. Some places you put this:
<!--<![endif]-->
Change that to this:
<![endif]-->
Looks like there is an extra <![endif]--> here
<!--[if lt IE 8]>
<link type="text/css" rel="stylesheet" href="http://indivar.bubblespan.com/sites/default/files/css/css_SCgABqUC566L7vt9DqHzb_pIQdEOcwHOijyO95sLhUI.orig.css" media="all" />
<![endif]-->
<![endif]-->
Although it is difficult to tell with all the conditional comments you are using.
Better to use fewer comments and to combine content within the conditional comments as needed.
Please try to re-install conditional css module which you are using for drupal.

Firefox loading all css files referenced in conditional comments

I have a regular CSS file plus two IE specific CSS files. In Firebug in Firefox I noticed the same <div> is getting properties from the three files.
Why is Firefox loading iestyle.css & ie6style.css?
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="iestyle.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="ie6style.css" />
<![endif]-->
Addition
This should definitely be working. Are you sure there isn't an unclosed <!-- or <![CDATA[ hanging around in head?
I think that isn't all the relevant code. Do you perhaps #include those files somewhere else?
Are the conditional comments in the HEAD element or in the BODY element? I haven't tried it, but it's possible that FF only ignores conditional comments if they are in the HEAD element (where they should be).