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
Related
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?
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'm using IP Net Renderer to view my newly installed forum in IE7. If you care to take a look, you can see the forum is overflowing its containing element.
The forum renders correctly in IE8+, FF, Chrome and Safari, but not IE 7. Does anyone know how I can fix this?
Thanks,
Chris
Your .wrapper class has width: 85%; set but no overflow rules. Try adding overflow: hidden; to that class.
Also, for good measure, I would suggest you replace the width: 100%; declaration in your .tborder class with width: auto;.
I have an html windows demo here: dlml.org/gargoyle/windowsdemo.html
Works for all browsers except opera, which doesn't resize properly with bottom:0 (confirmed here: http://dev.opera.com/forums/topic/562551).
I've substituted top:0 bottom:0 with height:100% here and there, and that helps, but that's not possible in all situations.
Does anyone have a workaround for this?
You could use display: table; properties in CSS