• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 935
  • Last Modified:

Need UL CSS Style

I'm building a blog in WordPress, and I need a style for an unordered list that will:

>  have square bullets
>  no blank line between first list item
>  no blank lines between list items
>  indented list items

Any help with this would be appreciated.

Thanks!
0
codequest
Asked:
codequest
  • 2
1 Solution
 
Mark StegglesWeb DeveloperCommented:
Try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
ul {
list-style-type:square;
list-style-position:outside;
margin:0;
padding:0;
}
ul li {
margin-left:20px;
}
</style>
</head>
<body>
<ul><li>list item 1</li><li>list item 2</li></ul>
</body>
</html>
0
 
codequestAuthor Commented:
Thanks for input.  I modified that to this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
.postlist ul {
list-style-position:outside;
margin:0;
padding:0;
}

.postlist li {
list-style-type:square;
margin-left:20px;
}
</style>
</head>
<body>
some header
<ul class="postlist"><li>list item 1</li><li>list item 2</li></ul>
</body>
</html>

That works except for removing the space between the line before the bulleted list and the first line of the bulleted list.  Any other thoughts on that last bit?
0
 
Mark StegglesWeb DeveloperCommented:
Your css is wrong...

.postlist ul {
list-style-position:outside;
margin:0;
padding:0;
}

is not styling anything... that declaration is looking for a ul inside an element with a class of postlist. It should be:

ul.postlist {
list-style-position:outside;
margin:0;
padding:0;
}



The space before the bulleted list? we have removed all margin and padding from the ul... add:

* {padding:0;margin:0;}

to the styles aswell
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now