Hello!
I am fairly new to CSS and muddling my way along. There is a problem that I have not been able to figure out; my unordered lists will NOT display with bullets of any type. I have tried a ton of variations. One of my first thoughts was that the CSS menu I am using might be messing is up, so I created a span class (.class1) to put the tags into, but that didn't help. I would sure appreciate some suggestions! I don't really want to create a special clas for my lists, because I am transferring a site with a lot of content from purely HTMl to css, and I don't want to have to edit every single list; I would like to just cut and paste the current HTML.
Here is the CSS I am using right now:
.class1 A:link {Color:#DEB887; text-decoration: none}
.class1 A:visited {Color:#F4A460; text-decoration: none}
.class1 A:active {Color:#F4A460; text-decoration: none}
.class1 A:hover {Color:#00FF7F; background:#000000; text-decoration: none}
.class1 ul
{
list-style-type: disc
}
This is the CSS for the menu I think might be interfering with it:
<!--
body {
margin: 0;
padding: 0;
background: #000000;
font: 80% arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative; /* Menu position that can be changed at will */
top: 0;
left: 0;
}
#menu {
width: 12em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
border: 0px solid gray;
background: #000000;
color: #DEB887;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #000000;
}
#menu li a, #menu dt a {
color: #FEF8D6;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
color: #00FF7F;
background: #003020;
}
a {text-decoration: none;
color: #FEF8D6;
color: #222;
}
This is the HTML from a sample list that is not working:
<ul>
<li>Provides a ample, nutritious diet suitable to the species</li>
<li>Provides ample housing for the cat to live in happily</li>
<li>Provides shelter and protection from the elements</li>
<li>Provides veterinary care as needed</li>
<li>Purchases animals from an ethical and responsible breeder</li>
<li>Does not neglect or abuse the animal</li>
<li>Provides generally pleasant living conditions and has the cat's feelings and best interests in mind</li>
<li>Makes a good-faith effort to comply with all applicable laws</li>
<li>Takes stringent precautions to prevent the escape of the cat</li>
<li>Protects the cat from unauthorized contact or harrassment from members of the public</li>
<li>Protects the safety of the public and visitors </li>
<li>Makes a lifetime committment to caring for the cat</li>
</ul>
Here is a link to a page with non-functioning lists:
<!-- m --><a class="postlink" href="http://www.exoticcatz.com/first.htmlOUCH">http://www.exoticcatz.com/first.htmlOUCH</a><!-- m --> 146 errors (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.exoticcatz.com%2Ffirst.html">http://validator.w3.org/check?uri=http% ... first.html</a><!-- m -->) can I ask why the content is in a span, when a span is an inline element and a div is a block element. Try fixing all these errors first, then return.can I ask why the content is in a span, when a span is an inline element and a div is a block element.
Because I don't know what I'm doing
I originally set it up this way because I would like to be able to define different link properties for the main content area (since the background color is different from the rest of the site), and the way the websites I looked at said to do it was to set up the span class that way for the area I wanted the different link properties to appear in.
I wish I had time right now to go through and validate the html, but it's not my top priority at the moment with all the other issues I'm trying to fix.Remove ul {margin:0;}, although there are many errors in the css which will affect the menu
Fix the errors in the html and css before you go any further.Where are you seeing the ul margin?? This was one of the unsuccessful options I tried, but the only settings I have now are:
{
list-style-type: disc
}
What other errors are you seeing in the CSS? I actually just validated it with no errors. The HTML is another matter I knowdl, dt, dd, ul, li {
margin: 0; /* remove from ul */
padding: 0;
list-style-type: none; /* ???? */
}
.fake.box-clear
Error: Only one class is allowed per simple selector.
html>body
Error: Selectors may contain only the characters A-Z, a-z, 0-9, Unicode 161-255, hyphens, or escaped Unicode characters as numeric codes.
head:first-child+body
Error: Unrecognized pseudo-element or pseudo-class first-child+body.
.column_padding_after
Error: Classes may contain only the characters A-Z, a-z, 0-9, Unicode 161-255, hyphens, or escaped Unicode characters as numeric codes.
p\osition: relative
Error: Property p\osition not recognized.
</style>
Error: Illegal statement.
Also remove "<!-- "
a {text-decoration: none;
color: #FEF8D6;
color: #222; /* which color? */
}
Using IE hacks can have serious repercussions (<!-- m --><a class="postlink" href="http://www.quirksmode.org/blog/archives/2005/09/css_hacks_are_s_1.html">http://www.quirksmode.org/blog/archives ... e_s_1.html</a><!-- m -->) when IE7 is released.Thanks for the help! I made several of these changes, but now the menu is messed up (even more than it was
) even as the other list indents 
This is useful in one way in that it shows me that tthe styling of the menu was indeed responsible for the ul problem, but it confirms that I need to somehow have different styles for the menu vs. the rest of the site.
Do you have any suggestions for that which wouldn't require changing the html for every list on the site? The menu html is a php include, is there a way I could make a certain class and apply it to the menu only?I'm going to change the css back so that the menu isn't so messed up over the day while I'm sleeping. A screen shot of what it looked like after the changes is attached.Start any style for the menu with #menu
i.e #menu ul {}
Any style applied to lists must come before the style applied to the menu.Here is my current css, still not working (menu alignment is okay, but other uls on page not bulleted or indented):
.class1 A:link {Color:#DEB887; text-decoration: none}
.class1 A:visited {Color:#F4A460; text-decoration: none}
.class1 A:active {Color:#F4A460; text-decoration: none}
.class1 A:hover {Color:#00FF7F; background:#000000; text-decoration: none}
.class1 ul { list-style-type: disc }
ul { list-style-type: disc }
#menu dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative; /* Menu position that can be changed at will */
top: 0;
left: 0;
}
#menu {
width: 12em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
border: 0px solid gray;
background: #000000;
color: #DEB887;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #000000;
}
#menu li a, #menu dt a {
color: #FEF8D6;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
color: #00FF7F;
background: #003020;
}
a {text-decoration: none;
color: #FEF8D6;
}
I was looking at the html validator a bit, and wondering if I should just hire someone on rentacoder to fix things up for me. Do you think there is a realistic possibility that something odd within the html that has nothing to do with the lists could be responsible for messing this up?This prevents other lists from having bullets:#menu dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
Also the menu is broken in FFMenu is broken in IE too That'll be my next project.
Do you know of any way to make the code snippet you highlighted affect only the list styling for the menu so that I can have bulleted lists elsewhere?#menu dl, #menu dt, #menu dd, #menu ul, #menu li {
margin: 0;
padding: 0;
list-style-type: none;
}Thank you, thank you, thank you! You are a godsend! It's working
Thanks so much for your patience with a newbie
I am fairly new to CSS and muddling my way along. There is a problem that I have not been able to figure out; my unordered lists will NOT display with bullets of any type. I have tried a ton of variations. One of my first thoughts was that the CSS menu I am using might be messing is up, so I created a span class (.class1) to put the tags into, but that didn't help. I would sure appreciate some suggestions! I don't really want to create a special clas for my lists, because I am transferring a site with a lot of content from purely HTMl to css, and I don't want to have to edit every single list; I would like to just cut and paste the current HTML.
Here is the CSS I am using right now:
.class1 A:link {Color:#DEB887; text-decoration: none}
.class1 A:visited {Color:#F4A460; text-decoration: none}
.class1 A:active {Color:#F4A460; text-decoration: none}
.class1 A:hover {Color:#00FF7F; background:#000000; text-decoration: none}
.class1 ul
{
list-style-type: disc
}
This is the CSS for the menu I think might be interfering with it:
<!--
body {
margin: 0;
padding: 0;
background: #000000;
font: 80% arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative; /* Menu position that can be changed at will */
top: 0;
left: 0;
}
#menu {
width: 12em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
border: 0px solid gray;
background: #000000;
color: #DEB887;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #000000;
}
#menu li a, #menu dt a {
color: #FEF8D6;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
color: #00FF7F;
background: #003020;
}
a {text-decoration: none;
color: #FEF8D6;
color: #222;
}
This is the HTML from a sample list that is not working:
<ul>
<li>Provides a ample, nutritious diet suitable to the species</li>
<li>Provides ample housing for the cat to live in happily</li>
<li>Provides shelter and protection from the elements</li>
<li>Provides veterinary care as needed</li>
<li>Purchases animals from an ethical and responsible breeder</li>
<li>Does not neglect or abuse the animal</li>
<li>Provides generally pleasant living conditions and has the cat's feelings and best interests in mind</li>
<li>Makes a good-faith effort to comply with all applicable laws</li>
<li>Takes stringent precautions to prevent the escape of the cat</li>
<li>Protects the cat from unauthorized contact or harrassment from members of the public</li>
<li>Protects the safety of the public and visitors </li>
<li>Makes a lifetime committment to caring for the cat</li>
</ul>
Here is a link to a page with non-functioning lists:
<!-- m --><a class="postlink" href="http://www.exoticcatz.com/first.htmlOUCH">http://www.exoticcatz.com/first.htmlOUCH</a><!-- m --> 146 errors (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.exoticcatz.com%2Ffirst.html">http://validator.w3.org/check?uri=http% ... first.html</a><!-- m -->) can I ask why the content is in a span, when a span is an inline element and a div is a block element. Try fixing all these errors first, then return.can I ask why the content is in a span, when a span is an inline element and a div is a block element.
Because I don't know what I'm doing
I originally set it up this way because I would like to be able to define different link properties for the main content area (since the background color is different from the rest of the site), and the way the websites I looked at said to do it was to set up the span class that way for the area I wanted the different link properties to appear in.
I wish I had time right now to go through and validate the html, but it's not my top priority at the moment with all the other issues I'm trying to fix.Remove ul {margin:0;}, although there are many errors in the css which will affect the menu
Fix the errors in the html and css before you go any further.Where are you seeing the ul margin?? This was one of the unsuccessful options I tried, but the only settings I have now are:
{
list-style-type: disc
}
What other errors are you seeing in the CSS? I actually just validated it with no errors. The HTML is another matter I know
dl, dt, dd, ul, li {margin: 0; /* remove from ul */
padding: 0;
list-style-type: none; /* ???? */
}
.fake.box-clear
Error: Only one class is allowed per simple selector.
html>body
Error: Selectors may contain only the characters A-Z, a-z, 0-9, Unicode 161-255, hyphens, or escaped Unicode characters as numeric codes.
head:first-child+body
Error: Unrecognized pseudo-element or pseudo-class first-child+body.
.column_padding_after
Error: Classes may contain only the characters A-Z, a-z, 0-9, Unicode 161-255, hyphens, or escaped Unicode characters as numeric codes.
p\osition: relative
Error: Property p\osition not recognized.
</style>
Error: Illegal statement.
Also remove "<!-- "
a {text-decoration: none;
color: #FEF8D6;
color: #222; /* which color? */
}
Using IE hacks can have serious repercussions (<!-- m --><a class="postlink" href="http://www.quirksmode.org/blog/archives/2005/09/css_hacks_are_s_1.html">http://www.quirksmode.org/blog/archives ... e_s_1.html</a><!-- m -->) when IE7 is released.Thanks for the help! I made several of these changes, but now the menu is messed up (even more than it was
) even as the other list indents This is useful in one way in that it shows me that tthe styling of the menu was indeed responsible for the ul problem, but it confirms that I need to somehow have different styles for the menu vs. the rest of the site.
Do you have any suggestions for that which wouldn't require changing the html for every list on the site? The menu html is a php include, is there a way I could make a certain class and apply it to the menu only?I'm going to change the css back so that the menu isn't so messed up over the day while I'm sleeping. A screen shot of what it looked like after the changes is attached.Start any style for the menu with #menu
i.e #menu ul {}
Any style applied to lists must come before the style applied to the menu.Here is my current css, still not working (menu alignment is okay, but other uls on page not bulleted or indented):
.class1 A:link {Color:#DEB887; text-decoration: none}
.class1 A:visited {Color:#F4A460; text-decoration: none}
.class1 A:active {Color:#F4A460; text-decoration: none}
.class1 A:hover {Color:#00FF7F; background:#000000; text-decoration: none}
.class1 ul { list-style-type: disc }
ul { list-style-type: disc }
#menu dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative; /* Menu position that can be changed at will */
top: 0;
left: 0;
}
#menu {
width: 12em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
border: 0px solid gray;
background: #000000;
color: #DEB887;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #000000;
}
#menu li a, #menu dt a {
color: #FEF8D6;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
color: #00FF7F;
background: #003020;
}
a {text-decoration: none;
color: #FEF8D6;
}
I was looking at the html validator a bit, and wondering if I should just hire someone on rentacoder to fix things up for me. Do you think there is a realistic possibility that something odd within the html that has nothing to do with the lists could be responsible for messing this up?This prevents other lists from having bullets:#menu dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
Also the menu is broken in FFMenu is broken in IE too
That'll be my next project.Do you know of any way to make the code snippet you highlighted affect only the list styling for the menu so that I can have bulleted lists elsewhere?#menu dl, #menu dt, #menu dd, #menu ul, #menu li {
margin: 0;
padding: 0;
list-style-type: none;
}Thank you, thank you, thank you! You are a godsend! It's working
Thanks so much for your patience with a newbie