I have tried to set CSS property to a DIV: position: sticky
But it doesn't work for IE11 and Edge15, does anyone familiar with any CSS pure polyfill that I can use in order to overcome this issue on those browsers?
Related
Hi i have applied position sticky on one of my element. I used following code:
position:sticky;
top:10px;
z-index: 1;
Also i have removed overflow hidden from parent classes. But still sticky position not working.
Any suggestion please.
Thanks
Are you on Safari.
Unfortunately position: sticky is not supported in Safari with some disparity in some Chrome versions i think.
I would recommend using the old way with position: fixed; and absolute positioning.
I'm currently testing out css for img tag. On chrome it look good but when I viewed it in firefox, the last image is stretched out. I'm not sure what's wrong. Below is my jsfiddle in which you can see the difference when you view it in Chrome and Firefox.
.thumbContainer img{
margin: 0 auto;
max-width:100%;
max-height:100%;
object-position: 50% 50%;
object-fit: fill !important;
}
This happens, because you are using browser-specific CSS properties like -moz-box or -webkit-box, which are not officially supported. This can cause different behavior in different browsers, becauseit's up to the browser to decide how to display such elements, and for Firefox, the "correct" behavior is, to strech it, while for chrome its correct to fit in its parent. My general advice is: Avoid styling with prefixed CSS properties, unless it is absolutely necessary to enable standard CSS functionality in older browsers. Maybe there is another approach for your problem with flexbox.
http://metagraf.github.io has been behaving well in all tested browser until IE10 came along. The top menu is overlaying the entire page when viewed in IE10.
A screenshot of how the page looks in IE10 can be seen here: https://dl.dropboxusercontent.com/u/2897577/ie10.png
Any ideas on how to fix this?
regards Oskar
So when I run the site in question in IE 10, yes indeed, the top menu does look buggy in IE 10.
The immediate source of the problem is the img in the navbar.
If you hit F12 and use IE's developer toolbar, and then if you set the width property of the img from auto to just being un-checked (so that auto is no longer the value, the site all of the sudden looks normal.
Digging deeper into the issue, here's the css setting for img in bootstrap:
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Ok, so what in the world is width: auto\9?
Well, looks like it is an IE hack, but a hack that does not apply to IE 10.
CSS \9 in width property
http://www.paulirish.com/2009/browser-specific-css-hacks/
So as a quick fix, I suppose one thing you could do would be to set a custom css property
on the img in the navbar that is exact about the width of the img.
I am having issues with overflow-x:hidden in IE. All other browsers seem to accept it, but IE creates overflow-x:hidden (x and y).
Does anyone have any tips on a IE fix?
Since -ms-overflow-x is working it's possible you have an issue with your DOCTYPE declaration.
See here
Remarks
Windows Internet Explorer 8. The -ms-overflow-x attribute is an
extension to CSS, and can be used as a synonym for overflow-x in IE8
Standards mode.
With Microsoft Internet Explorer 6 and later, when you use the
!DOCTYPE declaration to specify standards-compliant mode, this
property applies to the html object.
I was able to fix the same issue I was having in IE8 by adding:
position: relative;
to the div that needed the overflow-x: hidden functionality.
Without the relative positioning on the div, my content was showing outside the div even though I had set overflow-x: hidden.
The answer of Svbaker is also correct. try this one this work for me.
<div style="overflow: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
white-space: nowrap;
position:relative;
">
...somecodes..
</div>
-ms-overflow-y: hidden; - this works for IE8 just remember adding position:relative because overflow-y/x is for CSS3 and works for higher browser.
yah overflow-x and y is a css3 specification.
Try using a jquery plugin like http://baijs.nl/tinyscrollbar/
otherwise I'm guessing you are trying to hide the "width" of the element? why not
1. set the width of the element to a specific size
2. set overflow:hidden
3. set height to auto
I'm attempting to fix my CSS to allow older IE's to view my web site as best as possible.
I'm using 'border-radius' to style form fields giving them rounded corners. For the older IE's I'm using the background image below--
http://studio.allanbendy.com/sites/all/themes/studio_allanbendy_7/i/form-textfield-bg.gif
.form-textfield {
background: url("/i/form-textfield-bg.gif") no-repeat bottom right;
background-attachment: fixed;
height: 15px;
width: 362px;
}
Unfortunately the CSS above does not seem to style the text field on IE 7 and 8. It works just fine on IE 6.
Any suggestions?
Remove the background-attachment: fixed;. Because IE6 ignores this for non scrollable elements it's displayed there. But at all the attachment definition makes no sense, if you want to style a single element.
Instead of an IE-specific graphic, I'd recommend using CSS3Pie to do rounded corners in IE.
It's a great solution to get IE to support standard CSS border-radius style.