Problems with <LI> indentation

[eviledna]

Hi all, there may not be a solution to this problems, but I thought I'd give it a go...

I'm trying to put a list of things on the intranet at work. I'm doing this using <LI> without <OL> as I don't want the list to be indented (the list is going into a narrowish table column and I need all the space I can get!)
This works OK, but when the text of an item is too long for the column it wraps down on to the next line, and starts underneath the bullet, rather than inline with the start of the text in the line above. It looks really untidy! Is there anyway I can get round this without using <OL>?

I hope I've explained this OK! Rough example below

* This is the start of my sentence but when it wraps onto the next linethe text appears under the bullet rather than in line with the start of the sentence above

 

[dwarfthrower]

Use the OL as intended. But use CSS to control the indent / margin.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]

 

[Vragabond]

You're doing things wrongly and expect correct results. That won't happen. You can style your lists in just any which way you want, but don't use list items without list element (ul or ol). Try again with the proper code and we can help you with the styling.

 

[eviledna]

Thanks for the comments. I used css to control indent as suggested:

<STYLE TYPE="text/css">
<!--
.indented
{
padding-left: 15pt;
}
-->
</STYLE>

 

[eviledna]

And I put <UL> tags in so I am no longer using illegal code!

This site has lots of interesting tips for CSSing lists

http://www.alistapart.com/articles/taminglists/

 

[cLFlaVA]

understand that different browsers apply default styling rules differently to elements. i know for a fact that firefox and internet explorer apply different stylings to ordered and unordered lists, in that one browser gives a default padding, while the other gives a default margin.

for this reason, i almost always initialize them both to 0, then set it as needed:

ol, ul, li {
    padding: 0;
    margin: 0;
}

ol.bigOl {
    paddding-left: 2em;
}

etc.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]