HELP!!! problems CSS &jquery caption slider in IE

Dev Shed Forums Sponsor:

October 23rd, 2012, 03:16 PM

RossBryan

Registered User

Join Date: Aug 2011

Posts: 16

Time spent in forums: 5 h 47 m 6 sec
Reputation Power: 0

HELP!!! problems CSS &jquery caption slider in IE

Hi I'm attempting to achieve a hover overlay effect, listing objects elements using a basic div ul li a img, and I simply want a black overlay with some white text caption to slide in, when hovering over a specific image.

So far I've got the JQuery and CSS caption sliders functionality to behave correctly in modern browsers and even IE8 along with previous versions, but I can't seem to get the caption integrated to function correctly for IE9. The text caption overlay partially shows (as intended), but does not slide up on a hover event.

Heres a JSFiddle example of how it works correctly in the modern browsers:

http://jsfiddle.net/RossB/THS2J/

Can Anybody please shed some light on on any tricks i'm missing?

Here is section of my HTML code:

Code:

<ul> 
<div class="featurebox holder"> 
<li><imgsrc="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/Puffins.jpg" alt="events" /></li> <div class="cover featuretext"> 
<h3 class="date">Day 24th Month</h3> 
<p>Lorem ipsum dolor sit amet, consectetur asipisicing elit, sed do eiusmod tempor incididunt...<a href="http://webpage.net/events/" target="_BLANK">Read More></a></p> 
</div> 
</div> 
</ul>

Here is the CSS:

Code:

.featurebox h3{ 
color:#ffffff; 
margin-top:0px; 
margin-bottom:0px; 
padding-left:5px; 
font:11pt; 
font-weight: bold; 
} 

.featurebox{ 
color:#ffffff; 
width: 185px; 
height: 118px; 
float:left; 
/*border: solid 2px #8399AF;*/ 
overflow: hidden; 
position: relative; 
} 

/*caption para text*/ 
.featurebox p{ 
margin-top:0px; 
padding-left: 5px; 
padding-right:5px; 
} 

/*caption slider */ 
.featuretext{ 
top:99px; 
float: left; 
position: absolute; 
background: #000; 
height: 100px; 
width: 100%; 
opacity: .8; 

/* For IE 5-7 */ 
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */ 
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } 

.holder .featuretext { 
top: 220; left: 0; 
} 

.featurebox p a { 
float: right; 
color:#FFFF00; 
}

And finally the JQuery:

Code:

$(document).ready(function(){ 
//Caption Sliding (Partially Hidden to Visible) $('.featurebox.holder').hover(function(){ $(".cover", this).stop().animate({top:'32px'},{queue:false,duration:160}); }, function() { 
$(".cover", this).stop().animate({top:'100px'},{queue:false,duration:160}); }); });

Any help would be much appreciated. Thanks guys.

Last edited by RossBryan : October 23rd, 2012 at 10:07 PM. Reason: Initial information was incorrect as the code works in all IE versions apart from IE9

October 24th, 2012, 06:54 AM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,893

Time spent in forums: 6 Months 2 Days 19 h 25 m 2 sec
Reputation Power: 4192

It seems to work fine for me in FF16, IE9, and IE8.

You've got a CSS error:

Quote:

41 .holder .featuretext Value Error : top only 0 can be a length. You must put a unit after your number : 220

Are you aware that all of the text is not always shown with the way it's been implemented?

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

HELP!!! problems CSS &jquery caption slider in IE

Developer Shed Advertisers and Affiliates