[thelist] Absolute positioned element and width 100% in IE
James O'Donnell
jimmyropes at gmail.com
Sun Jul 26 15:02:22 CDT 2009
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
More information about the thelist
mailing list