Jeff Chastain wrote:
The issue I am running into is that I have a box which has a fluid width
(90% of the page). Within that box, I am attempting to absolutely place
another box at the very top, but with a 14px margin on both the left and
right side. The following CSS rules work just fine in FireFox ....
#container {
position: relative;
margin: 0 auto;
width: 80%;
#header {
position: absolute;
top: 0;
left: 14px;
right: 14px;
}
In IE however, the header box is positioned right, but it does not expand
the full width of its container. Instead it has an extra wide margin on the
right side. I think this could probably be fixed with a box model hack, but
I cannot figure out the right combination of rules to make IE behave.
Absolute positioning causes browsers to shrink-wrap the box, meaning
that a block-level box which once spanned the width of its parent is now
only as wide as its content. You work around this in FF and other
compliant browsers with your left/right settings. IE only honors one or
the other, though I think IE7 now allows you to set both.
Setting both the left and the right property causes the left of the box
to be absolutely positioned at value 'n' of the left property, and the
right of the box to appear at value 'n' of the right property. This
changes the default shrink wrapping for most browsers, making it more
block-like.
For IE, you have a few choices. Without a URL for reference, my guess is
that you might simply try removing the absolute positioning. If that's
not an option, you might also try setting the padding of #container to
something like "padding:0 14px" which would technically make your
#container box 28px wider than 80% of its parent.
HTH,
Bill
--
<!--
! Bill Brown <macnim...@gmail.com>
! Web Developologist, WebDevelopedia.com
-->
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
