<ul> width 100% <li> 25% again not working

I have asked this question before, and it was solved with the help of Paul O’B but I am facing the same problem again. I have a image gallery which you can see here. I am using the exact same CSS as last time:


ul.gallery{
 width: 100%;
 margin: 0;
 padding: 0;
 float: left;
 clear: both; 
 list-style: none !important; 
}

ul.gallery li {
 width: 25% !important;
 margin: 0;
 padding: 0;
 margin-top: 1rem !important;
 float: left;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 text-align: center;
 list-style: none !important;
}

ul.gallery li a {
  width: 100%;
  display: block;
  overflow: hidden;
  outline: none;
}

ul.gallery li img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
  -webkit-transition: all 2s ease-out;
  transition: all 2s ease-out;
}

#aspect a {
  position: relative;
  height: 0;
  padding-top: 56.25%;
}

#aspect img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 1px;
}

As you can see is has the <li> a width of 25% but it acts like it is set to 33%. When I change it to 20% it acts like it is set to 25% etc. I am looking at it for quite some time but I don’t see what I am doing wrong? Hope anyone arround see what I am doing wrong.

Thank you all!

According to Firebug, your list items have the following margin-left and padding-left applied which is added to the percentage value you’ve assigned. Comment out those padding-left and margin-left properties and the list items will fit as desired.

cssDefault.css (line 353)


#content ul li {
    list-style: disc outside none;
    [color=red]margin-left: 1rem;
    padding-left: 1rem;[/color]
    width: 100%;
}

From what I can tell, the width:100% is serving no purpose.

Mmmm that are actually the properties from the normal list. This list I was taking about is this one:


ul.gallery li {
 width: 25% !important;
 margin: 0;
 padding: 0;
 margin-top: 1rem !important;
 float: left;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 text-align: center;
 list-style: none !important;
}

I have added !important to the margin and padding properties and now it is working. Thanks a lot Ron

The selector for those properties that I pointed out begins with an ID, Content.

The <li> is inside Content but is addressed only by ul.gallery; therefore, it is less specific than Content. The styles assigned to Content trump those assigned to ul.gallery li. It’s a specificity issue, IDs outweigh classes, and !important is indeed the quick fix. :slight_smile:

The better fix would be to address the <li> like this:


#content .gallery li {...}

!important would not be necessary.

1 Like