IE6 + IE7 CSS Problem with Overflow: Hidden; - Position: Relative; Combo

IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo

This problem is apparently a known bug for IE 6 + 7, which was fixed in IE8.

To avoid this, in this case you can replace:

ul {
    left: -499px;
    position: relative;
  }

with:

ul {
    margin-left: -499px;
  }

This however gave some problems with the background I used on the infobox div, but nothing I couldn't solve with a few style hacks.

CSS overflow:hidden not working in IE and position:relative makes no difference

I've solved it. I needed all of the following to make it work consistently cross-browser:

- "display:inline" on the DIV inside each LI (to stop IE adding a line-break);

- a fixed height and "overflow:hidden" on the LI tags; and finally

- "list-style-position:inside" on the UL, because "overflow:hidden" was hiding the bullets.

overflow:hidden issue internet explorer 7

As i said in comment.

You have to Add position: relative; property to classes that use overflow: hidden.

And you have another issue, its because width: auto; at classes .block .element2, its known bug with IE7 too, to solve it change it to width: 100%; or any fixed width.

You can check my fixes in your code : http://jsfiddle.net/L5Y57/2/

overflow-y: hidden on window height x px not working in IE7

"It is a well-known bug in IE6 and IE7. To solve it, you need to add position:relative to the container. Since in your case body is the container, I'd suggest you add a div directly under the body and give it position:relative. It should solve your problem."

See if this helps

IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo

IE11: overflow: hidden doesn't work

The cause was the attribute transform: translate3d(0px, 0px, 0px) series added to force render the div. I added all four of them using LESS's method, but only the first one is really in use.

-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

Remove the last one and it's fixed.

Overflow hidden doesn't work on several pages

There is overflow-y on the id page-container. remove it or change it to overflow-x.

Div Wrapping In IE6 Only

From what I can tell, the div that holds your title doesn't have a set width. Therefore, IE is telling it to expand, and as it expands, it shifts downward, where there's space. Try setting a width for IE6 only and see if that fixes it.

Additionally, IE6 has some issues with overflow: hidden. Though it's usually in combination with position: relative, you may be running into something similar. If the previous solution doesn't work, you could try this.

Edit - Since you don't want to set an explicit width, I've thought of a few other options left to you:

1. Explicitly set clear: none on the non-floated element
2. Use a span element instead of div for the text in question (span is inline, while div is block, so it shouldn't expand to the parent width; given what you're doing, it probably makes more semantic sense to use span, anyway).
3. Use JavaScript to determine the width of the floated div for IE6, and set a size on the non-floated div accordingly (again, you can use conditional comments in your HTML to target IE6 exclusively)
4. Seriously consider whether it's worth supporting IE6 (ie - if this is on a site where the audience is fairly tech-savvy, you can probably forego IE6 support entirely, or at the very least, fixing this problem will cost your project more than the returns you get; but if you're dealing with healthcare providers, you probably have to still deal with IE6).

IE6 has a non-standard box model, which tells block-level elements to expand the full width of their container, instead of "shrink-wrapping" to their content. Their content is larger than the width they're allowing, and the float property takes the floated elements out of the document flow (which is why your overflow: hidden, when turned to overflow: visible, runs over top the floated content). The newer browsers have basically an "updated definition" (so to speak) of the float property, which tells sibling content to flow around the floated element, in addition to taking it out of the normal document flow. CSS-tricks has a good article on float, as does A List Apart, if you need more information.

IE7 Jquery Position: Relative

A quick search turned up this question and answer. Basically, for overflow hidden to work with relatively positioned children in IE6/IE7, you need to position the container relatively as well. So in this case:

.jSlots-wrapper {
    position: relative;
    overflow: hidden;
    height: 20px;
    display: inline-block; /* to size correctly, can use float too, or width*/
    border: 1px solid #999;
}

---

Related Topics