I am using CSS3 properties to style my navigation. I am using background-image: linear-gradient which works in all modern browsers, but lack of support in IE7-8. I am relying on PIE (v1, http://css3pie.com) for implementation across older IE 7 and 8. I tried PIE 2 beta, but it was not working for me.
The problem is the rest of PIE CSS3 properties are working in all browsers everywhere on the site, except this one element, in one browser (IE8).
A class of “last” is applied to the last top-level <li> element in the container #navigation. This happens in JavaScript in document.ready() and in the CSS li.last has a green gradient background. I tried moving the JS outside of document.ready() so it fires right away, and also tried placing it in window.load() so it fires after TypeKit, neither having an effect on the outcome.
The background-image property for this element works as expected in IE9. It even works as expected in IE7. But in IE8, nada. All other elements in the page that rely on PIE for linear-gradient and for other CSS3 properties, all load fine.
But for this particular element, the linear-gradient background image is not applied for some reason. I was thinking this is because PIE behavior is run before my JavaScript can apply the last class, because when I inspect I do see the rest of the properties (font-size, color, float) have all been applied. It is not a problem of class inheritance, because other <li> elements are not styled with any background properties.
Here are stacked screen shots (IE9, IE8, IE7):
Any ideas? Is there way to delay PIE behavior from loading before the JS can apply class of last? Is this even the problem? I’m most perplexed because it’s working in IE7… appreciate any insights you might have.
Here is my HTML (generated by WordPress):
<div id="navigation">
<ul>
<li id="menu-item-117" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item"><a href="#">Home</a></li>
<li id="menu-item-118" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Who We Are</a></li>
<li id="menu-item-123" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Tree Projects</a></li>
<li id="menu-item-130" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">News + Resources</a></li>
<li id="menu-item-136" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Order Online</a></li>
<li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Contact</a></li>
<li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Give Now</a></li>
</ul>
</div>
Here is JavaScript (used to apply the class “last” to the last top-level <li> in #navigation):
$(document).ready( function(){
$("#navigation > ul > li:last").addClass("last");
});
CSS and scripts are loaded in this order:
style.css > Typekit > JQuery > site.js (where “last” is applied)
Here is my relevant CSS:
#navigation ul,
#navigation li {
display: inline-block;
list-style-type: none;
padding: 0;
margin: 0;
}
#navigation > ul {
width: 100%;
}
#navigation ul li ul {
display: none;
}
#navigation li {
margin: 0 6px;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-weight: 600;
float: left;
border-radius: 3px;
zoom: 1;
}
#navigation a {
color: #55D600;
display: inline-block;
padding: 11px 11px;
}
#navigation li.current-page-ancestor > a,
#navigation li.current-menu-ancestor > a,
#navigation li.current-menu-item > a {
color: #fff;
}
#navigation li.last {
margin: 0;
float: right;
background: rgb( 51, 171, 0 );
background-image: linear-gradient(bottom, rgb(51,171,0) 0%, rgb(86,214,0) 75%);
background-image: -o-linear-gradient(bottom, rgb(51,171,0) 0%, rgb(86,214,0) 75%);
background-image: -moz-linear-gradient(bottom, rgb(51,171,0) 0%, rgb(86,214,0) 75%);
background-image: -webkit-linear-gradient(bottom, rgb(51,171,0) 0%, rgb(86,214,0) 75%);
background-image: -ms-linear-gradient(bottom, rgb(51,171,0) 0%, rgb(86,214,0) 75%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(51,171,0)),
color-stop(0.75, rgb(86,214,0))
);
-pie-background: linear-gradient( rgb(86,214,0), rgb( 51, 171, 0) );
color: #eee;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 0 rgba(255, 255, 255, 0.3);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
border-radius: 3px;
width: 116px;
font-size: 1.2em;
}
#navigation li.last a {
color: #fff;
}
#navigation a:hover {
color: #fff;
}
#navigation li.last:hover {
background: rgb( 58, 193, 0 );
background-image: linear-gradient(bottom, rgb(58,193,0) 0%, rgb(94,223,3) 75%);
background-image: -o-linear-gradient(bottom, rgb(58,193,0) 0%, rgb(94,223,3) 75%);
background-image: -moz-linear-gradient(bottom, rgb(58,193,0) 0%, rgb(94,223,3) 75%);
background-image: -webkit-linear-gradient(bottom, rgb(58,193,0) 0%, rgb(94,223,3) 75%);
background-image: -ms-linear-gradient(bottom, rgb(58,193,0) 0%, rgb(94,223,3) 75%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(58,193,0)),
color-stop(0.75, rgb(94,223,3))
);
-pie-background: linear-gradient( rgb(94,223,3), rgb( 58, 193,0) );
font-size: 1.2em;
color: #fff;
}
#navigation,
#navigation li {
behavior: url(js/PIE.htc);
}
Thanks to the insights from @FelipeAls and @Spudley in the comments, I was able to resolve the situation.
Using @FelipeAls suggestion, I hardcoded the class into WordPress’ menu editor, and removed the JavaScript which applied the class. This helped ensure the class was being applied and the PIE behavior rendered. But, the problem remained.
@Spudley was on the right track, and it led me to find this known issues doc for PIE. It was as simple as adding
position: relative;to#navigation li.last.I don’t know how I missed this as I was actually on the Known Issues page earlier today trying to diagnose why v2.0 was not recognizing custom JavaScript paths.
Thanks everyone for your help!