Hi, hopefully this wil be an easy one for someone.<br />
<br />
I want to create bullet points without a large indent. I want it to sit flush to the left hand side. i tried removing the <ul> tags which worked but now when the text is too long and goes on to the next line and sits under the bullet point and not the first letter like this.<br />
<br />
?I do not want the second line<br />
to sit under the bullet like this.<br />
But I do like want the bullet to be<br />
flush with the left hand side.<br />
<br />
<br />
below is the code that dreamweaver gave me when I selected bullet points which gave me the indent I did not want.<br />
<br />
<br />
<ul><br />
<li><font face="Arial, Helvetica, sans-serif" size="2">bullet point 1</font></li><br />
<li><font face="Arial, Helvetica, sans-serif" size="2">bullet point 2</font></li><br />
</ul><br />
<br />
Thanks for your time.<!--content-->This appears to give the correct result in IE and Mozilla at 800*600 resolution, but might look wrong at different resolutions, and I'm not sure how standards-compliant it is:<br />
<br />
<ul><br />
<li style="margin-left: -20px">bullet point 1</li><br />
</ul><br />
<br />
Adam<!--content-->The following always works for me:<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<meta name="Content-Style-Type" content="text/css"><br />
<title>Examply</title><br />
<ul style="margin-left:0px; list-style-position:inside"><br />
<li>fee</li><br />
<li>fie</li><br />
<li>foe</li><br />
<li>fim</li><br />
</ul><!--content-->Sometimes, if it's just a few of them, it's easier to use • instead of putting in lots of code. You can use those in one-liners, too.<br />
----------<br />
<br />
have to edit... now, how do we go around html code in here? I don't remember... so I'll just space it for now<br />
<br />
& # 1 4 9 ;<br />
<br />
of course<!--content-->duh!! (time to go to beddy-bye!)<br />
<br />
thanks, Dave!<!--content-->Actually, I've found this to work on all browsers. The main problem is that IE and the rest of the browsers out there handle the list indent differently. You'll have to forgive me not knowing which browsers support which, but padding is used, I think, in Mozilla/NS/Opera. IE I think uses margins to set the indent. Here's the workaround.<br />
<br />
IN A CASCADING STYLE SHEET:<br />
<br />
<br />
ul.noIndent {<br />
margin-left: .5em;<br />
padding-left: .5em;<br />
}<br />
<br />
<br />
IN YOUR HTML:<br />
<br />
<br />
<ul class="noIndent"><br />
<li>Item 1</li><br />
<li>Item 2</li><br />
</ul><br />
<br />
<br />
In CSS, an em is a measure of the average width of a character in a given character set. It can also be used to put spaces between things vertically too. By setting the margin and padding to one half of an em each, you get a total of one em of left-hand space, which is enough to still show the bullet like you want.<br />
<br />
Specifying class="noIndent" inside the ul tag will let you isolate this affect to only the ul tags with the class="noIndent" attribute and value. That way if you want lists with the indent, you don't have to write any other styles.<br />
<br />
You can see and example of this at work on the following page:<br />
<br />
<!-- m --><a class="postlink" href="http://www.cm-life.com/pages/newdesign/html/story.html">http://www.cm-life.com/pages/newdesign/html/story.html</a><!-- m --><br />
<br />
Just scroll down to the first breakout box. It has a bulleted list that's flush to the left.<br />
<br />
NOTE: the above code will NOT work on Netscape 4.x. And you will need to view the above link with a standards compliant browser, but nothing is hidden from non-compliant browsers.<br />
<br />
You can find out more list tweaks at <!-- m --><a class="postlink" href="http://www.alistapart.com/stories/taminglists/">http://www.alistapart.com/stories/taminglists/</a><!-- m -->.
<br />
I want to create bullet points without a large indent. I want it to sit flush to the left hand side. i tried removing the <ul> tags which worked but now when the text is too long and goes on to the next line and sits under the bullet point and not the first letter like this.<br />
<br />
?I do not want the second line<br />
to sit under the bullet like this.<br />
But I do like want the bullet to be<br />
flush with the left hand side.<br />
<br />
<br />
below is the code that dreamweaver gave me when I selected bullet points which gave me the indent I did not want.<br />
<br />
<br />
<ul><br />
<li><font face="Arial, Helvetica, sans-serif" size="2">bullet point 1</font></li><br />
<li><font face="Arial, Helvetica, sans-serif" size="2">bullet point 2</font></li><br />
</ul><br />
<br />
Thanks for your time.<!--content-->This appears to give the correct result in IE and Mozilla at 800*600 resolution, but might look wrong at different resolutions, and I'm not sure how standards-compliant it is:<br />
<br />
<ul><br />
<li style="margin-left: -20px">bullet point 1</li><br />
</ul><br />
<br />
Adam<!--content-->The following always works for me:<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<meta name="Content-Style-Type" content="text/css"><br />
<title>Examply</title><br />
<ul style="margin-left:0px; list-style-position:inside"><br />
<li>fee</li><br />
<li>fie</li><br />
<li>foe</li><br />
<li>fim</li><br />
</ul><!--content-->Sometimes, if it's just a few of them, it's easier to use • instead of putting in lots of code. You can use those in one-liners, too.<br />
----------<br />
<br />
have to edit... now, how do we go around html code in here? I don't remember... so I'll just space it for now<br />
<br />
& # 1 4 9 ;<br />
<br />
of course<!--content-->duh!! (time to go to beddy-bye!)<br />
<br />
thanks, Dave!<!--content-->Actually, I've found this to work on all browsers. The main problem is that IE and the rest of the browsers out there handle the list indent differently. You'll have to forgive me not knowing which browsers support which, but padding is used, I think, in Mozilla/NS/Opera. IE I think uses margins to set the indent. Here's the workaround.<br />
<br />
IN A CASCADING STYLE SHEET:<br />
<br />
<br />
ul.noIndent {<br />
margin-left: .5em;<br />
padding-left: .5em;<br />
}<br />
<br />
<br />
IN YOUR HTML:<br />
<br />
<br />
<ul class="noIndent"><br />
<li>Item 1</li><br />
<li>Item 2</li><br />
</ul><br />
<br />
<br />
In CSS, an em is a measure of the average width of a character in a given character set. It can also be used to put spaces between things vertically too. By setting the margin and padding to one half of an em each, you get a total of one em of left-hand space, which is enough to still show the bullet like you want.<br />
<br />
Specifying class="noIndent" inside the ul tag will let you isolate this affect to only the ul tags with the class="noIndent" attribute and value. That way if you want lists with the indent, you don't have to write any other styles.<br />
<br />
You can see and example of this at work on the following page:<br />
<br />
<!-- m --><a class="postlink" href="http://www.cm-life.com/pages/newdesign/html/story.html">http://www.cm-life.com/pages/newdesign/html/story.html</a><!-- m --><br />
<br />
Just scroll down to the first breakout box. It has a bulleted list that's flush to the left.<br />
<br />
NOTE: the above code will NOT work on Netscape 4.x. And you will need to view the above link with a standards compliant browser, but nothing is hidden from non-compliant browsers.<br />
<br />
You can find out more list tweaks at <!-- m --><a class="postlink" href="http://www.alistapart.com/stories/taminglists/">http://www.alistapart.com/stories/taminglists/</a><!-- m -->.