WordPress.org

Ready to get started?Download WordPress

Forums

Strange CSS? Problem with a Child Theme and IE9 (8 posts)

  1. kungi
    Member
    Posted 1 year ago #

    Dear WordPress Community,

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

    http://wordpress.org/extend/themes/responsive

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

    Therefore, I read this:

    http://codex.wordpress.org/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: http://666kb.com/i/c5h1xdrh82yt720aw.jpg
    COMP MODE OFF: http://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 ?

  2. kungi
    Member
    Posted 1 year ago #

    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 :(

  3. kungi
    Member
    Posted 1 year ago #

    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?

    http://themeid.com/demo/responsive/

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

    does @import destroys something?

  4. kungi
    Member
    Posted 1 year ago #

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

  5. esmi
    Forum Moderator
    Posted 1 year ago #

  6. kungi
    Member
    Posted 1 year ago #

    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?

  7. esmi
    Forum Moderator
    Posted 1 year ago #

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

  8. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    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 http://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 http://themeid.com/forum

    Thanks,
    Emil

Topic Closed

This topic has been closed to new replies.

About this Topic