Solved

Remove bullets from li items

Posted on 2014-01-17
6
278 Views
Last Modified: 2014-02-02
How do I remove the bullets from the list items of an unordered list?
Below is the code I'm using.

<!DOCTYPE html>
<html lang="en">
      <head>
            <meta charset="utf-8">
            <title>My Page</title>
    <style>
      li{
        line-style: none;
      color: red;
      }
    </style>
      </head>
      <body>
   
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>


      </body>


</html>
0
Comment
Question by:centem
6 Comments
 
LVL 35

Assisted Solution

by:Robert Schutt
Robert Schutt earned 83 total points
ID: 39788753
"list-style" works on ul, not li.
    <style>
      ul{
        list-style: none; /* not line-style */
      }
      li{
      color: red;
      }
    </style>

Open in new window

0
 
LVL 9

Expert Comment

by:WebDevEM
ID: 39788757
Hi,

You are very close with what you have, with the one exception that LINE-STYLE should be LIST-STYLE.  Make that change, and your bullets will go away.  From there, you may want to adjust the padding-left on the UL itself.  Here's a modified version of your code:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>My Page</title>
		<style>
			li {
				color: red;
			}
			ul {
				list-style: none;
				padding-left: 0px;
			}
		</style>
	</head>
	<body>

		<ul>
			<li>
				Item 1
			</li>
			<li>
				Item 2
			</li>
			<li>
				Item 3
			</li>
		</ul>

	</body>

</html>

Open in new window

0
 
LVL 9

Expert Comment

by:WebDevEM
ID: 39788764
... and as Robert pointed out, "list-style" should be on the UL, not the LI.  Some browsers will accept it on the LI, but it's technically not correct.
0
U.S. Department of Agriculture and Acronis Access

With the new era of mobile computing, smartphones and tablets, wireless communications and cloud services, the USDA sought to take advantage of a mobilized workforce and the blurring lines between personal and corporate computing resources.

 

Author Comment

by:centem
ID: 39788911
Thanks for the response. But it does not work without the padding-left. Is this correct or does it work without it for you?
0
 
LVL 9

Assisted Solution

by:WebDevEM
WebDevEM earned 83 total points
ID: 39788923
Without the padding-left, the bullets should still be removed, but the whole list is still in the same position as if there were bullets.  Like this:

          Item 1
          Item 2
          Item 3


There's just a blank space to the left of the items.  Having the padding-left: 0px moves the whole list over so you just get what looks like

Item 1
Item 2
Item 3
0
 
LVL 110

Accepted Solution

by:
Ray Paseur earned 84 total points
ID: 39799998
One of the common problems we all deal with when styling documents is the inconsistency of the "standard" markup that different browsers use.  They all use different standards!  One solution to this is the use of a CSS Reset, that eliminates all of the potentially unwanted  positioning, just giving you an empty palette, so to speak.  Then you can decide what indentation you want, etc.  This page seems to have the collected wisdom:
http://www.cssreset.com/
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
displaying 3 dropdownlist  horizontally 3 31
I'm a Human captcha checkbox 13 39
Accordion won't close correctly 5 12
sed/awk/tail: how to read 3'de last line 4 38
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question