Placing the Wordpress Tweny Eleven menu onto another theme? - css

Question

This is pretty specific, but I'm hoping someone could take a look.
I have a Video theme (from Press75) and wanted to add a nice drop down menu below the logo area.
I copied the relevant code and CSS (with some tweaks) to the theme, and it works great in FF, Chrome, IE9. It does NOT work in IE8 or 7.
Edit: Sorry for lack of explanation. By not work, it just displays the menu as a unstyled list, going down the page and pushing aside below content. What I want is a horizontal, styled menu as it appears in Twenty Eleven theme. It works fine in everything but IE 7 and 8.
If there's anyone with some CSS knowledge who could look it over, I would be way appreciative. I'm stumped and been working on it for hours. Can't get help from Press75 without costly customizations.
Thanks.
Here's the URL: http://www.psychetruth.net
Here's the CSS code currently in use for the menu:
/************ MENU **************/
#access {
background: #ececec; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#ececec, #cccccc);
background: -o-linear-gradient(#ececec, #cccccc);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ececec), to(#cccccc)); /* older webkit syntax */
background: -webkit-linear-gradient(#ececec, #cccccc);
clear: both;
display: block;
float: left;
margin: 0 auto 0;
width: 100%;
}
#access ul {
font: 14px/16px Times New Roman,Georgia,serif;
letter-spacing: 0.5px;
list-style: none;
margin: 0;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #333;
display: block;
line-height: 3em;
padding: 0 1.2125em;
text-decoration: none;
border-right: 1px solid #BBBBBB;
}
#access ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 3em;
left: 0;
width: 188px;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #E6E6E6;
border-bottom: 1px dotted #ddd;
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #373737;
}
#access ul li:hover > ul {
display: block;
}
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;
}

Answer 1

WordPress Twenty Eleven is an HTML5 theme, and uses the HTML5 <nav> element for its menu. This won't be recognised as a styleable element by older versions of IE, and that's why your styling isn't working. Internet Explorer versions below IE9 just won't "see" it.
WordPress Twenty Eleven includes a Javascript file called html5.js, which is Remy Sharp's HTML5-enabling "shiv" to fix this up.
In order for your site to work properly, you'll need to do one of two things:
(My recommendation) Read up on HTML5 and this "shiv", change your DOCTYPE to the HTML5 doctype (necessary if you're going to be properly compatible with the new elements like <nav>), and add the shiv script, or:
(Simpler, but you'll learn less) Change the <nav> element to a <div> and make any necessary fixes to the CSS to match. By the looks of it, all you'll need to do is change <nav id="access" role="navigation"> to <div id="access" role="navigation"> (and the closing tag to match, of course!) as the CSS targets by ID rather than element name.
You may find other parts of the Twenty Eleven code you've grabbed incompatible with your current DOCTYPE; whatever you do, it wouldn't hurt to validate your HTML afterwards.