All forums have searches, like this one does, and sometimes I find them helpful. Other times... I have come up completely empty on <li>, li, .li etc, and the terms like "list" returned irrelevant items.
Anyway, I can style the text itself with a <span> inside the <li>, but that probably isn't the best way to do it and it doesn't do anything for the spacing.
My efforts at using a <style> tag in the <head> have been ignored by FF and IE so if you guru tyes could show a couple of samples to get me pointed in the right direction...
TIAWhat are you trying to do with your lists?look here :
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/index.htm">http://css.maxdesign.com.au/index.htm</a><!-- m -->
an EXCELLENT site for listsWhat are you trying to do with your lists?
Nothing very fancy, really. Mainly space the items a little farther apart vertically. I'm doing that with <br> between the items now, but to get enough space in IE requires that I put two of them, and that makes too big a separation in FF.
I'd also like to set the items to the left so that the bullets line up with the left edge of the text which constitutes the heading. I've thought about putting the list in a separate <div> and moving the <div> to the left, but that doesn't seem like the most effective way to deal with it.
an EXCELLENT site for lists
It is indeed, and I'm going to bookmark it. It's a little bit of overkill for what I'm working on at the moment, since this is kind of a vanilla site.
Edit: That does show what I'm looking for. A lot more, too, but what I need is in there I believe.
Thanks for inputs, people.Here's something very simple that might help... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a><!-- m --> ">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
background-color:white;
}
h1 {
margin:0;
font-size:1.2em;
}
ul, li {
margin:0;
padding:0;
}
ul {
padding-left:18px;
}
li {
margin-top:3px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</body>
</html>Yes, very much on the right track here. As usual, this is the right place.
Dratted IE, though. This workis perfectly in FF, but there are no bullets in IE:
ul {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
color: #000000;
text-decoration: none
padding: 0;
margin: 0;
}
li {
margin: 10px 0 0 0;
}
So I added (because I couldn't find out what it is for a normal bullet) to the ul spec
list-style-type: circle;
Which changes the FF to a circle, but leaves IE without a bullet.
(What should it be for a regular bullet, by the way?)You need this : ul {
padding-left:18px;
}Hmmm, okay I now have this:
ul { /* select dropdowns */
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
color: #000000;
text-decoration: none
padding-left: 18px;
margin: 0;
}
li {
margin: 5px 0;
}
FF is unchanged, still no bullets in IE with or without the list-style-type.Can I see your page?Hi -
It always helps to set no margin or padding on the ul - control spacing w/ posit. relative or within the li's...I'll sometimes use • and set the list-style-type to none to help if I'm having troubles - or bknd. images via css.
Hope this helps - also included the classic way to use lists...for navigation:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a><!-- m --> ">
<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
width:100%; height:100%; margin:0; padding:0; font-size:100%; text-align:center;
background:silver none; font-family:"helvetica", "arial", sans-serif;
}
h1{
color:white; margin:10px auto;}
ul {
font-size:80%; border:1px solid gray; background:white none;
font-weight: normal; color: #000000; width:40%;
text-decoration: none; margin:0 auto; padding:0;
}
li {
margin:5px auto;
}
li.title{
font-weight:bold; font-size:120%; list-style-type:none;
border-bottom:1px solid #444444; padding:3px;
background:#ececec none; margin:0 auto;
}
li a{
text-decoration:none; border-bottom:1px solid maroon;
}
li a:link, li a:visited{
color:black;
}
li a:focus, li a:hover{
color:maroon;
</style>
</head>
<body>
<h1>da list</h1>
<ul>
<li class="title">Heading</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="go here">List item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="go there">List item 2</a></li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</body>
</html>
Good luck,
ElCan I see your page?
Absolutely: here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/school/news.php">http://www.sonora-sw.com/school/news.php</a><!-- m -->) it is and the style pages are here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/school/topform.css">http://www.sonora-sw.com/school/topform.css</a><!-- m -->) and here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/school/news.css">http://www.sonora-sw.com/school/news.css</a><!-- m -->).
This is a joint effort with another person, so the coding is not all mine -- just the part specific to the list is mine and it is generated by php from a database.Now, I dont know if this has anything to do with the problem with the list, but your page throws up 25 errors. I'd fix them first. It's easier to go forward when you start with good code.Now, I dont know if this has anything to do with the problem with the list, but your page throws up 25 errors. I'd fix them first. It's easier to go forward when you start with good code.
In case that was not clear, go to this link: <!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sonora-sw.com%2Fschool%2Fnews.phpProblem">http://validator.w3.org/check?uri=http% ... phpProblem</a><!-- m --> is, it isn't my page. The school makes the page and I just do the php part of it. That is the list of news items is the table cell set aside for it. (And a popup for creating new news items.) I was hoping the the <div> element containing the list would sort of "insulate" the list from any errors in the overall page.
Do you see anything that might cause IE to omit bullets from lists? Or generically know of any such thing?See if this helps:
edu.html
<TD vAlign=top align=left width=470 id="news">
<h2>Latest Events</h2>
<UL>
<LI>Board Meeting - The Educational Horizons Board of Directors meeting
notices will be posted. The meetings will be held at the corporate
offices located at Indian Harbor Montessori in Indian Harbor Beach. The
public is invited.
<LI>etc.........
<LI>This is a test item on Sunday<
</UL>
</TD>
news.css:
#news UL {
FONT-WEIGHT: normal;
FONT-SIZE: 12px;
MARGIN: 0;
padding-left: 30px;
COLOR: #000000;
FONT-FAMILY: Helvetica, Arial, sans-serif;
LIST-STYLE-TYPE: circle;
TEXT-DECORATION: none;
}
#news LI {
MARGIN: 5px 0px;
LIST-STYLE-TYPE: circle;
}
#news LI A {
FONT-WEIGHT: normal;
FONT-SIZE: 12px;
COLOR: #000000;
FONT-FAMILY: Helvetica, Arial, sans-serif;
TEXT-DECORATION: none;
}
#news h2 {
font-family: "Times New Roman", serif; color: green;
font-size: x-large;
font-weight: normal;
margin-left: 15px;
}What did I say earlier about this being the right place to be? Thanks.
Anyway, I can style the text itself with a <span> inside the <li>, but that probably isn't the best way to do it and it doesn't do anything for the spacing.
My efforts at using a <style> tag in the <head> have been ignored by FF and IE so if you guru tyes could show a couple of samples to get me pointed in the right direction...
TIAWhat are you trying to do with your lists?look here :
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/index.htm">http://css.maxdesign.com.au/index.htm</a><!-- m -->
an EXCELLENT site for listsWhat are you trying to do with your lists?
Nothing very fancy, really. Mainly space the items a little farther apart vertically. I'm doing that with <br> between the items now, but to get enough space in IE requires that I put two of them, and that makes too big a separation in FF.
I'd also like to set the items to the left so that the bullets line up with the left edge of the text which constitutes the heading. I've thought about putting the list in a separate <div> and moving the <div> to the left, but that doesn't seem like the most effective way to deal with it.
an EXCELLENT site for lists
It is indeed, and I'm going to bookmark it. It's a little bit of overkill for what I'm working on at the moment, since this is kind of a vanilla site.
Edit: That does show what I'm looking for. A lot more, too, but what I need is in there I believe.
Thanks for inputs, people.Here's something very simple that might help... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a><!-- m --> ">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
background-color:white;
}
h1 {
margin:0;
font-size:1.2em;
}
ul, li {
margin:0;
padding:0;
}
ul {
padding-left:18px;
}
li {
margin-top:3px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</body>
</html>Yes, very much on the right track here. As usual, this is the right place.
Dratted IE, though. This workis perfectly in FF, but there are no bullets in IE:
ul {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
color: #000000;
text-decoration: none
padding: 0;
margin: 0;
}
li {
margin: 10px 0 0 0;
}
So I added (because I couldn't find out what it is for a normal bullet) to the ul spec
list-style-type: circle;
Which changes the FF to a circle, but leaves IE without a bullet.
(What should it be for a regular bullet, by the way?)You need this : ul {
padding-left:18px;
}Hmmm, okay I now have this:
ul { /* select dropdowns */
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
color: #000000;
text-decoration: none
padding-left: 18px;
margin: 0;
}
li {
margin: 5px 0;
}
FF is unchanged, still no bullets in IE with or without the list-style-type.Can I see your page?Hi -
It always helps to set no margin or padding on the ul - control spacing w/ posit. relative or within the li's...I'll sometimes use • and set the list-style-type to none to help if I'm having troubles - or bknd. images via css.
Hope this helps - also included the classic way to use lists...for navigation:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a><!-- m --> ">
<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
width:100%; height:100%; margin:0; padding:0; font-size:100%; text-align:center;
background:silver none; font-family:"helvetica", "arial", sans-serif;
}
h1{
color:white; margin:10px auto;}
ul {
font-size:80%; border:1px solid gray; background:white none;
font-weight: normal; color: #000000; width:40%;
text-decoration: none; margin:0 auto; padding:0;
}
li {
margin:5px auto;
}
li.title{
font-weight:bold; font-size:120%; list-style-type:none;
border-bottom:1px solid #444444; padding:3px;
background:#ececec none; margin:0 auto;
}
li a{
text-decoration:none; border-bottom:1px solid maroon;
}
li a:link, li a:visited{
color:black;
}
li a:focus, li a:hover{
color:maroon;
</style>
</head>
<body>
<h1>da list</h1>
<ul>
<li class="title">Heading</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="go here">List item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="go there">List item 2</a></li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</body>
</html>
Good luck,
ElCan I see your page?
Absolutely: here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/school/news.php">http://www.sonora-sw.com/school/news.php</a><!-- m -->) it is and the style pages are here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/school/topform.css">http://www.sonora-sw.com/school/topform.css</a><!-- m -->) and here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/school/news.css">http://www.sonora-sw.com/school/news.css</a><!-- m -->).
This is a joint effort with another person, so the coding is not all mine -- just the part specific to the list is mine and it is generated by php from a database.Now, I dont know if this has anything to do with the problem with the list, but your page throws up 25 errors. I'd fix them first. It's easier to go forward when you start with good code.Now, I dont know if this has anything to do with the problem with the list, but your page throws up 25 errors. I'd fix them first. It's easier to go forward when you start with good code.
In case that was not clear, go to this link: <!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sonora-sw.com%2Fschool%2Fnews.phpProblem">http://validator.w3.org/check?uri=http% ... phpProblem</a><!-- m --> is, it isn't my page. The school makes the page and I just do the php part of it. That is the list of news items is the table cell set aside for it. (And a popup for creating new news items.) I was hoping the the <div> element containing the list would sort of "insulate" the list from any errors in the overall page.
Do you see anything that might cause IE to omit bullets from lists? Or generically know of any such thing?See if this helps:
edu.html
<TD vAlign=top align=left width=470 id="news">
<h2>Latest Events</h2>
<UL>
<LI>Board Meeting - The Educational Horizons Board of Directors meeting
notices will be posted. The meetings will be held at the corporate
offices located at Indian Harbor Montessori in Indian Harbor Beach. The
public is invited.
<LI>etc.........
<LI>This is a test item on Sunday<
</UL>
</TD>
news.css:
#news UL {
FONT-WEIGHT: normal;
FONT-SIZE: 12px;
MARGIN: 0;
padding-left: 30px;
COLOR: #000000;
FONT-FAMILY: Helvetica, Arial, sans-serif;
LIST-STYLE-TYPE: circle;
TEXT-DECORATION: none;
}
#news LI {
MARGIN: 5px 0px;
LIST-STYLE-TYPE: circle;
}
#news LI A {
FONT-WEIGHT: normal;
FONT-SIZE: 12px;
COLOR: #000000;
FONT-FAMILY: Helvetica, Arial, sans-serif;
TEXT-DECORATION: none;
}
#news h2 {
font-family: "Times New Roman", serif; color: green;
font-size: x-large;
font-weight: normal;
margin-left: 15px;
}What did I say earlier about this being the right place to be? Thanks.