Solved

Remove bullets from li items

Posted on 2014-01-17
6
275 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
Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

 

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 108

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

Ransomware-A Revenue Bonanza for Service Providers

Ransomware – malware that gets on your customers’ computers, encrypts their data, and extorts a hefty ransom for the decryption keys – is a surging new threat.  The purpose of this eBook is to educate the reader about ransomware attacks.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…

896 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now