Problem with clear:both in a list

[Stan Brown]

http://www.acad.sunytccc.edu/instruc...tat15/demo.htm
http://www.acad.sunytccc.edu/instruc...n/npscreen.css

The first table is floated right (class="fr"). Text does not flow
around the table, as I thought a float should do, but there is white
space below the table to the end of the document.

Then when the second floated table comes along, it too reserves
space under itself to the end of the document. The text is left in a
very narrow column.

I even tried putting in a clear:both (via <div class="clear">) at
the end of the first long list item, but it didn't help.

What am I doing wrong?
--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Michael Rozdoba]

Stan Brown wrote:

http://www.acad.sunytccc.edu/instruc...tat15/demo.htm
http://www.acad.sunytccc.edu/instruc...n/npscreen.css

The first table is floated right (class="fr"). Text does not flow
around the table, as I thought a float should do, but there is white
space below the table to the end of the document.

Then when the second floated table comes along, it too reserves
space under itself to the end of the document. The text is left in a
very narrow column.

Seems fine in IE 6 & Opera 7.23. Firefox 0.8 is a different matter & I
am getting the behaviour you describe. I might be imagining it, but I
could have sworn it did render okay until I selected a resize from the
toolbar.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Michael Rozdoba]

Stan Brown wrote:

http://www.acad.sunytccc.edu/instruc...tat15/demo.htm
http://www.acad.sunytccc.edu/instruc...n/npscreen.css
[snip]
What am I doing wrong?

Maybe I'm confusing you with someone else, but I thought you were a
regular poster, so I didn't bother to double check...

Your html isn't valid. You can't put a div in a list, only list items.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Stan Brown]

"Michael Rozdoba" <mr**@nowhere.invalid> wrote in
comp.infosystems.www.authoring.stylesheets:

Stan Brown wrote:

What am I doing wrong?

Maybe I'm confusing you with someone else, but I thought you were a
regular poster, so I didn't bother to double check...

Your html isn't valid. You can't put a div in a list, only list items.

I'm sorry -- in stripping some of the excess from the original
(validated) page that displayed the problem, I accidentally created
invalid HTML.

I've fixed that, and validated both the HTML and CSS with no
warnings or errors. Now if you look at
http://www.acad.sunytccc.edu/instruc...tat15/demo.htm
http://www.acad.sunytccc.edu/instruc...n/npscreen.css
you see the same behavior I reported earlier -- text doesn't wrap
around the floated tables, and even an explicit clear doesn't seem
to work.

I'm using Moz 1.4. You mentioned that IE and Opera seemed okay but
Firefox didn't. Maybe this is a Mozilla bug -- if so, does anyone
know a workaround?

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Michael Rozdoba]

Stan Brown wrote:

I'm sorry -- in stripping some of the excess from the original
(validated) page that displayed the problem, I accidentally created
invalid HTML.
That explains that :)
I've fixed that, and validated both the HTML and CSS with no
warnings or errors. Now if you look at
http://www.acad.sunytccc.edu/instruc...tat15/demo.htm
http://www.acad.sunytccc.edu/instruc...n/npscreen.css
you see the same behavior I reported earlier -- text doesn't wrap
around the floated tables, and even an explicit clear doesn't seem
to work.
Indeed - this time with Firefox 0.9.1.
I'm using Moz 1.4. You mentioned that IE and Opera seemed okay but
Firefox didn't. Maybe this is a Mozilla bug -- if so, does anyone
know a workaround?

<fiddles>

Ah, interesting. I don't know what the CSS spec implies is the correct
interpretation, but I think I do see why Gecko is getting upset.

I hope someone will be able to explain whether Gecko or Opera is taking
the correct approach.

You insert your floated table as the last object within a list item,
then in the following list item, want the paragraphs contained therein
to flow around the preceeding table. With Gecko, whilst they are
rendered to the side of the table, they refuse to flow below it.

Although nothing jumps out as being blatantly wrong with such a
structure, it does feel somewhat unnatural to me. Without knowing what
the spec implies, I'd be inclined to think that logically, as the text
below is in a separate list item, the browser could reasonably render it
in a way which makes it quite separate from the preceeding list item.

