just stick this on the <ul>, and it should move

<ul style="list-style-position:inside">

(...if it doesn't work, then change 'inside' so it says 'outside' instead -- i can never remember which way round it is!)

Thanks very much, that definitely helps. It gets me halfway to the solution. I can now style *all* ul's that way with a rule in my <style></style> (which is what I want, a generic solution), and then the bullets don't run into the floated table, and ul's nowhere near the table are still indented the proper amount.

But the ul that's next to the table, even though it no longer runs into the table, it's not indented as much as it should be. It's flush-left with the paragraph above and below it. I know I can style that individual UL with padding or margin to fix it, but again, I'm looking for a generic solution that doesn't require me to mess with that UL specifically, if possible.

I can now style *all* ul's that way...

Styling all your UL's as

list-style-position:inside

(or 'compact') may not be desirable as if you have more than 1 line in your list item (LI) then the 2nd line will appear below your bullet, not indented at all. (And you also lose your left margin against the floated table.)

Another possibility might be to place the content that follows your floated table into a DIV container and

float:left;

that DIV container also. Your list will display OK, but at the expense of additional markup.

I can style that individual UL with padding or margin to fix it...

I think you'd need to add margin-left to the individual LI's (perhaps through a class on the UL) - adding margin/padding to the UL does not seem to have the desired effect when following a floated element (just as adding margin-left to your <p> will not have an effect either).

Perhaps you could try to target UL's that follow ('~' selector) floated tables in your CSS. If your table was given a class 'float_left', then:

table.float_left ~ ul li { 
margin-left:40px; 
}

This will work in FF (but not IE6), and you then have the problem that *all* UL's that follow the table will be styled in this way.

Any other ideas?

Thanks for the tips. Floating the body copy left also didn't work (bullets appear inside the table), whether the table was inside or just before the float-left div.

It seems like my options are:

(1) Apply list-style-position to all UL's, and either not having multiline LI's, or not caring if the second line wraps under the bullet instead of being indented. -OR-
(2) Styling the initial <UL> separately with margins/padding.

Styling the initial UL with margin/padding was my original solution. I'm pretty sure I styled the UL's and not the LI's.

Floating the body copy left also didn't work (bullets appear inside the table)...

Floating a containing DIV, as in the following, should work... (?) However, the list itself can't be floated for it to work in IE6 (the bullets disappear altogether).

<table width="150" height="200" style="float:left; margin-right:10px" bgcolor="yellow" border="1"><tr><td>Some Text</td></tr></table> 
<div style="float:left;"> 
<p>All content following the floated table contained within a floated DIV:</p> 
<ul> 
<li>sit amet, consectetuer</li> 
<li>adipiscing elit<br>Second line...</li> 
<li>auris mollis nunc</li> 
</ul> 
<p>Nam egestas lorem non nibh.</p> 
</div>

Another thought... use JavaScript to apply your UL class to all UL's that appear 'soon after' your floated table?!

I'm afraid that doesn't work (Firefox or Safari) if any line is longer than one line. For example, changing the final paragraph to:

<p>Nam egestas lorem non nibh. Phasellus eros est, vestibulum nec, vulputate sed, aliquet at, tortor. Etiam tempor. Nullam fermentum elementum sapien. Proin condimentum pulvinar nunc. Sed augue velit, tincidunt non, interdum quis, ultricies vel, magna. Integer dignissim enim a nulla. Nam vel ligula. Suspendisse nisl. Proin dapibus ultrices lectus. Ut orci velit, laoreet et, vehicula nec, egestas et, sapien.</p>

Makes the whole DIV appear *under* the table.

And yes, I could style the first DIV manually with Javascript, but as long as I'm messing with the first div anyway I might as well just code it with simple CSS.

Let me use this opportunity to complain that HTML was created almost as an afterthought, without any real planning or scrutiny. And there's still a bunch of stuff missing from HTML and CSS, like, oh, say ROUNDED CORNERS. You should be able to create those with a single table parameter, not a bunch of other busywork. Grr. Can you tell I'm frustrated? :) Damn computers.

I'm afraid that doesn't work (Firefox or Safari) if any line is longer than one line.

Ah yeah, dang! But IE6 is OK.... hhmmmm. I guess setting a width (perc%) on the DIV is not a desirable option?!

The only width that would be acceptable would be 100%, and when I tried that I had the same problem in Safari (didn't test the others). Worked when I used a fixed width, but I have a fluid layout so that wouldn't work.

Damn computers.

Anyway, I'll just style the first <UL> separately, because even if it's awkward, at least it works.