Dealing with Bullet Loss When The Image is Left of The <UL>
It doesn't do any good to manipulate the list-style-image property in order to retrieve lost bullets. There are a couple of ways to deal with the situation, however. Here is one:
• The text goes here. The text goes here. The text goes here. The text goes here.
• The text goes here.
• The text goes here. The text goes here. The text goes here. The text goes here. The text goes here. The text goes here. The text goes here. The text goes here. The text goes here. The text goes here. The text goes here. |
For each list item above we're using: <div style="text-indent:-10px;"><span style="font-size:20px; font-style:Arial;">•</span> The text goes here.</div> and we are not using any list markup like <LI> or <UL>. Below, however, we are using normal list markup. So what's the difference? The example above puts both the image and text in the same table cell, so that is what made the extra bullet code necessary. (Crowding text and image into one cell gives text that wraps around the image—that's the main purpose of this crowding strategy. It's how you do floats, as well, which we'd use more except for the Netscape bug that messes up linked images in a float.)
Bullets need to be against the left edge of something they're inside of—a table cell is a good example. Butting the list up against the right edge of the image and mixing image and text in the same cell makes list markup foul up. The bullets disappear and the indentations do too—unless you dump the list markup and use our workaround above. But the list below uses list markup and works fine. This list is in its own table, and this table is in a table cell as well, but the list is not sharing its cell with the image or anything else, which is what makes it work right. The cell is simply to the right of the cell the image is in. No workarounds needed; no text wrap achieved.
|
|