SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <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:
    Code:
    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!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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)
    Code:
    #content ul li {
        list-style: disc outside none;
        margin-left: 1rem;
        padding-left: 1rem;
        width: 100%;
    }
    From what I can tell, the width:100% is serving no purpose.

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mmmm that are actually the properties from the normal list. This list I was taking about is this one:

    Code:
    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
    #content .gallery li {...}
    !important would not be necessary.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •