Solved

Remove bullets from li items

Posted on 2014-01-17
6
279 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Back Up Your Microsoft Windows Server®

Back up all your Microsoft Windows Server – on-premises, in remote locations, in private and hybrid clouds. Your entire Windows Server will be backed up in one easy step with patented, block-level disk imaging. We achieve RTOs (recovery time objectives) as low as 15 seconds.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Find out what you should include to make the best professional email signature for your organization.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

752 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