Howdy Folks

I was trying to remove the padding of a list. I managed to get it working with the following code:

<style type="text/css">
ul { list-style-type: none; padding: 0px; margin: 0px; margin-top: 15px; }
li { padding-left:0px; }

.nav li { display:block; float: left; margin-right: 5px; width: 15px; height: 15px; }
.nav a { display: block; border: 1px solid #ccc; width:100%; height:100% }
.nav a.activeSlide { background: #369; }
.nav a:focus { outline: none; }
</style>

When I tried to limit the ul and li parts to the class .nav it didn't work any more. Why doesn't it work when I limit it to the class?

example:

<style type="text/css">
.nav ul { list-style-type: none; padding: 0px; margin: 0px; margin-top: 15px; }
.nav li { padding-left:0px; }

.nav li { display:block; float: left; margin-right: 5px; width: 15px; height: 15px; }
.nav a { display: block; border: 1px solid #ccc; width:100%; height:100% }
.nav a.activeSlide { background: #369; }
.nav a:focus { outline: none; }
</style>
  • Can you provide a sample HTML code as well? o.k.w almost 7 years ago

2 answers

2
points

You haven't shown your HTML, but at a rough guess you've written

<ul class="nav">

...when your css uses a descendent selector which only selects lists which are the child of an element with class nav. If this is so, make your first line of stylesheet:

ul.nav {list-style-type:none; padding:0; margin: 15px 0 0 0;}
Answered almost 7 years ago by Richard Grevers
Paul E 0
0
points

That works perfect!

The HTML I am using is indeed: the class in the <li> gets added and removed by a js and is called activeSlide when its added

<ul class="nav">
    <li><a class=" " href="#"></a></li>
    <li><a class="activeSlide" href="#"></a></li>
    <li><a class=" " href="#"></a></li>
    <!-- etc etc -->
</ul>

But as soon as I try to add the two <li> together is doesnt work anymore.

This works fine:

<style type="text/css">
ul.nav { list-style-type: none; padding: 0px; margin: 15px 0 0 0; }
li.nav { padding-left: 0px; }

.nav li { float: left; margin-right: 5px; width: 15px; height: 15px; display:block; }
.nav a { display: block; border: 1px solid #ccc; width:100%; height:100% }
.nav a.activeSlide { background: #369; }
.nav a:focus { outline: none; }
</style>

and when I merge the two <li> it shows a gray block as in the picture below

li.nav { padding-left: 0px;  float: left; margin-right: 5px; width: 15px; height: 15px; display:block; }

alt text

How does this work? I'm getting the feeling that I'm missing something

Answered almost 7 years ago by Paul E
  • You didn't quite understand Richard Grevers's answer. "nav" is the class of "ul". So "li.nav" selects nothing. Use "ul.nav li" to select a "li" that is a child of "ul" with class "nav". Doug almost 7 years ago
  • Aha! yes indeed that's it! Thanks a lot! Paul E almost 7 years ago