overflow:hidden issue internet explorer 7

Question

HTML

<div class="block">
    <div class="element1">text text text text </div>
    <div class="element2">text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
</div>

CSS

.block{
    background:#F00;
    float: left;
    height: 90px;
    padding: 0 24px 0 0;
    position: relative;
    width: 256px;
}   
.block .element1{
    color: #000;
    display: block; 
    float: left;
    font-size: 32px;
    height: 35px;
    overflow: hidden;
    padding: 25px 0 0;
    text-align: right;
    width: 100%;
}
.block .element2 {
    color: #000;
    display: block;
    float: right;
    font-size: 12px;
    height: 14px;
    line-height: 1.1;
    margin: 15px 0 0;
    max-width: 205px;
    overflow: hidden;
    padding: 0 0 0 15px;
    text-align: right;
    width: auto;
}

overflow:hidden attr in element2 class => There isn't any problem for IE8,9,FF,Chrome,Safari,Opera but if I open page with IE7 texts don't display. Added position:relative attr to block class (wrapper class) but there isn't any change ( IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo ) How can I fix the issue? http://jsfiddle.net/L5Y57/

u need to add `position: relative;` property to classes that use overflow, + u have 2nd issue, text not shown because `.block .element2` has `width: auto;` property, when i changed it to 100% instead of auto (or any fixed width) seemed to me the issue fixed, may u check it please before i answer this. look at : http://jsfiddle.net/L5Y57/2/ — Al-Mothafar, Feb 06 '13 at 13:16

score 5 · Accepted Answer · answered Feb 07 '13 at 08:46

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:hidden issue internet explorer 7

1 Answers1