[Twenty Twelve] IE 10 Issue Rendering Styles Above Header

  • Resolved colleengreene

    (@colleengreene)


    11 years, 7 months ago

    Hello. My blog is located at https://libraryblogs.fullerton.edu. I recently migrated it out of the Thesis framework to Twenty Twelve, and ran into the IE issues after getting it all set up.

    We have a campus-wide macronav bar we display at the very top of all of our sites. I have added this to our blog in the child theme header.php. The macronav bar displays just fine in Chrome, Firefox, and Safari, but not the actual styles of images (just text links) display in IE. I’ve got IE 10 on Windows 7 at work.

    We use this same macronav bar on ALL of our websites, none of which have a problem rendering it in IE. Just WP using Twenty Twelve.

    The code for the macronav bar is in my child header.php, as follows:

    <body <?php body_class(); ?>>

<!-- Added in CSUF header nav bar to match website branding -->
<div id="macrobar">
         <div class="wrap">
            <div class="gutter">
               <h3 id="wordmark">
                  <a href="https://www.fullerton.edu"><span></span>California State University, Fullerton</a>
               </h3>
				<ul id="macronav" role="navigation">
					<li><a href="https://www.fullerton.edu/a-z.asp">A-Z Index</a></li>
					<li class="last"><a href="https://google.fullerton.edu">Search CSUF</a></li>
				</ul>
            </div>
         </div>
</div>

<div id="page" class="hfeed site">

    I am using a child version of Twenty Twelve’s (/themes/twentytwelve-child/css/ie.css) to try to fix the issue in IE. The css code for the macronav bar is in there. I think the related css is too long to copy into this suppport forum box, so here is a direct link to /css/ie.css in my child theme.

    And the macronav bar css begins at this section in my child /css/ie.css/

    /* CG This is not workin in IE */
/* ************************ START OF SELECT CSUF.CSS ************************ */
/* Porting in only bits of csuf.css instead of calling it via an import, since some of csuf.ss might clobber WordPress theme css. */

/* *** CSUF MACROBAR AT TOP OF SITE *** */
/* =WRAP: Assigns fixed width and centers layout. Background images on body will appear behind content contained within a .wrap
			Elements not contained within a wrap will fill the browser window, e.g. default footer
---------------------------------------------*/
.wrap {

    Following are screenshots (the red text & arrows at the top):

    1. Correct Rendering.
    2. Incorrect Rendering IE10.

    You can see an example of this same macronav bar rendering right in IE on several other websites we run:

    [Mod note: Please remember to wrap “<li>“s in either a “<ol>” or “<ul>” on these forums]
    *** If this can’t be fixed, I’m hoping someone might be able to provide instruction on how I can provide an alternate style solution for just IE… displaying those links inline side-by-side at the top still, but ONLY when viewing in IE. ***

    I have other IE10 issues visible on those screenshots as well, but I’ll practice forum etiquette and create separate forum threads for each issue so that each issue can be properly tracked.

    Any help is appreciated.

    Thank you!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Have you tried deactivating all plugins and switching to the default Twenty Twelve theme?

    Thread Starter colleengreene

    (@colleengreene)

    Have you tried deactivating all plugins

    Yes, that didn’t change anything.

    and switching to the default Twenty Twelve theme

    Switching to default TT theme won’t change/fix/test anything regarding my issue, because my issue is specific to a child theme. WordPress best practices state to use child themes, not change code in the parent theme. So the only way I could test if my macronav bar rendering issue works in the default theme would require me to actually violate best practices and modify the default/parent TT theme files.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    But you indicated that Twenty Twelve had the issue

    We use this same macronav bar on ALL of our websites, none of which have a problem rendering it in IE. Just WP using Twenty Twelve.

    So, is it just your Child Theme style.css file that is responsible?

    Thread Starter colleengreene

    (@colleengreene)

    Yes, my child theme of Twenty Twelve…in IE.

    I’ve linked to that child theme css above, and provided the blocks of code I’m using that aren’t being rendered right. All the other major browsers render it right. And our other library sights render it fine in IE.

    So I am guessing there is some conflict between my child ie.style element/tag names and the Twenty Twelve element/tag names.

    I’ve spent a week perusing the help forums and related blog posts, all of which indicate this kind of rendering issue in IE when using Twenty Twelve child themes (even those people who just customize right in the parent Twenty Twelve theme files).

    Don’t know if it’s the problem, but you are missing a closing bracket here – line 57:

    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);

/* CG: This is not working in IE */

    There’s also an error here:

    /* Expands footer width to 985 pixels */
footer[role="contentinfo"] {
	max-width: 985px; */ Modify width */
}

    The first comment tag is backwards here: */ Modify width

    In addition to @wpyogi ‘s

    This one here too ( see comment syntax )

    body .site {
		*/ padding: 0 40px;
		padding: 0 2.857142857rem; */

    Also, the whole thing is missing a closing curly brace for this

    @media screen and (min-width: 960px) {

    After all these fixed, maybe the rendering problem be gone, if not still we can narrow it down.

    Thread Starter colleengreene

    (@colleengreene)

    Fixing the missing curly brace on body.site allowed me to fix everything. Thanks for that catch! I’m fixing the other css errors, too.

    Thank you again for your help!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Twenty Twelve] IE 10 Issue Rendering Styles Above Header’ is closed to new replies.