It would seem more natural to me to make the table the first item within
the subsequent list item, particularly as structurally, it contains
information related to that list item (hence the reason you want the
text near it).

Doing this seems to avoid your problem & the code renders, in respect of
it, fine in Gecko, IE 6 & Opera 7.23 (though the latter two do seem a
bit unsure as to where to place the list item number - Opera puts it
inside the table; I imagine this can be worked around).

I'd be very interested to hear what others think a browser ought to do
with your construct.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Stan Brown]

"Michael Rozdoba" <mr**@nowhere.invalid> wrote in
comp.infosystems.www.authoring.stylesheets:

Stan Brown wrote:

http://www.acad.sunytccc.edu/instruc...tat15/demo.htm
http://www.acad.sunytccc.edu/instruc...n/npscreen.css
you see the same behavior I reported earlier -- text doesn't wrap
around the floated tables, and even an explicit clear doesn't seem
to work.

[snip -- musings about whether Gecko or Opera is doing the right
thing]
You insert your floated table as the last object within a list item,
then in the following list item, want the paragraphs contained therein
to flow around the preceeding table. With Gecko, whilst they are
rendered to the side of the table, they refuse to flow below it.

Although nothing jumps out as being blatantly wrong with such a
structure, it does feel somewhat unnatural to me. ...
It would seem more natural to me to make the table the first item within
the subsequent list item, particularly as structurally, it contains
information related to that list item (hence the reason you want the
text near it).

I have to admit you're right. The reason I did it the illogical way:
I have a preprocesor that does macro substitutions, and the setup
for a quiz question is a macro. The table couldn't come in the
middle of the paragraph in the file, so it had to be either after
the paragraph (all sorts of positioning issues) or before the list
item.

But you're right, it's illogical. I've changed the HTML and posted
the file as
http://www.acad.sunytccc.edu/instruc...at15/demo2.htm
(I also closed all the <li> tags, just to avoid side issues.) I
confirm that Mozilla now seems to do the right thing. I don't have
an IE later than 4, but Opera 6 screws up the item numbers, just as
you say Opera 7 does. I'm curious how this "can be worked around."
:-)

But if I've learned one thing in this group, it's that sometimes
it's hard to code something because there's really a fundamentally
better way to reach the goal. I'm trying to create quizzes. I do it
in HTML because then after administering the quiz I insert the
solutions and post the page for students to view. This frees up
classroom time that would otherwise be spent going over the quiz.

A list seems like the natural structure to me, but maybe it's not.
I'm very much open to suggestions.

The restriction I'll make is that it has to look right in MSIE 5 as
well as real browsers -- not necessarily identical, but reasonable.
I don't think moving the question numbers inside the data table is
reasonable. :-)

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Michael Rozdoba]

Stan Brown wrote:

http://www.acad.sunytccc.edu/instruc...at15/demo2.htm (I also
closed all the <li> tags, just to avoid side issues.) I confirm that
Mozilla now seems to do the right thing. I don't have an IE later
than 4, but Opera 6 screws up the item numbers, just as you say Opera
7 does. I'm curious how this "can be worked around." :-)
Damn ;)

I think you've discounted the easiest, of making the first object in the
list item textual & follow that by the floated table & subsequent text.

If structurally this is acceptable (maybe a question title or header?),
it seems the cleanest solution, though it annoys me that layout should
dictate content in this way.

I have no satisfactory alternative. One could make the first object
inside the list item a &nbsp; which with tweaking of the vertical
positions of table & text will do the job, but this is hideous.

Instead one could dispense with list items & use divs instead, though
that's really just giving up :/
A list seems like the natural structure to me,
Likewise.
but maybe it's not. I'm very much open to suggestions.
A sequence of divs with manual numbering? I don't have much experience,
so I hope someone else will help come up with a effective solution.

Aside: this group seems quiet lately - I wonder why many of the regulars
seem to have gone silent.
The restriction I'll make is that it has to look right in MSIE 5 as
well as real browsers -- not necessarily identical, but reasonable. I
don't think moving the question numbers inside the data table is
reasonable. :-)

It might be reasonable to do, but I certainly agree, it doesn't look
reasonable :)

--
Michael
m r o z a t u k g a t e w a y d o t n e t