CODEWITHSUNDEEP
csshtmljsfiddle
Nik Terentyev
Nik Terentyev

Reputation: 2310

jsfiddle width miscalculation?

problem: have a photo-gallery with css:

ul.photo-grid { 
  margin: 0px 0px 0px -10px;
  padding: 0px;
  min-width: 840px;
}

ul.photo-grid > li.photo {
  display: inline-block; 
  width: 25%; 
  min-width: 210px;
  text-align: center;
  padding-left: 10px;
  margin: 0px 0px 10px 0px;

  vertical-align: baseline !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

with html like this:

<ul class="photo-grid">
   <li class="photo">
      <a href="#" class="photo-link">
        <img src="img/150x200.jpg" class="photo-img"/>
        <span class="photo-title">a girl</span>
      </a>
  </li>...

interestingly works fine in chrome, firefox, opera, ie: shows 4 perfect columns, but it doesn't in jsfiddle(shows 3 columns)! Any clues why it can happen?

Upvotes: 0

Views: 94

Answers (1)

abir_maiti
abir_maiti

Reputation: 490

Do not give any space between <li>. As you added the rule display:inline-block. That give a little space between two <li>. Write like this.

<ul class="photo-grid">
   <li class="photo">
      <a href="#" class="photo-link">
        <img src="http://tracy.titanserver2.com/tph/getPhoto.php?uid=5358029&num=1&type=3" width="150" class="photo-img"/>
        <span class="photo-title">a girl</span>
      </a>
  </li
    ><li class="photo">
      <a href="#" class="photo-link">
        <img src="http://tracy.titanserver2.com/tph/getPhoto.php?uid=5358029&num=1&type=3" width="150" class="photo-img"/>
        <span class="photo-title">a girl</span>
      </a>
  </li
    ><li class="photo">
      <a href="#" class="photo-link">
        <img src="http://tracy.titanserver2.com/tph/getPhoto.php?uid=5358029&num=1&type=3" width="150" class="photo-img"/>
        <span class="photo-title">a girl</span>
      </a>
  </li
    ><li class="photo">
      <a href="#" class="photo-link">
        <img src="http://tracy.titanserver2.com/tph/getPhoto.php?uid=5358029&num=1&type=3" width="150" class="photo-img"/>
        <span class="photo-title">a girl</span>
      </a>
  </li>
    </ul>

Please check this fiddle or your fiddle modified. Look the html and css.

Upvotes: 1

Related Questions