[thelist] Absolute positioned element and width 100% in IE

[Bill Moseley]

Playing with one of these bar graph layouts:

<div id="out">
    <div class="bar">
        <span>
            20%
        </span>
    </div>
</div>

I set the span (as a block element) to be relative to the "out" div and
position it absolute.  Yet, in IE setting
the span 100% is 100% of the "bar" element.  Other browsers it is 100% of
the element marked "relative" (the "out").
Is there a trick to make IE use the relative block's width?  Or is the only
solution to set "width: 100px" directly on the span?




#out {
    width: 100px;
    height: 60px;
    border: 1px solid red;
    position: relative;
    padding: 3px;
}

#out .bar {
    width: 20%;
    height: 100%;
    background-color: yellow;
}

#out .bar span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;   /* This is relative to enclosing block, not relative
block */
    height: 100%;
    text-align: center;
    border: 1px solid green;
}



-- 
Bill Moseley
moseley at hank.org