Multiple Stylesheets for IE

So many posts like mine on IE!!! I think I am on to something but I just need to understand how the browser knows when it’s IE and how to look for it.

Is doing this /* IE 7 hack */ after a CSS line really all I need to make it understand?

Hi

Here is an article that explains Internet Explorer conditional comments
https://divitodesign.com/css/css-conditional-comments-guide/#readmore

This /* IE 7 hack */
has nothing at all to do with the effect – it is just a comment to anyone reading the code explaining what is going on.

All browsers other than IE see this

<!--[if IE 7]>
code here
<![endif]-->

as an HTML comment block, and skip over it.
IE browsers see that as code they interpret if it applies to their version of IE. That is, IE6 knows that it is IE6 and so will not execute code in a block declared as IE7.
This is a conditional hack created by Microsoft to allow developers to target CSS to specific versions of IE, because IE has not been standards compliant.

Thanks. Just a few more questions ??

Do you think it’s better or worse or makes no difference whether I reference a different style sheet altogether or import the IE styles into my main css file?

I question if I import and I keep this code as is in my header:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" /> does it still know about IE. Or do I past this in front of it <!--[if lte IE 7]>

Also if I put this line of code in my header.php it’s grayed out, is that right? <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="IE7styles.css" /><![endif]-->

<!–[if lte IE 7]>
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_url’); ?>/ie7.css” media=”screen” />

Do you think it’s better or worse or makes no difference whether I reference a different style sheet altogether or import the IE styles into my main css file?

If you import them into your main stylesheet then every browser is going to apply that styling. The point of this is to have only IE browsers apply styling. You can’t use the conditional tags within a CSS file as they are HTML comments.

I question if I import and I keep this code as is in my header:
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘stylesheet_url’); ?>” /> does it still know about IE. Or do I past this in front of it <!–[if lte IE 7]>

The way it is intended to be used is, the main stylesheet applies to ALL browsers, including IE. The ie stylesheet follows the main stylesheet in the header declarations, and it does not contain all the styling, just the tweaks that IE needs. The way CSS works is when two stylesheets apply styling to the same page element, the styling in the last stylesheet declared overrides the styling in stylesheets declared earlier in the page load process.

IE conditional stylesheets are typically very short, do not duplicate the entire site’s stylesheet, contain only the few tweaks necessary to get IE to behave as desired.

Also if I put this line of code in my header.php it’s grayed out, is that right?
<!–[if IE 7]> <link rel=”stylesheet” type=”text/css” href=”IE7styles.css” /><![endif]–>
<!–[if lte IE 7]>
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_url’); ?>/ie7.css” media=”screen” />

Again, IE conditional comments are a special form of HTML comments. All browsers other than IE see them as comments and thus they are greyed out. Even IE sees them as comments, but it takes action on what is contained in those comments when it sees the [if IE7] contained within the comment. So even in IE it will appear greyed out, but IE acts on it anyway.

Thanks Stvwlf for explaining further. This has seemed to work. I wish I would of realized I could of done this a week ago! One final question, oddly enough i see that for whatever reason my alignment get sthrown off in FireFox for Windows. Can I just go about adding another style sheet the same way for this?

No, its not possible to have a stylesheet targeted specifically for any browser other than IE.

If your alignment is thrown off in FF and its not thrown off when you don’t have that IE stylesheet included, it means either you haven’t done the commenting out correctly, or you included some tweaks intended for IE in the main stylesheet and have forgotten about them.

If you don’t already use the Firefox Firebug extension, I highly highly recommend it. It will help resolve CSS issues like no other tool I’ve found. It shows you exactly what CSS is being applied, and even lets you change the CSS the browser is using to display the webpage you are looking at so you can experiment. (It doesn’t save your experiments however – you have to do that.)

Great. Thank you so much for all of your help ??

@stvwlf:
in fact you can write different styles for different browsers, other than IE:
https://www.nathanrice.net/blog/browser-detection-and-the-body_class-function/
if the HTML code of the site is standards compliant, you wont need this function; but its good to know about it.

THANK YOU

Removed