CODEWITHSUNDEEP
htmlcss
Marcos Morales Rodrigo
Marcos Morales Rodrigo

Reputation: 21

Conditional comments not working for browsers other than Internet Explorer

<!--[if !IE]>
    <style type="text/css" media="screen">
        .title {
            color: rgba(0, 0, 0, 0);
            display: block;
            font-family: sans-serif;
            font-size: 50px;
            margin-left: 0px;
            margin-right: 5px;
            text-align: right;
            text-shadow: rgba(255, 255, 255, 0.247059) 2px 2px 2px, #888 0px 0px 0px;
        }
    </style>
<![endif]-->

This piece of code in head tags doesn't works never... why? I have been searching a lot throught internet and everyone says it works... but, actually, in my web-page doesn't. I have used it a lot of times and it worked... but something I should have wrong... Anybody can help me, please? Thanks in advance!

Upvotes: 1

Views: 1448

Answers (4)

Marcos Morales Rodrigo
Marcos Morales Rodrigo

Reputation: 21

I will answer myself because I found the problem, which wasn't anything related with IE selector tag neither rgba attribute in itselves (as somebody said before: IE 10 supports this last one), but with the alpha gradient applied. For some reasson, the alpha value is not rendered very well in IE and it results in a completely different style. Changin the 0 (alpha value) in the font color and playing a little with those color values is possible to get a very similar result in IE and other browsers. So, thank you so much for everyone who has been trying to help me. I hope this helps another person. :)

Upvotes: 0

Jason P
Jason P

Reputation: 27012

As posted in this SO answer (that I linked to in the comments):

Browsers other than IE treat the conditional statements as comments because they're enclosed inside comment tags.

<!--[if IE]>
Non-IE browsers ignore this
<![endif]-->

However, when you're targeting a browser that is NOT IE you have to use 2 comments, one before and one after the code. IE will ignore the code between them, whereas other browsers will treat it as normal code. The syntax for targeting non-IE browsers is therefore:

<!--[if !IE]-->
IE ignores this
<!--[endif]-->

You have this:

<!--[if !IE]>
some stuff
<![endif]-->

which non-IE browsers see as this:

(There's nothing, because it's just a comment to non-IE browsers).

You need this:

<!--[if !IE]-->
some stuff
<!--[endif]-->

so that both the opening and closing tags are fully-contained comments to non-IE browsers, and the style is rendered.

Upvotes: 6

pwdst
pwdst

Reputation: 13735

What Mystere Man means is that these conditional comments were only supported in versions of Internet Explorer prior to Internet Explorer 10. Since you are saying "apply these styles if it not Internet Explorer" you have a logical impossibility.

I would personally write these as follows-

  <style type="text/css" media="screen">
        .title {
            color: #000000;
            color: rgba(0, 0, 0, 0);
            display: block;
            font-family: sans-serif;
            font-size: 50px;
            margin-left: 0px;
            margin-right: 5px;
            text-align: right;
            text-shadow: rgba(255, 255, 255, 0.247059) 2px 2px 2px, #888 0px 0px 0px;
        }
  </style>

You will notice the extra "color" property of the title class - this will be overridden in browsers that support RGBA (which will use that value instead) but will be a fallback value for those browsers that do not support it. That way all browsers that do not support RGBA (for example Firefox 2 and below) will also have a usable fallback colour. I've not bothered providing a fallback for text-shadow as Internet Explorer 8 and below do not support this property either - your users can live without it.

There is no harm providing a standard CSS property that a browser does not understand, it will simply be ignored by that browser and only used in browsers that do understand it. See more about CSS fallback properties.

If you must use conditional comments to solve this you could look at targeting those versions of Internet Explorer you know do not support RGBa (don't penalise users of Internet Explorer 9 - 11 whose browsers do support the property).

<!--[if lte IE 8]>
<style type="text/css" media="screen">
        .title {
            color: #000000;
        }
</style>
<![endif]-->

Do not do this when fallback properties are a better solution, as in this case.

Upvotes: 1

kennypu
kennypu

Reputation: 6051

you're missing the [endif]: 

<!--[if !IE]>
    <style type="text/css" media="screen">
        .title {
            color: rgba(0, 0, 0, 0);
            display: block;
            font-family: sans-serif;
            font-size: 50px;
            margin-left: 0px;
            margin-right: 5px;
            text-align: right;
            text-shadow: rgba(255, 255, 255, 0.247059) 2px 2px 2px, #888 0px 0px 0px;
        }
    </style>
<!--[endif]-->

note: this will apply the style on non-IE browsers. If you wanted to use it on IE browsers, change the !IE to IE

Upvotes: -1

Related Questions