PDA

View Full Version : IE8 Image Hover Problem



froggyvk
01-31-2012, 01:38 AM
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:


#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;
}

froggyvk
01-31-2012, 03:12 AM
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.