Custom .css for IE not working

  • Resolved felilikesflowers

    (@felilikesflowers)


    12 years, 1 month ago

    Hello,
    so I am finished with my website and it looks great on all major browsers except, of course, IE.

    I have spend the last 2 days looking all over the forums for an answer to why Internet Explorer isn’t reading the custom ‘iestyle.css’ file I created for it.

    It all seems very simple and makes a lot of sense to create a second css file just for ie, but for some reason it is not working for me.

    Any help with this would be greatly appreciated.

    I am working with IE7 and created a child theme of twenty eleven. The url is https://www.enlightenedinnergame.com

    So I duplicated the style.css file, renamed it iestyle.css and uploaded it with my FTP client to my child theme’s folder ‘twentyeleventest’.

    In my header.php file I added this between the <header></header> tags:

    <!--[if lte IE 7]>
<link href="https://www.enlightenedinnergame.com/wp-content/themes/twentyeleventest/iestyle.css" rel="stylesheet" type="text/css" />
<![endif]-->

    I tried out different versions for the url, but nothing seems to work.

    If everything would work fine, I would have to edit the custom .css file solely through the FTP client, correct?

    If anybody is out there that is familiar wit this old problem and can tell me how to overcome it, please help!!

    Thank you so much in advance,
    Felicitas

Viewing 15 replies - 16 through 30 (of 45 total)
  • Thread Starter felilikesflowers

    (@felilikesflowers)

    Thank you so much Andrew, I really appreciate your help! <3

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What do you have in your .htaccess file?

    Thread Starter felilikesflowers

    (@felilikesflowers)

    I don’t have that file in my directory and can’t find it in twentyeleven either…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Have you talked to your hosting service providers of this issue?

    Thread Starter felilikesflowers

    (@felilikesflowers)

    That I can’t find the file, you mean?

    No, not yet, will do. Dreamhost has an excellent customer service.

    Is the syntax I put in the header.php file correct though?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Is the syntax I put in the header.php file correct though?

    Yes. For example, if you’re searching for this;

    https://www.enlightenedinnergame.com/wp-content/themes/twentyeleventest/style.css

    The file is found.
    Then you change (in the browser URL) the filename from style.css to iestyle.css and the file is not found.

    Thread Starter felilikesflowers

    (@felilikesflowers)

    Yes, I tried this too.

    But I mean is this

    <!--[if lte IE 7]>
<link href="https://www.enlightenedinnergame.com/wp-content/themes/twentyeleventest/iestyle.css" rel="stylesheet" type="text/css" />
<![endif]-->

    correct? I put it between the two <head></head> tags.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Looks okay, but I hadn’t checked the syntax. Run it through W3C’s validator to make-sure.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The validator says it’s fine, it does throw an error but that’s because I had just tested that snippet of code. It was expecting a document.

    Thread Starter felilikesflowers

    (@felilikesflowers)

    Thanks Andrew!
    I contacted dreamhost… let’s see what they say. I hope they will shine some light on this.

    If you should come up with any other ideas I’d be more then grateful for any advice.

    Danke!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In the Remote site directory of ‘iestyle.css’, from this screenshot, is there a file named ‘style.css’?

    Thread Starter felilikesflowers

    (@felilikesflowers)

    Yes, it is in there.

    https://www.enlightenedinnergame.com/wp-content/uploads/2013/01/ScreenHunter_04-Jan.-27-12.29.jpg

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In the mean-while, let’s try using JavaScript to add a class in your <body> element if the browser is IE7 or less. So you can target pages in CSS that only have that class.

    Instead of your iestyle.css file, can you try adding this JavaScript;

    <script type="text/javascript">
 jQuery(document).ready(function($) {
    $('body').addClass('ie7');
 });
</script>

    So, from this;

    <!--[if lte IE 7]>
<link href="https://www.enlightenedinnergame.com/wp-content/themes/twentyeleventest/iestyle.css" rel="stylesheet" type="text/css" />
<![endif]-->

    To this;

    <!--[if IE 7]>

<script type="text/javascript">
 jQuery(document).ready(function($) {
    $('body').addClass('ie7');
 });
</script>

<![endif]-->

    Thread Starter felilikesflowers

    (@felilikesflowers)

    Okay, cool. Done.
    But this would only be for IE 7, right? Or should it say

    <!--[if lte IE 7]>

    instead of

    <!--[if IE 7]>
    ?

    Also, how would I edit stuff for ie now with that new code in place?

    (Sorry, I have no clue about Javascript…”blush”)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    But this would only be for IE 7, right? Or should it say

    Oh yeah, that’s right.

    Also, how would I edit stuff for ie now with that new code in place?

    It’ll be some CSS in your Child Theme stylesheet (style.css file) like this;

    body.ie7 {
 background: red;
}

    Or

    body.ie7 h1 {
 font-size: 30px;
}

    You’d prepend each style you want applied to IE7 or less with a selector named “body.ie7”.

Viewing 15 replies - 16 through 30 (of 45 total)
  • The topic ‘Custom .css for IE not working’ is closed to new replies.