Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE8 Image Hover Problem

    I have several scripts incorporated into one to get the desired effect I want and it works in Firefox, Chrome and IE9 but not IE8 and under.

    Link: http://tinyurl.com/cftod4n

    Go easy on the coding, I just do it as a hobby not a profession!

    The bar with all the team logos at the top is a bulleted list combined with jMyCarousel and an image hover. In IE8 the image hover isn't working. I can either get it to display all the team logos OR all the hover images but the rollover from logo to hover doesn't work.

    This should be the relevant CSS:

    Code:
    #indianapolis-colts{width:120px; height:50px; background:url(/images/mock/2012/top/qb/andrew-luck.jpg);} #indianapolis-colts img:hover{opacity:0;} 
    #washington-redskins{width:120px; height:50px; background:url(/images/mock/2012/top/qb/robert-griffin.jpg);} #washington-redskins img:hover{opacity:0;} 
    #minnesota-vikings{width:120px; height:50px; background:url(/images/mock/2012/top/ot/matt-kalil.jpg);} #minnesota-vikings img:hover{opacity:0;} 
    #cleveland-browns{width:120px; height:50px; background:url(/images/mock/2012/top/wr/justin-blackmon.jpg);} #cleveland-browns img:hover{opacity:0;} 
    #tampa-bay-bucs{width:120px; height:50px; background:url(/images/mock/2012/top/cb/morris-claiborne.jpg);} #tampa-bay-bucs img:hover{opacity:0;} 
    #st-louis-rams{width:120px; height:50px; background:url(/images/mock/2012/top/ot/riley-reiff.jpg);} #st-louis-rams img:hover{opacity:0;} 
    #jacksonville-jaguars{width:120px; height:50px; background:url(/images/mock/2012/top/de/quinton-coples.jpg);} #jacksonville-jaguars img:hover{opacity:0;} 
    #carolina-panthers{width:120px; height:50px; background:url(/images/mock/2012/top/dt/devon-still.jpg);} #carolina-panthers img:hover{opacity:0;} 
    #miami-dolphins{width:120px; height:50px; background:url(/images/mock/2012/top/cb/dre-kirkpatrick.jpg);} #miami-dolphins img:hover{opacity:0;} 
    #buffalo-bills{width:120px; height:50px; background:url(/images/mock/2012/top/de/melvin-ingram.jpg);} #buffalo-bills img:hover{opacity:0;} 
    #kansas-city-chiefs{width:120px; height:50px; background:url(/images/mock/2012/top/ot/jonathan-martin.jpg);} #kansas-city-chiefs img:hover{opacity:0;} 
    #seattle-seahawks{width:120px; height:50px; background:url(/images/mock/2012/top/olb/courtney-upshaw.jpg);} #seattle-seahawks img:hover{opacity:0;} 
    #arizona-cardinals{width:120px; height:50px; background:url(/images/mock/2012/top/wr/michael-floyd.jpg);} #arizona-cardinals img:hover{opacity:0;} 
    #dallas-cowboys{width:120px; height:50px; background:url(/images/mock/2012/top/og/david-decastro.jpg);} #dallas-cowboys img:hover{opacity:0;} 
    #philadelphia-eagles{width:120px; height:50px; background:url(/images/mock/2012/top/ilb/luke-kuechly.jpg);} #philadelphia-eagles img:hover{opacity:0;} 
    #new-york-jets{width:120px; height:50px; background:url(/images/mock/2012/top/wr/alshon-jeffery.jpg);} #new-york-jets img:hover{opacity:0;} 
    #cincinnati-bengals{width:120px; height:50px; background:url(/images/mock/2012/top/rb/trent-richardson.jpg);} #cincinnati-bengals img:hover{opacity:0;} 
    #san-diego-chargers{width:120px; height:50px; background:url(/images/mock/2012/top/de/nick-perry.jpg);} #san-diego-chargers img:hover{opacity:0;} 
    #chicago-bears{width:120px; height:50px; background:url(/images/mock/2012/top/ot/mike-adams.jpg);} #chicago-bears img:hover{opacity:0;} 
    #tennessee-titans{width:120px; height:50px; background:url(/images/mock/2012/top/c/peter-konz.jpg);} #tennessee-titans img:hover{opacity:0;} 
    #cincinnati-bengals-2{width:120px; height:50px; background:url(/images/mock/2012/top/wr/kendall-wright.jpg);} #cincinnati-bengals-2 img:hover{opacity:0;} 
    #cleveland-browns-2{width:120px; height:50px; background:url(/images/mock/2012/top/rb/lamar-miller.jpg);} #cleveland-browns-2 img:hover{opacity:0;} 
    #detroit-lions{width:120px; height:50px; background:url(/images/mock/2012/top/cb/janoris-jenkins.jpg);} #detroit-lions img:hover{opacity:0;} 
    #pittsburgh-steelers{width:120px; height:50px; background:url(/images/mock/2012/top/dt/dontari-poe.jpg);} #pittsburgh-steelers img:hover{opacity:0;} 
    #denver-broncos{width:120px; height:50px; background:url(/images/mock/2012/top/cb/alfonzo-dennard.jpg);} #denver-broncos img:hover{opacity:0;} 
    #houston-texans{width:120px; height:50px; background:url(/images/mock/2012/top/wr/mohamed-sanu.jpg);} #houston-texans img:hover{opacity:0;} 
    #new-england-patriots{width:120px; height:50px; background:url(/images/mock/2012/top/de/whitney-mercilus.jpg);} #new-england-patriots img:hover{opacity:0;} 
    #green-bay-packers{width:120px; height:50px; background:url(/images/mock/2012/top/dt/michael-brockers.jpg);} #green-bay-packers img:hover{opacity:0;} 
    #baltimore-ravens{width:120px; height:50px; background:url(/images/mock/2012/top/og/cordy-glenn.jpg);} #baltimore-ravens img:hover{opacity:0;} 
    #san-francisco-49ers{width:120px; height:50px; background:url(/images/mock/2012/top/cb/stephon-gilmore.jpg);} #san-francisco-49ers img:hover{opacity:0;} 
    #new-york-giants{width:120px; height:50px; background:url(/images/mock/2012/top/ilb/vontaze-burfict.jpg);} #new-york-giants img:hover{opacity:0;} 
    #new-england-patriots-2{width:120px; height:50px; background:url(/images/mock/2012/top/s/mark-barron.jpg);} #new-england-patriots-2 img:hover{opacity:0;} 
    
    /*************************
    ******** Arrows **********
    **************************/	
    div.jMyCarousel .prev{
    	background: url('/images/mock/slider/left.png') center center no-repeat;
    	width:47px;
    	height:61px;
    	border:0px;
    }
    div.jMyCarousel .next{
    	background: url('/images/mock/slider/right.png') center center no-repeat;
    	width:40px;
    	height:61px;
    	border:0px;
    }
    
    /** carousel 1 **/
    div.jMyCarousel ul li{
    	border:0px solid #fff;
    	line-height:0px;
    }
    
    div.jMyCarousel ul li a{ /* in case of link */
    	display:block;
    	border:0px;
    }
    
    div.jMyCarousel ul li a img{
    	display:block;
    	border:0px;
    }
    
    #scores {
    	position: relative;
    	padding: 0px 0px 0px 0px;
    	margin-bottom: 3px;
    	width: 967px;
    	height: 50px;
    	text-align: center;
    	background: #ebebeb;
    	border-left: 1px solid #000;
    	border-right: 1px solid #000;
    	border-bottom: 1px solid #FFFFFF;
    	z-index:50;
    }
    #scores.fixed {
    	position: fixed;
    	top: 0;
    }
    
    #push {
    	height: 50px;
    }
    /* Advanced CSS hover styles */
    ul.highlight01 { overflow: hidden; padding: 0px; }
    ul.highlight01 > li {
    	position: relative;
    	float: left;
    	list-style: none;
    	margin: 0 1px 0px 0;
    }
    
    ul.highlight01 a 							{ text-decoration: none; display: block; }
    ul.highlight01 li img 						{ display: block; position: relative; z-index: -1; } /* IE8 fix, background colour appears behind img for uknown reason set negative z-index */
    ul.highlight01 li:not([class=na]) img 		{ position: static; } /* Reset relative position, as this plays havoc with good browsers */
    ul.highlight01 a:hover, ul.highlight01 a:focus			{ display: block; outline: none; -moz-box-shadow: 3px 3px 5px #000; -webkit-box-shadow: 3px 3px 5px #000; box-shadow: 3px 3px 5px #000; }
    ul.highlight01 a:hover img, ul.highlight01 a:focus img	{ outline: 3px solid #ccc; }
    
    ul.highlight01 a:hover:after,
    ul.highlight01 a:focus:after
    {
    	color: #000;
    	position: absolute;
    	bottom: 0;
    	width: 100%;
    	background: rgb(255,255,255);
    	background: rgba(255,255,255,0.7);
    	background: -moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(204,204,204,0.7)); /* Firefox 3.6+ */
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.7)), to(rgba(204,204,204,0.7))); /* Safari */
    	display: block;
    	text-shadow: 1px 1px 1px #fff;
    }

  • #2
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    EDIT: I was testing things in Developer Tools and thought for a second there were more problems than I realized in IE8. Turns out the extra issues are only IE7 and earlier. But, the image hover problem is still one I'd like to fix.
    Last edited by froggyvk; 01-31-2012 at 03:57 AM.


  •  

    Posting Permissions

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