I am having difficulty with the page located here:
http://tinyurl.com/2zwa9
I am creating a number of image sets (some left-, some right-aligned; an
example of the right-aligned is shown the first figure below) in which
the text accompanying the image sets flows down around them. The image
sets have a single image on top and two immediately below. To create the
effect, I contain the image on top in a DIV and float it, and the bottom
two images are contained in a DIV and floated as well. The accompanying
text appears in the HTML file following the floated DIV elements.
In IE6.x this coding causes the line of text just at the point where the
two bottom images are rendered to fall behind the image rather than break
where the image appears. This line is shown as 'xxxxxx' instead of
'........'. In the URL above, this is seen in the first two image sets,
which have a large amount of accompanying text. I have not tested this
with other http clients to see if they style with a similar defect. Is
the defect in proper style coding, or is this a case of a defect in the
client to implement the specification properly? A suggested workaround
that works for most, if not all, browsers is appreciated.
These figures are prepared for message readers set to a fixed-pitch font:
[images are contained in the boxes; '.......' represent lines of text
'xxxxxx' represents a line of text that flows behind the leftmost of the
pair of images on the page]
+---------------+
................................. | |
................................. | |
................................. | IMAGE |
................................. | |
................................. | |
................................. | |
................................. +---------------+
xxxxxxxxxxxxxxx +---------------+ +---------------+
................ | | | |
................ | | | |
................ | IMAGE | | IMAGE |
................ | | | |
| | | |
| | | |
+---------------+ +---------------+
One fix would be to contain all three images in a floated DIV, but which
would exclude the text in an unwanted way like so:
+---------------+
............... | |
............... | |
............... | IMAGE |
............... | |
............... | |
............... | |
............... +---------------+
............... +---------------+ +---------------+
............... | | | |
............... | | | |
............... | IMAGE | | IMAGE |
............... | | | |
| | | |
| | | |
+---------------+ +---------------+