Member Avatar for bradly.spicer

Having a few issues with IE8.
This is what the navigation looks like on all the browsers so far:

<nav id="site-navigation" class="main-navigation" role="navigation">
  <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
  <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
  <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}

.main-navigation li {
    /* margin-top: 24px;
    margin-top: 1.714285714rem; */
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover {
    color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: block;
}

I have tried:

<!--[if lt IE 9]>
  <script>
    document.createElement('nav');
  </script>
<![endif]-->

The URL for reference is :

  • 3 Contributors
  • 4 Replies
  • 195 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Brief summary and diagnosis: IE8 does not natively recognize HTML5 sectioning tags (nav, header, section, etc.), so CSS rules and some DOM APIs that assume those elements exist can silently fail. ’s note about the missing HTML5 shiv is the most direct fix, and ’s suggestion to confirm the script actually runs is important because a thrown script error will stop later scripts from executing. (github.com)

Practical fixes (order matters): make sure the page uses a valid HTML5 doctype and isn’t being forced into Compatibility/IE7 mode via headers; include an X-UA-Compatible directive early in the head so IE picks the right document mode. Add an HTML5 shiv for IE<9 inside an IE conditional comment (use a maintained build from a CDN or the html5shiv repo). Also explicitly declare HTML5 sectioning elements as block-level in the stylesheet so old IE has sensible defaults:

nav, header, footer, section, article, aside { display: block; }

(learn.microsoft.com)

If the toggle still fails, check for JavaScript errors in IE8’s Developer Tools (F12). Two common killers: calls to console.log when the console object doesn’t exist, and use of modern APIs that IE8 lacks (for example addEventListener/classList). A short guard prevents console errors from halting scripts:

if (typeof console === 'undefined') { console = { log: function() {} }; }

If scripts rely on modern DOM APIs, add small fallbacks (attachEvent or a lightweight polyfill) or use jQuery’s .on/.addClass methods which handle older IE. (stackoverflow.com)

Testing tips and caveats: confirm the shiv actually loaded in the Network panel and that adding the toggled-on class manually in the DOM inspector makes the menu show—if manual toggling works, the problem is the toggle script, not CSS. Remember that supporting IE8 is legacy work; if possible, aim for graceful fallback rather than full parity. (stackoverflow.com)

Recommended Answers

All 4 Replies

Member Avatar for minitauros

I'm not sure but the first thing that comes to my mind is that IE8 is not ready to interpret HTML5 tags like <nav>. Maybe you could find out more about that?

Member Avatar for bradly.spicer

Hey Minitauros, not sure if this explains it:

Member Avatar for minitauros

Nope I did not know about that, thank you for the info :). Another solution for this problem hasn't crossed my mind yet, though, unfortunately. Pretty weird that it isn't working as you seem to be doing exactly what the link you just provided describes :o. Have you checked if the script really is included and executed? E.g. maybe you could issue an alert('Wow, this really is IE < 9'); after the createElement() function?

Member Avatar for JorgeM

Maybe i missed it while looking at the source code, but I dont see where you included the HTML5Shiv.

<!--[if lt IE 9]>
  <script src=""></script>
<![endif]-->
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.