...

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum