Internet Explorer CSS Property "Filter" Ignores Overflow:Visible

Internet Explorer CSS property filter ignores overflow:visible

It seems that the workaround to this is simple: Use -ms-filter rather than filter:

-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';

How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

This works, although it's extra markup.

<div id="box_that_wants_a_gradient">
    <div class="gradient_background_1"></div>
    <div class="gradient_background_2"></div>

My content

</div>

There is a bonus to this tactic, as you can add multiple gradient boxes and set their heights/widths as a % of the parent, thus emulating the "colour stop" behaviour allowed in safari/moz.

For example:

<style>

#box_that_wants_a_gradient {
  position:relative;
  display:block;
  height:100px;
  width:100px}

.gradient_background_1 {
  position:absolute;
  height:20%;
  *cbf writing out microsoft filter code*;
  top:0;
  width:100%;
  left:0px}

.gradient_background_2 {
  position:absolute;
  height:80%;
  *still cbf writing out microsoft filter code*;
  top:20%;
  width:100%;
  left:0px}

</style>

text-overflow:ellipsis doesn't work on IE

Removing the word-wrap: break-word property should help.

IE9 Dropdown menu - Filter bug

The issue is with the filter CSS properties you're setting on the <ul> and <a> tags in your code. IE9 will render the gradient backgrounds for you, but that causes it to set the hasLayout flag on the element internally, which causes the renderer to treat that element as if it had overflow: hidden; and you can't override that by simply setting overflow: visible; as it's not actually a CSS rule, but rather the way the internal rendering engine will treat the element when processing it. If you remove the filters with filter: none; in an override, or simply don't set them, then you should see everything work correctly again.

Alternative to visibility:collapse not working on IE and Chrome

Use

display: none

instead of
visibility: collapse

It works for me to hide the dojo tree grid summary row in IE6 & Google Chrome

How to override a filter:none in CSS

Extracted from this answer

Microsoft introduced -ms-filter to make Internet Explorer more
standards-compliant (CSS 2.1 requires vendor extensions to have vendor
prefix). As the syntax of original filter property is not CSS 2.1
compliant, IE8+ requires the value of the -ms-filter property to be
enclosed in quotation marks.

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" /* IE 8+ */;
filter: none !important; /* IE 7 and the rest of the world */  

As you said, you need to override an existing style, so append !important

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false) !important";

If you were wondering, quotations ARE required for this microsoft (-ms) vendor prefix. As you see this use case uses MS's gradients, interject that with whatever filter property you wish to override.

IE11 ignores background color in CSS

I fixed it by using

 min-height:            calc(100vh - 60px);

(minus 60px for the height of my header). This seems to work in all browsers that support flexbox.

CSS text-overflow: ellipsis; not working?

text-overflow:ellipsis; only works when the following are true:

• The element's width must be constrained in px (pixels). Width in % (percentage) won't work.
• The element must have overflow:hidden and white-space:nowrap set.

The reason you're having problems here is because the width of your a element isn't constrained. You do have a width setting, but because the element is set to display:inline (i.e. the default) it is ignoring it, and nothing else is constraining its width either.

You can fix this by doing one of the following:

• Set the element to display:inline-block or display:block (probably the former, but depends on your layout needs).
• Set one of its container elements to display:block and give that element a fixed width or max-width.
• Set the element to float:left or float:right (probably the former, but again, either should have the same effect as far as the ellipsis is concerned).

I'd suggest display:inline-block, since this will have the minimum collateral impact on your layout; it works very much like the display:inline that it's using currently as far as the layout is concerned, but feel free to experiment with the other points as well; I've tried to give as much info as possible to help you understand how these things interact together; a large part of understanding CSS is about understanding how various styles work together.

Here's a snippet with your code, with a display:inline-block added, to show how close you were.

.app a {  height: 18px;  width: 140px;  padding: 0;  overflow: hidden;  position: relative;  display: inline-block;  margin: 0 5px 0 5px;  text-align: center;  text-decoration: none;  text-overflow: ellipsis;  white-space: nowrap;  color: #000;}

<div class="app">  <a href="">Test Test Test Test Test Test</a></div>

Z-index broken in IE8?

The simple answer is to add a z-index value that is greater than the .thumbnail:hover value to the hover state of the span.

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: -140px; /*position where enlarged image should offset horizontally */
    left: -500px;
    z-index: 51;
}

---

Related Topics