| Jim Moe 2006-08-09, 7:14 pm |
| Jim Moe wrote:
> Hello,
> URL: <http://tucsonwomenschorus.com/>
> Firefox and Opera both show the image extended to the right of the
> content. IE6 does not; it clips it at the boundary of the content area.
> Have I made a mistake? Or Is there a workaround for this?
>
For those eager to know the solution...
The image is positioned with a negative right margin to move it outside
the enclosing div. The div itself had its width reduced to allow for the
news column.
By replacing the width with a right margin fixed the clipping problem.
But IE wasn't done yet: Reflow-on-hover. When the page loads, IE
calculates its various positioning values. When there is a mouseover, IE
recalculates its positioning, differently. The result was that the margins
for the text spread out, reflowing the text and moving the image to the
right a bit. Twitch! The whole mess is described in
<http://www.positioniseverything.net...ercentages.html>.
The solution was to wrap the content and news columns in a div that has
an explicit width defined, say width:100%. It has to be *explicit*.
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
|