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

Nan Harbison nan at nanharbison.com
Sun Jul 26 18:02:36 CDT 2009


How funny that wikipedia calls this a bug. I thought Micro$oft did it this
way on purpose to be the biggest pain in the *** they could possibly be! And
I love this article on wikipedia, very well explained. I always have pointed
people to the excellent 456BereaStreet article, which explains the best
workaround, the conditional comments:
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_b
ox_model/

Cheers,
Nan 

-----Original Message-----
From: thelist-bounces at lists.evolt.org
[mailto:thelist-bounces at lists.evolt.org] On Behalf Of James O'Donnell
Sent: Sunday, July 26, 2009 4:02 PM
To: thelist at lists.evolt.org
Subject: Re: [thelist] Absolute positioned element and width 100% in IE

It probably has to do with the way IE interprets the CSS box model, which is
different than the W3C box model.

Take a look at http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

It may explain what is happening.

-----Original Message-----
From: thelist-bounces at lists.evolt.org
[mailto:thelist-bounces at lists.evolt.org] On Behalf Of Bill Moseley
Sent: Sunday, 26 July, 2009 15:50
To: thelist at lists.evolt.org
Subject: [thelist] Absolute positioned element and width 100% in IE

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
-- 

* * Please support the community that supports you.  * *
http://evolt.org/help_support_evolt/

For unsubscribe and other options, including the Tip Harvester and archives
of thelist go to: http://lists.evolt.org Workers of the Web, evolt ! 

No virus found in this incoming message.
Checked by AVG - www.avg.com
Version: 8.5.392 / Virus Database: 270.13.31/2264 - Release Date: 07/26/09
11:07:00

-- 

* * Please support the community that supports you.  * *
http://evolt.org/help_support_evolt/

For unsubscribe and other options, including the Tip Harvester and archives
of thelist go to: http://lists.evolt.org Workers of the Web, evolt ! 




More information about the thelist mailing list