CODEWITHSUNDEEP
htmlcss
Maelig
Maelig

Reputation: 2096

Div too tall with IE7/8

I've just wasted a day trying to find the answer on my own.

I should have this (works on FF) , but with IE7/8 (I must be IE7/8 compliant) I have this.

Here is the code :

<DIV style="HEIGHT: 10px" class="timeline">
    <DIV style="WIDTH: 24px; LEFT: 0px" class=separator title=W1>
        <DIV class=left></DIV>
        <DIV style="WIDTH: 24px" class=bar></DIV>
        <DIV class=right></DIV>
    </DIV>
    <DIV style="WIDTH: 156px; LEFT: 24px" class=separator title=W2>
        <DIV class=left></DIV>
        <DIV style="WIDTH: 156px" class=bar></DIV>
        <DIV class=right></DIV>
    </DIV>
</DIV>

And CSS :

body{
    margin:0;
    padding:0;
}
.timeline{
    position:absolute;
    height:10px;
    margin-top:15px;
    margin-left:20px;
}
.timeline .separator{
    position: absolute;
    height:20px;
}
.timeline .separator .left{
    position: absolute;
    background-color: #000;
    left: 0;
    width: 1px;
    height: 10px;
}
.timeline .separator .bar{
    position: absolute;
    margin-top:4px;
    background-color: red;
    height:2px;
}
.timeline .separator .right{
    position: absolute;
    background-color: #000;
    right: 0;
    width: 1px;
    height: 10px;
}

Thanks for your help !

Upvotes: 0

Views: 174

Answers (2)

thebiffboff
thebiffboff

Reputation: 958

Even though your .bar div has not text content, IE7 will always make it the height it would be if it contained text at the current font size. It is simple to fix, just add a font-size and line-height:

.timeline .separator .bar{
    position: absolute;
    margin-top:4px;
    background-color: red;
    height:2px;
    font-size: 0px;
    line-height: 0px;
}

Upvotes: 1

WolvDev
WolvDev

Reputation: 3226

Your problem is the line-height. Set it to 0px and it will work :)

Upvotes: 0

Related Questions