Firefox loading all css files referenced in conditional comments - html

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).

Related

ie only stylesheet not working, code included

I coded a website, and obviously when uploaded it to test it, its messing up in IE.
Im trying to insert an IE only stylesheet, but its not working, the code I have is:
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ieonly.css" />
<![endif]-->
Whats going wrong?
Any one can help me, that would be amazing?
On IE everything is getting mis aligned.
Well your syntax seems ok.Try using the developer toolbar to check if the path to your CSS file is right
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Need some help attaching different stylesheets to my homepage?

I need a concrete if statement that will work in an .aspx file (default.aspx) that I am building, the file itself serves as my homepage. I have not moved onto further pages. I currently catering for IE8 + 7, FireFox and Chrome.
I seem to be noticing issues in layouts even though in my markup I have this:
<!-- <link rel="stylesheet" type="text/css" href="css/homepageStyes.css" /> -->
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
Whenever I comment out either line of code, my layout problems go away but at the moment I reckon the mark up posted above is not concrete enough in telling a browser which style sheet it is to attach?
I need something along the lines of but in XHTML mark up ofc:
if (browser == "ie" || browser != "ie6") // not supporting ie6
{
// attach this style sheet:
// <link rel="stylesheet" type="text/css" href="css/ie.css" />
}
else
{
// attach this style sheet:
// <link rel="stylesheet" type="text/css" href="css/homepageStyes.css" />
}
I'm a C# developer so this is my first time building a website from scratch. So the C# if statement above was a good way of explaining what I need.
Use these conditional comments:
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="css/homepageStyles.css" />
<!--><![endif]-->
The <!--[if gt IE 6]> comment ensures only IEs newer than version 6 will process and link to ie.css.
The <!--[if !IE]> tells IE to ignore what's in that conditional comment. The <!--> that directly follows is to terminate the if !IE component while maintaining a valid document. Anything past that will be read by other browsers and parsed, so homepageStyles.css will be linked to.
The second <!--> opens a comment so that IE can safely read the <![endif]--> that directly follows.

Different CSS when using different browsers problems?

<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="iemaster.css" />
<![endif]-->
<![if !(IE 5)]>
<link rel="stylesheet" type="text/css" href="master.css" />
<![endif]>
to load a different stylesheets depending on whether or not it is IE. The problem is that i have button bar going across the top. In IE I need the padding at 0 and other wise i need it at 200px, but no matter what I do to the values, the bar in IE doesn't seem to change. It changes for chrome though. The only thing that seems to work is if I make the class affecting it a different name then the non-IE one. Of course this means my non-IE wouldn't load properly. Other then this the CSS seems to load perfectly. Why is this?
That's not how you should be doing it.
Nobody is using IE5, so forget about that.
Do it like this instead:
<link rel="stylesheet" type="text/css" href="master.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->
Your master stylesheet will get loaded in every browser.
Are you sure you care about IE6? If so, put IE6 specific rules inside ie6.css.
Put IE7 specific rules inside ie7.css.
You shouldn't need a separate stylesheet at all for IE8 or IE9. Those browsers are compliant enough to handle the same stylesheet as the other browsers.
Your bottom block is not actually a comment (it doesn't begin with <!--) so all browsers will read the master stylesheet. Also, check your logic: IE6 is both greater than IE5 and != IE5, so the main stylesheet will get loaded for some versions of IE anyway.
If you reverse the order that you link to the stylesheets that should fix it. What's happening is the IE-specific style sheet is being set first, but the master.css is overwriting it after.
Also, I don't think you need <![if !(IE 5)]> and <![endif]> around the non-IE one.

IE cross browser compatibility problem

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]>

Conditional comment not working for a <link>

I have a a conditional comment in my page to fix a double padding-top problem with IE7.
I am trying to add "padding-top:5px;" to a DIV only in IE7. The rest of the browsers (including IE6 and IE8) use "padding-top:10px;" contained in stylesheet.css.
stylesheet.css contains
.clImageSamplerText {padding-top:10px;}
stylesheet_ie7.css contains
.clImageSamplerText {padding-top:5px;}
If I use
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<style>.clImageSamplerText {padding-top:5px;}</style>
<![endif]-->
my code works no problem.
If I use
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<link href="stylesheet_ie7.css" rel="stylesheet" type="text/css">
<![endif]-->
it does not work.
Anyone have any ideas?
Just a shot in the dark -- if you are using an XHTML doctype, you might find that closing your <link /> tags will fix the problem.
So try:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="stylesheet_ie7.css" />
<![endif]-->
I have included link elements in conditional comments without any problems before, so I don't think it matters that you do that instead of writing it out in a style element. My best guess is that the document is not finding stylesheet_ie7.css. Are you sure it got uploaded to the right place?