SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Hover Background Issue in IE

    Hi All, I am pulling my hair out trying to figure out why my hovers aren't working correctly in ie. I'm trying to put together a css only menu using a ul, it works perfectly in all browsers except IE, any version. Here's a working version of the menu so far. The problem I'm having is the background style for the main ul is transferring down to the ul li in IE and ignoring my background image. And if I remove the filter line in the "#prodmenu li:hover > a" style the hovers don't work at all in ie. One thing that is working however is the color, I have it as !important in the "#prodmenu ul a:hover" style and ie is displaying it correctly, just not the background.

    Here's a sample of the list:
    Code:
    <ul id="prodmenu">
     <li><a href="#">BASEBALL / SOFTBALL</a>	
      <ul>
       <li><a href="#">Netting</a></li>			
       <li><a href="#">Pitching Mounds</a></li>
      </ul>
    </li>
    And here's the css bits that I think are causing the problem:
    Code:
    #prodmenu .current a, #prodmenu li:hover > a {
    	background: #d1d1d1; /* for non-css3 browsers */
    	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#E1E1E1'); /* for IE */
    	background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#E1E1E1)); /* for webkit browsers */
    	background: -moz-linear-gradient(top,  #ebebeb, #E1E1E1); /* for firefox 3.6+ */
    	color: #444;
    	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    	box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
    }
    #prodmenu ul a:hover {
    	background: #25548C !important; /* for non-css3 browsers */
    	background: url('https://secure.practicesports.com/mas_assets/default/images/bg-mesh-blue.gif') !important;
    	background-repeat: repeat !important;
    	color: #fff !important;
    	-webkit-border-radius: 0;
    	-moz-border-radius: 0;
    	text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    }
    I would really appreciate any help, this has been driving me crazy. I've searched but don't really know what to search for to get my answer.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    To get the hover background to show you probably need to turn the filter off here:

    Code:
    #prodmenu ul a:hover {
    	filter:none;
      background: #25548C!important; /* for non-css3 browsers */
    	background: url('https://secure.practicesports.com/mas_assets/default/images/bg-mesh-blue.gif')!important;
    	background-repeat: repeat!important;
    	color: #fff !important;
    	-webkit-border-radius: 0;
    	-moz-border-radius: 0;
    	text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    }

  3. #3
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolutely, that was it! Thank you so much, I never would have figured that out. Just had to set the filter to none. Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •