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
Solved

Remove bullets from li items

Posted on 2014-01-17
6
277 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
Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

 

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 109

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

The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Index on a Table 6 25
LogmeIn using Linux Ubuntu 16.04 6 63
Insert Button on a table 16 37
Migrating a Linux server to VMware 3 55
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

856 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