- This topic has 7 replies, 2 voices, and was last updated 11 years ago by
.
-
Posts
-
This tag:
<main itemprop="mainContentOfPage" role="main" class="content">isnt working in IE8. It self closes in IE8. For a fix, I would like to put a div around the <main> tag so the page lays out correctly. None of the genesis hooks are working like I need. Can I change the main tag to a div? If so, where? Or where can I put a div ONLY around the main tag?
Thanks!
This tutorial tells you how to add the extra div around a container in genesis.
You don't link to your site, so I can't see what's missing.
Do you have this in your Genesis child theme functions.php?//* Add HTML5 markup structure add_theme_support( 'html5' );That's what will allow IE8 to use containers like <nav> and <main> and <aside>
If you do have that, it may be that the media queries aren't being used in IE8.
I add this to my functions.php when I need to support IE8 (which is usually).// Add mediaqueries.js to header for IE < 9 add_action('wp_head', 'azccs_wp_head'); function azccs_wp_head () { echo '<!--[if lt IE 9]>'; echo '<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>'; echo '<html class="ie8">'; echo '<![endif]-->'; }This allows IE8 to read the media queries, and so the pages all have the correct layout. I usually only have to add a couple of lines extra support for IE8 then.
Marcy | Amethyst Website Design | Twitter
The url is to our corporate dev site and do not want it available for anyone coming across the thread. Can I email it to you or direct message you on twitter?
I do have the add theme support, but the <main> tag is the only one IE8 is not recognizing. All the other tags are fine (footer, nav, etc.). html5shiv is also being used. Its weird that only that one tag is not be rendered properly. Thanks!
You can DM me @mjsdiaz1
I used to use the html5shiv, until Genesis added support. Have you tried removing it? Maybe there is interference (although there shouldn't be)
But if it's only the <main> that is the issue, I would add the div around it like you mentioned in your first post. Use the tutorial; it's an easy fix.
I tried this and it works, so you should be able to use it; note that I needed to add a 9 to the close div that isn't in the tutorial.
//* Add div.wrap1 around main add_action( 'genesis_before_content', 'sk_add_wraps_opening_divs', 9 ); function sk_add_wraps_opening_divs() { echo '<div class="wrap1">'; } add_action( 'genesis_after_content', 'sk_add_wraps_closing_divs', 9 ); function sk_add_wraps_closing_divs() { echo '</div>'; }
Marcy | Amethyst Website Design | Twitter
I tried the genesis_before_content and after before but didnt work. Guess the 9 makes all the difference. This hack worked! Thank you so much! Its still so weird that IE8 isn't liking the <main> tag.
Ye, I tested the code before I posted it, and the 9 in both places was definitely needed. It sets and order for adding it. I didn't look at the Genesis code yet to see why 9, but that's something on my list now.
I'm glad you got it working!
Marcy | Amethyst Website Design | Twitter
I looked at your site and I have no idea why the <main> isn't being used by IE8. I guess this is something to look out for on the next site I work on. At least adding the extra div works!
All the best!
Marcy | Amethyst Website Design | Twitter
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.