Sent by Michael Landis on 3 February 2005 20:08
Chris wrote:
> Appologies as I may not have explained too well in my original post.
> I dont mind '#imagerotate' scaling at all as this is my intention but
> the white edge to the left is ever so slightly wider than all the
> others. I would like this to be identical in width as the other white
> lines on the page. Thanks and sorry for the confusion
Hi, Chris,
I think Chris Akins has it right. When you're dealing with percentage
dimensions, you really won't be able to define pixel dimensions around it
without those percentages messing up the numbers. In addition, since your
percentages are based upon two different container widths (the width of
container01 for the left boxes, the screen width for imgrotate), it'll only
be a blue moon when the numbers actually match up.
According to W3, the width of an element is defined by the width of its
containing block.[1] For unpositioned (or, rather, statically positioned)
elements, the container is whatever block holds this block. For the left
boxes, that means #container01. For absolutely positioned elements,
however, the containing block is the closest ancestor that is also
positioned, or if nothing's positioned, its container is the root element
(HTML, which is normally defined to be as wide as the browser window).[2]
This means that while #imgrotate is 57% of the screen width, the left-hand
boxes are 40% of *30 pixels less than* the screen width, since the body
padding and #container01 margins makes #container01 that much smaller.
To make this work more consistently, consider positioning #container01
relative, and setting #imgrotate's top and right offsets to zero. You can
then define #imgrotate as 60% of the container width. Since #imgrotate and
the left boxes have the same container, 40% + 60% will equal 100% of that
container's width, keeping them in sync. (This also allows you to not worry
about browser differences in positioning that right edge of the box --
right: 0 is pretty well defined for everything except Netscape 4, and all
of the other boxes fill #container01.)
You will still want to apply the 5px solid white left border on #imgrotate,
since there will be no other good way to make that border consistently 5px
wide, but at least then you won't have to worry about rounding errors or
screen widths.
HTH,
Michael
[1] http://www.w3.org/TR/CSS21/visudet.html#the-width-property
[2] http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
