Strange CSS? Problem with a Child Theme and IE9

  • Dear WordPress Community,

    I just set up a new WordPress site, installed a free theme

    https://www.ads-software.com/extend/themes/responsive

    and started to create a child theme to change it for my purposes.

    Therefore, I read this:

    https://codex.www.ads-software.com/Child_Themes

    and created a new folder in my themes folder, as well as created a style.css with an import of my old style.css.

    everything works fine, except in INTERNET EXPLORER 9, when I’m activating the compatibility mode (left to the refresh sign in the address bar), the theme is not responsive any more.

    In every other Browser (chrome, ff) it works, leading this problem to an enigma for me …
    However, when I turn off the compability mode, everything looks fine.

    Here are screenshots to visualize the problem:

    COMP MODE ON: https://666kb.com/i/c5h1xdrh82yt720aw.jpg
    COMP MODE OFF: https://666kb.com/i/c5h1y4y7ws61aowlk.jpg

    The thing what bothers me is, that if I activate the origin theme (the one i downloaded), and delete my newly created child theme, everything works fine.

    Does anyone has the same problem?

    or should i just ignore it, what do you recommend ?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter kungi

    (@kungi)

    Ok, I found out, that i didnt included the Media queries,

    but nevertheless, it doesn’t work:

    first i had it this way:

    @import url(“../responsive/style.css”); this results to the 2 screenshots above.

    then I changed it to:

    @import url(“../responsive/style.css”) all, print, screen and (max-width: 240px), screen and (max-width: 320px), screen and (max-width: 480px), screen and (max-width: 650px), screen and (max-width: 980px);

    which results that when I turn on Comp Mode, NO CSS rule gets loaded (except the media querys)

    and

    @import url(“../responsive/style.css”) all;
    @import url(“../responsive/style.css”) print;
    @import url(“../responsive/style.css”) screen and (max-width: 240px);
    @import url(“../responsive/style.css”) screen and (max-width: 320px);
    @import url(“../responsive/style.css”) screen and (max-width: 480px);
    @import url(“../responsive/style.css”) screen and (max-width: 650px);
    @import url(“../responsive/style.css”) screen and (max-width: 980px);

    didnt fix it eigther ??

    Thread Starter kungi

    (@kungi)

    Ok, what I can’t understand is the fact, that media queries only works on > IE7, that means that the compatibility mode should break the website, like it does with my problem

    but why is it working with the standard theme demo?

    https://themeid.com/demo/responsive/

    here it doenst matter, and if i just use this theme, everything works.

    does @import destroys something?

    Thread Starter kungi

    (@kungi)

    ok last observation:

    when I copy the whole css file from the standardtemplate to my new one, instead of using @import, everything works fine, even in Comp mode …

    https://www.broken-links.com/2007/02/15/ie7-and-import-media-types/

    Thread Starter kungi

    (@kungi)

    Thanks man

    exactly my problem -.-

    so only workarounds are:

    -) copy whole stylesheet to child theme
    -) hardcoded when importing css:

    <style type=”text/css” media=”print”>
    @import url(‘print.css’);
    </style>
    or
    <link rel=”stylesheet” href=”print.css” media=”print”>

    right?

    I’d suggest one of the last 2 options inside an IE7 conditional comment.

    Hi,

    This isn’t actually a problem, it’s more a setup browser/issue.

    Media queries are already included in /responsive/style.css and when creating a Child Theme (like we have here https://themeid.com/forum/topic/505/child-theme-example/) just include all media’s within /responsive-child-theme/style.css and problem solved.

    Same goes with print, they’re also media and located in a Parent Theme. There’s no IE7 compatibility issues, but you will need to have JavaScript enabled to get “Responsive” work on old browsers such as IE7.

    If you need more information, please don’t hesitate to drop us a note at https://themeid.com/forum

    Thanks,
    Emil

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Strange CSS? Problem with a Child Theme and IE9’ is closed to new replies.

Tags