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:
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.
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.
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.
The better fix would be to address the <li> like this: