Not even sure where to start with this one, but im hoping someone else has had this issue.
When using IE7 (not IE7 mode in IE9), all the styles seems to be dropped except for the background and all the text is shrunk to around 2px. So its just a page with all the images, text and inputs barfed into the page.
Here is an image:
Any Ideas as to what would cause this?
figured it out: for some reason I had zoom:1px; in my css reset.
Fixed!
Related
I am using Skrollr plugin and it's working fine on desktop.
On iPad though, the height of my document is cutoff. I have tried to remove all skrollr data attributes, but the issue persists, I noticed that just by activating the plugin I get this issue.
I tried to enable/disable the forceHeight option but the issue persists. Any idea?
Many thanks
I had this issue, too, but I fixed it by adding an empty data-top and data-bottom to the #skrollr-body div. (Though depending on how strict your HTML cleaners are, you may need to add data-top="" or data-bottom="")
<body>
<div id="skrollr-body" data-top data-bottom>
Your content here.
</div>
</body>
I'm still looking into the explanation of why this fix works, but I believe it has something to do with setting keyframes. By making sure your #skrollr-body has keyframes for top and bottom, it ensures both are seen in the viewport.
More details here: https://github.com/Prinzhorn/skrollr/issues/576
I made a infinite carousel from scratch into a plugin with jquery. It works fine in Firefox but it works partially in Chrome, i.e. elements disappear as I slide the carousel.
Please view my codes here (it was too long to paste it): http://jsfiddle.net/HkTks/2/
Compare the carousel with Firefox and Chrome.
Why is Chrome behaving like that?
Many thanks​
Well, this may be a webkit bug. Looks like somehow the anchor element accidentally inherited absolute positioning rather than relative.
Seeing the style of .iconList a to include position: relative; and removing top:0 seemed to fix it for me.
Here's the updated fiddle: http://jsfiddle.net/HkTks/4/
Greetings,
I'm having a lot of trouble with the IE8 buy of getting black borders when using a JQUERY slider, with PNG transparent images.
Using a slightly modified version of the Nivio slider.
I have searched high and low for fixes and blocks of code but so far none have worked.
What happens is that as soon as the img cycles it gets the black border and looks like shit (only in IE8).
Does anyone know a working fix for this?
Or do we just have to ban IE from all computers?
Solutions here: jquery cycle IE7 transparent png problem
As I can recall this generally happens in IE7+ when a PNG with alpha channels is faded in or out, which uses opacity.
As for a fix, I was unable to find one, but there is the cause I believe.
OK, so I'm working on a redesign and we've got most of our cross-browser CSS compatibility bugs worked out - except for a glaring one with ie7.
The issue is that we are using a JavaScript for a navigational menu drop down. In all browsers except the noted culprit everything functions as expected.
However, in IE7 I'm getting the drop down appearing behind my other page elements, as though the z-index was set to something negative. But I do in fact have a CSS rule applied that sets this element to a z-index of 4000, and used that rule to correct the same issue on modern browsers.
For some reasons IE7 isn't recognizing the rule. Does IE7 not support this CSS rule?? If not, any suggestions for how to resolve it for IE7? A JavaScript solution?
Here's the page in question: http://betawww.helpcurenow.org/
Thanks!
OK, after doing a bit of research thanks to Scott's suggestion about the IE7 z-index being the issue, I found the solution at http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
The trouble was my containing elements (div#header and div#mainContent) needed to be assigned z-index values for IE7 to resolve this issue.
I also ran into this problem, but assigning a high z-index to the containing element (menu) did not resolve the problem in itself. I had to add position: relative to push it in front of the stubborn script (of course, assigning z-index: 0 to the image script).
In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly.
This could be part of the problem, if you need a JS solution, you might look into the following project:
http://code.google.com/p/ie7-js/
OK, after doing a bit of research thanks to Scott's suggestion about the IE7 z-index being the issue, I found the solution at http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
The trouble was my containing elements (div#header and div#mainContent) needed to be assigned z-index values for IE7 to resolve this issue.
This is very useful. Thank you so much.
Put your menu in a new DIV and give z-index (greater value) to that DIV.
I had this problem and I put this code in the page(s) with the issues and it solved it. Just replace div with whatever the element is.
<script>$(function() {
var zIndexNumber = 1000;
$("div").each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
</script>
I've developed a plugin that makes characters jump and bounce when moused over in any element that contains text.
Here is an example.
It works great in Firefox 3.5, Chrome, Safari 3.1 and IE7 (oddly, but in compatibility mode) but in IE8 it seems the characters disappear as they rise. I've added top padding to the p element, because it looked like they were being hidden from something like overflow: hidden, but they appear to rise a bit and then completely disappear, only to reappear on their way down.
Does anyone know what may be causing this?
Thank you very much Stackers!
Setting a line-height should fix it.