I've just downloaded the latest Nivo slider 3.2 as I need it on a responsive site and out of the box with no modifications the transitions in ie7 and ie8 don't work.
They simply flick between images - no sliceDown or Fade they just rotate.
I've used it in the past with no problems - I've just view 2.6 in ie7 and ie8 and it's fine.
Does anyone know what can be done to fix it?
I've just checked out their demo too http://nivo.dev7studios.com/responsive-demo/ and the same issue is happening there.
Cheers
Just sharing what worked on my site -- I was using the default demo code, pretty much unedited from the download. It was beautiful and responsive (which I wanted) in all of the browsers I tested, except any version of i.e.. If i.e., it was just a rotation, no effects.
However, when I designated a size dimension for the wrapper div and the image divs, the transitions worked in i.e. also. (height: 350px;) You can specify the dimension in your css/stylesheet or inline -- if that's what it takes.
On my site, I only needed to specify a height dimension; for your site, you might need both height and width, or just width. A little experimentation was all it took.
But, with the height dimension specified, this threw off the display in the other browsers, so the dimension needs to be specified in terms of a "hack" for internet explorer: either a separate stylesheet just for internet explorer users or by using whatever your favorite internet explorer hacking method is: underscore, or \9, and so on. Here's a list of useful internet explorer workarounds, just for reference: internet explorer hacks
I know we hate to recommend hacking, but we all do it :). Would love to find out why this one worked for me, maybe there's a better way without the hack.
Related
I'm having a heck of a time getting a map to render properly in IE8 or IE compatibility mode. I've tried examples and demos, I've changed maps multiple times... All features seem to work and look great except IE compatibility mode or antiquated versions of IE. Maps ARE rendering on IE8 or below on the jvectormap website just not for the examples offered.
I've even gone as far as trying to replicate the maps on http://jvectormap.com, linking right to it's JS files. Still nothing.
Thanks so much for your time.
I reviewed the link you gave. The only issue I see is an absence of region border in IE8 or compatibility mode. The problem behind this is inability of VML engine to render borders with fractional width. Setting border as 1 makes the example work as expected.
I am developing a website: http://www.techniquetolife.com
It's basically a div 5x as big as the window inside window sized div, with other divs within the large div, using the overscroll and scrollTo plugins to navigate.
The website works perfectly fine in Safari and Firefox for OS/X. But I am having serious trouble making it work in Chrome. I'm not sure if it's an Chrome OS/X only problem, but whenever I scroll over one of the inner divs within the large div, the whole browser slows down, this only happens in Chrome...
If I disable overscroll and use the scrollbars it works 100% fine, but I really want to use the overscroll drag to scroll plugin.
I am no good at coding so any help would be greatly appreciated.
All of the plugins / browsers are on the latest version.
Okay, well I posted an answer to a similar question that I think this might be related too. I could be wrong though, but you could test it.
See the full question and my full answer here: Chrome slow scrolling with fixed position elements
Problem and How to Monitor It
The reason for this is because Chrome for some reasons decides it needs to redecode and resize any images when a fixed panel goes over it. You can see this particularly well with
► Right Click Page -> Inspect Element -> Timeline -> Frames
► Hit Record on bottom
► Go back to the page and drag scrollbar up and down
This seems to just be a problem with the method Chrome is using to determine if a lower element needs to be repainted.
To make matters worse, you can't even get around the issue by creating a div above a scrollable div to avoid using the position:fixed attribute. This will actually cause the same effect. Pretty much Chrome says if anything on the page has to be drawn over an image (even in an iframe, div or whatever it might be), repaint that image. So despite what div/frame you are scrolling it, the problem persists.
The Easy Hack Solution
But I did find one hack to get around this issue that seems to have no downside as of now. By adding
-webkit-transform: translateZ(0);
To your fixed panel, putting that div in its own compositing layer.
I am having trouble with a custom template I currently have on my website: http://irishgourmet.ie
In the latest versions of Firefox, Chrome and Safari the images in the image placeholder (top right) all load fine and in the correct dimensions. However in the latest version of IE, the first image loads fine then the subsequent images are huge. This trend applies to every category page.
Anyone have any ideas?
Firstly, definitely get your hands on Firebug Lite for IE. I use the bookmarklet. It takes a while to load on some versions, but has definitely saved my ass more than once.
Secondly, I'm having quite the opposite problem. I see no issue with the images in the very top right, but if you'r referring to the image carousel on the right, the first carousel image is fine, but the others are being set to
width: 178px;
height: 30px;
And are loading very small. They look like this
Hope this helps in some way.
I've got a Wordpress site with some CSS3 rules applied to some images that rotate the images and have a hover effect on rollover too. Problems are showing up in Safari & Firefox when you hover on and then off these images and I can't seem to locate any similar issues by people on the Interwebs.
See http://tinyurl.com/3n2eude and hover on and then off the images (the slightly rotated ones):
Member name goes blurry and then back to normal (Firefox)
Member image border becomes jagged (Firefox)
A big black line displays to the side of the member images sometimes when you hover back and forth between two member images (Safari)
If I disable the transform:rotate rules, it's all fine. So seems to be an issue with that rule. Just can't work out how to get around it.
Anybody got some ideas on how I could get around these or what might be causing it?
Thanks for any ideas you might have!
Bit old of a question but that problem is related with rendering on browser (from what I understood). It cannot be fixed on CSS/HTML side. It must be fixed on user side.
Fix: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/
More information about problem: CSS3 rotate - rendering problems in Firefox and Safari
I've been pulling my hair out for the last few hours trying to wrestle with the IE8 developer toolbar while working with some styles not playing with IE7 mode properly...
Coming over from Firebug the difference is like... well lets just say its better then nothing.
What I'm wondering is, has there been any.. additions, patches, hacks, updates etc to improve the toolbar at all in IE8? It seems, like with most things associated with the IE line, this was really done as an afterthought and not much effort was put into making it work well...
Update: So I was, it seems, not specific enough.. here is what is annoying me about the IE offerings:
Style support - yeah, it is there, but it just doesn't feel right. It isn't easy to see the inheritance, and if you want to tweak an existing style you have to go into Attributes and add an override to the element.
HTML element location. This just seems a LOT cleaner in Firebug
Scrolling - If you have an element selected in the HTML pane, and you goto scroll in the CSS pane on the right it wont happen until you focus that pane.
Most of all its just the small annoyances - I think I've been too spoiled by Firebug, and I want it in IE - but considering the 'closed'-ness of the product it would be hard to get this rectified. To be honest, if I could contribute I would, because it would make my life so much easier - but... yeah.
Not sure what specific issues you are trying to debug, but the following tools all work well for their specific purposes:
Fiddler2 - HTTP Debugging Proxy - if you want to see what files are called, loaded, how, headers etc. this is the tool you want.
IE Tester - If you want to see how your site renders in IE6, IE7, IE8 without installing a bunch of virtual machines (or different PCs) this is a very good tool (not perfect, but very good)
DebugBar - Similar to the IE dev toolbar (but its been around much longer) it will let you inspect/alter various aspects of the HTML/CSS/JavaScript.
You're looking at Firebug Lite. See: http://getfirebug.com/lite.html
You can just install it easily onto your web page and it'll work just like Firebug on Firefox.
Tools may not help in this case as readily as you may wish. Here is Position Is Everything, a site that addresses some of the hacks required Internet Explorer. I have used IETester for IE 6 issues, but not for IE 8.
Good luck. IE issues really suck. If you're dealing with Sharepoint and it's mess of html and css I feel for you dude! If not, be thankful.