Sent by Trusz, Andrew on 2 October 2003 18:06
Mike wrote:<snip>
This is what you're seeing in Netscape. The div with the "main" class is
doing what it should -- it is ignoring the floated block box when figuring
out its position and dimensions, then pushing its content out of the way of
the floated element.
IE doesn't do this, however. Instead of pushing the content over, it pushes
the entire box over. To get both sets of browsers to act the same (and to
resolve the padding differences between the browsers) give "textcolumn" a
left margin of 300px -- the width of the floated element -- then adjust the
padding as desired.
</snip>
Isn't this the opposite of what is happening? The left edge of the text box
seems to actually be sliding under the right edge of the picture in both
Opera and Firebird (don't have NN to test with). If the imgcolumn,
containing the image, is expanded to a width of at least 305px, the padding
appears in the text box. Further, if you put a border on the floated image
box, imgcolumn, you'll clearly see that the right edge even then extends
over the left edge of the text box. The right edge of the float doesn't seem
to be being respected by the left edge of the text box -- contrary to the
specs.
Further, if you strip down the code to just the float and the text boxes,
even in IE6 the left edge of the text box slips under the right edge of the
picture unless the size of the float box is increased to at least 305px. But
again, it is clear that the text box is becoming visible through the float
box not that the text box is respecting the float edge.
Left padding the text box to 300px doesn't solve this. The text box seems to
respect the right edge of the float when you try the left padding. That is,
the text shifts 300 px to the right within the text box not viz-a-viz the
float. And if you apply the padding to the containing div, everything shifts
right the 300px.
Its tempting to think that there is some strange behavior with the picture
as float that explains this. But, in the original code if you make the div
"horizon" visible by giving it a border, you can see the border in the gap
between the float and the text boxes. Although that doesn't mean there isn't
a transparent edge/background on the pic/float through which the "horizon"
border will show. All of which suggests some strange combination of cascade
is causing IE6 to create the gap. But I've not idea of what it might or
might not be. Or if it is some feature of how floats or images are handled
in browsers.
A workable solution would be to remove the container and then to also left
float the text box. Expand the imgcolumn to 305px to create the gap and
adjust the width of the text box to a percentage basis so it fits the view
port.
I hope this makes some sense.
drew
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/