Jump to content
Sign in to follow this  
johnchandler

Features (Image Text) Not Staying In One Position In IE when Trasitioning

Recommended Posts

johnchandler
My Site In IE only (seems to be okay in FireFox)... see how the picture moves slightly to the right and the text moves slightly up when the features fade from one feature to the next? Anything can be done? It's annoying and kind of spoils the effect I was trying to make which was that the constant (i.e. unchanging) image and text would stay in one place and only the part that changed would fade in and appear. Looks great in Firefox.

Share this post


Link to post
Share on other sites
Andrew

Going to be tough as IE handles font-size and spacing differently than Firefox/Webkit. I think your site looks nice; and I wouldn't spend too much time trying to get it perfect in IE (especially < IE7) as it is a deep hole of frustration.

Share this post


Link to post
Share on other sites
johnchandler

Thanks. Yes. I also dont care about old IE versions. But even with IE 8 the problem is not that it does the line-spacing differnetly than firefox. Rather the problem is that the following two things have different line-spacing: 1) IE 8: when it is showing something and 2) IE 8: when that very same thing is having its "Opacity" setting changed dynamically. (That's how the fade-out is done and also the fade in of the next block of text). So IE 8 is not consistent within itself, it seems? See the same thing happening here: http://www.pagelines.com/demos/whitehousepro/ Click the four navigation buttons and watch the line spacing on the text (also the left edge of the picture).

Share this post


Link to post
Share on other sites
cmunns

I think what you're seeing is the rendering of the CUfon font replacement with each transition. Try turning it off and see if those pixels stop jumping.

Share this post


Link to post
Share on other sites
johnchandler

Many thanks that was a good suggestion. Unfortunately it didn't help. I tried with that setting on and off and the problem is always there. I found this info about what to do about this but unfortunately it's a bit over my head so I'm not sure I can try it without help.

Share this post


Link to post
Share on other sites
bryan-hadaway

In Custom Code have you tried checking the IE Compatibility box? Also, you may want to check for markup errors: http://validator.w3.org/ Thanks, Bryan

Share this post


Link to post
Share on other sites
johnchandler

The IE Compatibility Box made a difference! The pictures don't move now and that's what was bugging us (me and the client) the most. Better Results I'm now getting a strange horizontal line appearing at the top... And the text is still shifting,

Share this post


Link to post
Share on other sites
cmunns

I don't see the horizontal line at the top, and the text is not normally positioned the same from slide to slide, but I like your creativity here to get it to practically look like a flash video despite the small details the IE seems to screw up time and time again. Maybe the jquery cycle plugin author might have a word on it?

Share this post


Link to post
Share on other sites
johnchandler

Just a final status on this: - the image started to move again. I couldn't make it stop so we just dropped the fade-in fade-out option and made it change instantaneously. It's definintely a problem with IE when opacity 0 and 100 it works correctly. But when it is anywhere in between 0 and 100 the image shifts. If I had time, I'd try and make the images all start at opacity = 1 (not 0) and make the fade in fade out script go up to 99 (not 100). That way, theoretically the image would not move. W P.S. The people who write MS IE shold be fired and given a prison sentence for a severance package.

Share this post


Link to post
Share on other sites
cmunns

You actually could change those values in jquery.cycle.js manually...just search for "fade" `{fade:function($cont,$slides,opts){$slides.not(":eq("+opts.currSlide+")").css("opacity",0);opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.opacity=0;});opts.animIn={opacity:1};opts.animOut={opacity:0};opts.cssBefore={top:0,left:0};}};$.fn` and change the opacity:0 values to .01 and the opacity:1 value to .99

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×