Skip to main content
F
farisb
Participant
June 7, 2017
Answered

Problem styling ul tag

  • June 7, 2017
  • 2 replies
  • 332 views

i'm trying to style a ul tag to make a navigation bar and i cant seem to be able to remove the bullet points with my CSS file, I can only remove them by styling the ul inline or in the same .php file in the <style></style> tags. tried styling it by adding a class and an ID and neither seem to be working. The problem isn't referencing the css file because the same css file is used to style buttons and other elements in the .php file.

here's my code:

PHP:

<body>

.

.

     <ul class="navbar">

          <li> <a href= "homepage.php">Home</a></li>

     </ul>

.

.

</body>

CSS:

ul.navbar {

     display: inline;

     list-style-type: none;

     padding: 0;

     margin: 0;

}

This topic has been closed for replies.
Correct answer osgood_

farisb  wrote

i'm trying to style a ul tag to make a navigation bar and i cant seem to be able to remove the bullet points with my CSS file, I can only remove them by styling the ul inline or in the same .php file in the <style></style> tags. tried styling it by adding a class and an ID and neither seem to be working. The problem isn't referencing the css file because the same css file is used to style buttons and other elements in the .php file.

here's my code:

PHP:

<body>

.

.

     <ul class="navbar">

          <li> <a href= "homepage.php">Home</a></li>

     </ul>

.

.

</body>

CSS:

ul.navbar {

     display: inline;

     list-style-type: none;

     padding: 0;

     margin: 0;

}

try:

.navbar li {

list-style: none;

padding: 0;

margin: 0;

}

2 replies

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
June 7, 2017

Setting list-style-type to none is the correct way to remove the bullets from a list.

The list-style property is the shorthand for controlling all of the list properties, and will also work to get rid of the bullets when set to none.

If you don't have any structural errors in your css (check at the validator below)...

The W3C CSS Validation Service

...my guess would be that you have something else later in your css that is conflicting with the list-style-type property you've set.

O
osgood_Correct answer
Legend
June 7, 2017

farisb  wrote

i'm trying to style a ul tag to make a navigation bar and i cant seem to be able to remove the bullet points with my CSS file, I can only remove them by styling the ul inline or in the same .php file in the <style></style> tags. tried styling it by adding a class and an ID and neither seem to be working. The problem isn't referencing the css file because the same css file is used to style buttons and other elements in the .php file.

here's my code:

PHP:

<body>

.

.

     <ul class="navbar">

          <li> <a href= "homepage.php">Home</a></li>

     </ul>

.

.

</body>

CSS:

ul.navbar {

     display: inline;

     list-style-type: none;

     padding: 0;

     margin: 0;

}

try:

.navbar li {

list-style: none;

padding: 0;

margin: 0;

}

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices