A site I'm working features anythingslider and displays beautifully in MSIE 9, FF 4, FF 3, Chrome, and Opera. The page renders horribly in MSIE 8 however. Something is causing IE8 to work in compatibility mode, which is also breaking several :hover effects.
The anythingslider object doesn't appear to be as wide or tall in IE8 as it is in IE9 and other CSS3 compliant browsers. This appears to be causing the back/next arrows to be chopped, and the text in the lower area of the object isn't visible.
I've tried using loose and transitional doctypes, neither affect the problem.
Could someone take a look and see what I might be doing wrong? IE8 wonkiness
I see you are using the latest version of AnythingSlider, but you aren't using the included anythingslide-ie.css file which does not have any negative margins. If you modify your "anythingslider_iesux.css" file and change these two lines, it should start working.
Try changing it to a link (snippet below), also add a "return false" to the end... so it doesn't allow the click that closes the caption from changing pages immediately:
/* add a close button (x) to the caption */ .find('div[class*=caption]') .css({ position: 'absolute' }) .prepend('<a href="#" class="close">x</a>') .find('.close').click(function(){ var cap = $(this).parent(), ani = { bottom : -50 }; // bottom if (cap.is('.caption-top')) { ani = { top: -50 }; } if (cap.is('.caption-left')) { ani = { left: -150 }; } if (cap.is('.caption-right')) { ani = { right: -150 }; } cap.animate(ani, 400, function(){ cap.hide(); } ); return false; });
I noticed a lingering "bug" with IE8. Captions loading from the top appear just fine. The right-loading caption (lower right corner) is chopped off, and the bottom-loading caption doesn't appear at all.
I have IE9 running in IE8 mode and everything seems to work fine for me. Maybe the font size is the problem? You could make the caption wider (changing "130px" to "150px"):
It appears that the closing code is already set to 150px... I guess that's my fault when I wrote the demo, but it shouldn't make a huge difference since it's bigger.
Hmmm, I don't know what to tell you... it's hard for me to troubleshoot that problem when I don't have IE8 or XP anymore. Is it a problem in IE7? Like I said it works fine for me in IE9 in IE8 mode, so I'm kind of stuck here.
Honestly, I would just pick one caption direction that works and stick with it. I put all four in there for demonstration purposes.
Some images call for a caption on different sides. Your demo works fine, so I don't know what I am doing that causes my page to render the right caption incorrectly. Hoped there was an easy answer.
Ideally I would force all IE users to upgrade to MSIE 9, FF or Chrome. ;)
I don't know if this will help you any, but in your source code viewed from IE7 I get this before the Doctype declaration
<div style='background-color:#FFFBD7; color:black; padding:10px;'>You are viewing this page with MSIE 7.0 - some elements (like the anythingslider widget) do not appear correctly...</div>
Anything written before the Doctype will cause Quirks mode. I don't know where it is generated from however as I cannot see it in the source code viewed from Firefox.
The anythingslider object doesn't appear to be as wide or tall in IE8 as it is in IE9 and other CSS3 compliant browsers. This appears to be causing the back/next arrows to be chopped, and the text in the lower area of the object isn't visible.
I've tried using loose and transitional doctypes, neither affect the problem.
Could someone take a look and see what I might be doing wrong? IE8 wonkiness
I see you are using the latest version of AnythingSlider, but you aren't using the included anythingslide-ie.css file which does not have any negative margins. If you modify your "anythingslider_iesux.css" file and change these two lines, it should start working.That should fix it! :)
I noticed that IE8 continues to display in compatibility mode. I've cleaned up all of the page errors, except for these three:
http://htmlhelp.com/cgi-bin/validate.cgi?url=https://southeastgenetics.org/index2011d.php?demo=1&warnings=yes
Is there a workaround for this? ( For others reading, if IE8 renders in compatibility mode the :hover psuedoclass won't work. )
Help? :-)
I have IE9 running in IE8 mode and everything seems to work fine for me. Maybe the font size is the problem? You could make the caption wider (changing "130px" to "150px"): It appears that the closing code is already set to 150px... I guess that's my fault when I wrote the demo, but it shouldn't make a huge difference since it's bigger.
http://www3.picturepush.com/photo/a/5538676/img/5538676.png
Honestly, I would just pick one caption direction that works and stick with it. I put all four in there for demonstration purposes.
Ideally I would force all IE users to upgrade to MSIE 9, FF or Chrome. ;)
Anything written before the Doctype will cause Quirks mode. I don't know where it is generated from however as I cannot see it in the source code viewed from Firefox.
Thank you both!!!