treehouse : what would you like to learn today?
Web Design Web Development iOS Development

IE 6 7 8 issues with stylesheet

  • Hello

    Very sorry if I created another IE topic, but I am lost - today I am playing with css stylesheet specially for IE6,7,8 and thanks to the this article http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ I understood some tricks but still, I have some issues with switching css stylesheets.

    I am using these calls:

    I have only one css file because I think in my project don't need extra styling for each version.

    The problem what I have that the IE css is not called properly. Something is still called from main css file, like fonts or backgrounds. For example: if I want to load some online google fonts but for old IE I would like to use classic screen verdana.

    Is it possible to dramatically load the css file only for IE? The fonts as well?

    Thank you very much for answer.

  • I don't know if this helps or not, but if you are trying to exclude your regular stylesheet for IE browsers, you can try this:

    `<!--[if !IE]><!-->
      <link rel="stylesheet" type="text/css" href="YOUR-STYLESHEET.css" />
    <!--<![endif]-->`
    
  • Here are all the ways do feed code to ie using one style sheet http://www.visibilityinherit.com/code/target-ie.php

  • @Eric, thanks for sharing! I love your use of PHP in method #6.

  • Thank you for answers. You are right, the PHP method is working very nicely. For understanding, if I want create for each IE6-7-8 browser css style, do I have to write the selector .ie6 or .ie7?

    For expample:

      .ie6 p {color:red;}
      .ie6 #wrap{
        width: 960px;
        margin-right: auto;
        margin-left: auto;
        background-color: #111111;
      }
    
      .ie7 p {color:green;}
      .ie7 #wrap{
        width: 960px;
        margin-right: auto;
        margin-left: auto;
        background-color: #222222;
      }
    
      .ie7 p {color:green;}
      .ie7 #wrap{
        width: 960px;
        margin-right: auto;
        margin-left: auto;
        background-color: #333333;
      } 
    

    Thank you.

  • Great I'm glad you like it. You would just say...

    .ie6 p, .ie7 p, .ie8 p {color:red;}
    
  • dude, before you go any further you might want to check this out: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

  • That's right. Until html5+css3, I have tried to have all my websites responsive in all browser, so I didn't care about stylesheet switching. But today we have finally a lot of amazing staff thanks to webkits. Unfortunately, still many people don't know that it's exist different browser then IE. Also I have to learn more about styling for IE6-7-8. :((((((