IE(10) not showing CSS from Twenty Twelve Child Theme

  • Resolved jackolive

    (@jackolive)


    11 years, 6 months ago

    I cannot get Internet Exporer (IE 10) to read my twentytwelve child theme style.css. I haven’t even checked older versions of IE. It looks fine in Chrome and Firefox. I have searched and searched the codex and google. I have also read several posts (19 pages worth) on the theme support page. I have tried a few different fixes. I have my wordpress (version 3.6.1) site in a subdirectory.

    https://www.gotbarking.com/info/

    I have read that “With Twenty Twelve being “mobile-first”, IE got overlooked a bit”. I have customized the site to my liking with much patience, research and trial and error. I have a few plugins installed and have made some customization to several php files including functions.php.

    Is there or should there be some documentation on the theme page that states this issue and how to address it before install?
    Is there a fix for this or should Twenty Twelve be used primarily for mobile sites?

    This is what I understand.

    If you are going to customize a theme to make a child theme. (done)
    Insert style.css into child theme. (done)
    Make changes to child theme style.css including add @import url(“../twentytwelve/style.css”); to top. (done)

    This is what I do not understand about this issue.

    Do I have to include a /css/ie.css folder in child theme? (done)
    Do I add the same changes in child style.css to /css/ie.css? (added some css, did not work)
    How do I rectify changes in child style.css with parent style.css and /css/ie.css in regards to “Media Queries”?

    Most of my css customization in the child style.css is not structured under media queries including css for new elements not included in parent style.css.

    I have both of the following in my header.php.

    <!--[if lt IE 9]>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if gt IE 7]>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/ie.css" media="screen" type="text/css" />
<![endif]-->

    I found the following fix in the forum and several other places (using both twentytwelve-child and mytheme code). It doesn’t work. I get an error when using “twentytwelve-child code (posted below).

    /**
 * remove twentytwelve-ie css must use priority greater than 10
 * then add our special version in child theme's css folder
 */
function twentytwelve-child_dequeue_styles() {
	wp_dequeue_style( 'twentytwelve-ie' );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve-child_dequeue_styles', 11 );

function mytheme_equeue_styles() {
	global $wp_styles;
	wp_enqueue_style( 'twentytwelve-child-ie', get_stylesheet_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '1.0' );
	$wp_styles->add_data( 'twentytwelve-child-ie', 'conditional', 'lt IE 10' );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve-child_equeue_styles', 11 );

    Parse error: syntax error, unexpected ‘-‘, expecting ‘(‘ in /home/content/60/8825060/html/gotbarking/info/wp-content/themes/twentytwelve-child/functions.php on line 8

    Thank you in advance for any feedback.

Viewing 9 replies - 1 through 9 (of 9 total)

  • Can you replicate the problem using the original, unedited, Twenty Twelve theme?

    Thread Starter jackolive

    (@jackolive)

    esmi,

    I activated the original, unedited, Twenty Twelve theme. All of my customization’s are gone in Chrome and IE, obviously since none of my child theme files are being called, including the child style.css.

    I am not able to recreate the situation, both Chrome and IE 10 now show the original Twenty Twelve theme with only my previous posts and pages. As you can see, the Yop Poll has no style in either browser (no custom style.css changes) when the customization’s did work before in Chrome and FF.

    I believe this issue is specific to IE not calling my child theme style.css, as all of my customization’s worked fine in Chrome and Firefox.

    I know that I shouldn’t edit the original theme files, but for testing purposes, should I add some custom styles to the style.css in the original Twenty Twelve theme to try and recreate the problem in IE?

    Thank you for your time!

    I don’t think editing the original theme is going to help at all. Instead you need to figure out what the issue is in your child theme. Have you tried validating your child’s stylesheet? IE is notoriously picky with invalid CSS.

    Thread Starter jackolive

    (@jackolive)

    I have validated style.css. I had several errors, I cleaned them up. Most were due to the color gradients for the nav menu. I still have 8 errors but only 3 in the child style.css. Two are related to the parent style.css and there is a huge Parse Error (link to validation page below).

    https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fgotbarking.com%2Finfo%2Fwp-content%2Fthemes%2Ftwentytwelve-child%2Fstyle.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

    Is the parse error due to my custom css not properly structured under the proper “Media Query” (@media screen and…)?

    The problem still exists in IE (no custom css being called). Chrome works fine.

    I tried the fix from my original post but it didn’t work.

    Thread Starter jackolive

    (@jackolive)

    esmi,

    I added some of my custom code from the child style.css into the parent style.css and it worked in IE. I added the code above the “Media queries” section.

    This tells me that the child style.css is not being called by IE. What do you think? And what should I do?

    I don’t want to add all of my custom code to the parent style.css. I understand that this is not good practice and all of my customization’s will be overridden during an upgrade.

    Are there any Twenty Twelve users that have made customization’s to their child style.css and it works in IE? How?

    The only IE-specific .css that I can see in your child theme appears to be specific to IE7 or above. However, that may be getting over-written by the original theme’s IE-specific CSS – which is loaded in all versions lower than IE9.

    Looks like you are missing a closing bracket for the first media query section here – above that commented last line:

    .menu-toggle {
		display: none;
	}

/* Minimum width of 960 pixels. */

    Also here:

    }

/* entry-title */

    Thread Starter jackolive

    (@jackolive)

    Problem solved.

    WPyogi,

    I inserted the closing brackets for the media query sections (above) and it worked. Thank you!

    esmi,

    Thank you for your time and efforts.

    Thread Starter jackolive

    (@jackolive)

    Marked this topic as resolved.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘IE(10) not showing CSS from Twenty Twelve Child Theme’ is closed to new replies.