View unanswered posts | View active topics It is currently Fri Dec 14, 2018 8:23 am

Reply to topic  [ 1 post ] 
 IE8 Gradient Issue (*not* z-index bug) 
Author Message

Joined: Wed Aug 31, 2011 2:44 pm
Posts: 1
Location: Boston, MA USA
Post IE8 Gradient Issue (*not* z-index bug)
I have a gradient in a div that is hidden but shows up when a mouse hovers over another element (the div with the gradient's ancestor is made visible via javascript on the mouseover). This seems IE8-specific. Here is IE8: ... 000057.png
Here is it in IE7: ... 000513.png

As you can see, with IE7 the gradient and border are present, but with IE8 they are not.

It's not the z-index bug listed under known issues. The immediate parent is position:absolute with a z-index set, and the element itself is position:relative (I've tried with and without z-index and it doesn't matter).

In the following, the #pri-nav is the <a> that is being hovered over (in this case Products) while the .links menu is the container with the rounded borders below the Products link, and the action-list is what should have the gradient.

#pri-nav .links-menu .action-list {
border: 1px 1px 0 1px solid #052f3d;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border-radius:0 10px 10px 10px;
#pri-nav .links-menu .action-list {
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
border-radius:0 0 10px 10px;
#pri-nav .links-menu .action-list {
height:100px; /* since the children are floats, this has to be set... */
padding:10px 20px 20px 20px;
margin:0 0 -20px -20px;


background: -ms-linear-gradient(top, #dde0e1, #f7f7f7);
background: -o-linear-gradient(top, #dde0e1, #f7f7f7);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dde0e1), color-stop(100%, #f7f7f7));
background: -webkit-linear-gradient(top, #dde0e1, #f7f7f7);
background: -moz-linear-gradient(top, #dde0e1, #f7f7f7);
background: linear-gradient(top, #dde0e1, #f7f7f7);
-pie-background: linear-gradient(top, #dde0e1, #f7f7f7);

All help very much appreciated!!

Thu Sep 01, 2011 10:23 pm
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: Google [Bot] and 3 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.