CSS border problem

Question

devianleong 0 Newbie Poster

10 Years Ago

My product list picture unable to make it smaller and the boxes are not align properly. Please help me to fix it. I'm trying for few hours already still got no idea. I've a global image class and the attribute is max-width 100% and max-height 100%

Please look at the attachment to see the problem. b483eb001d89cf9535470875d9411a16

This is my html:

 <div class="product-box grid_3">
              <span class="ribbon-sale"></span>
              <a class="img-cover" href="product-sidebar.html">
                <img src="images/images/watch-grid.jpg" alt="product-image">
              </a>
              <div class="product-meta">
                <div class="title"><a href="#">Product Name</a></div>
                <img src="images/stars-5.png" alt="5-stars-ratting">
                <div class="price">
                  <span class="old-price">$589.50</span>
                  <span class="new-price">$250.50</span>                      
                </div>
              </div><!-- product-meta -->
              <ul class="product-action">
                <li>
                  <div class="tooltip-wrapper">
                    <span class="tooltip">Compare</span>
                  </div>
                  <a href="#" class="icomoon" aria-hidden="true" data-icon="&#xe01c;"></a>                    
                </li>
                <li>
                  <div class="tooltip-wrapper">
                    <span class="tooltip">Wishlist</span>
                  </div>
                  <a href="#" class="icomoon" aria-hidden="true" data-icon="&#xe00d;"></a>
                </li>
                <li>
                  <div class="tooltip-wrapper">
                    <span class="tooltip">Add To Cart</span>
                  </div>
                  <a href="#" class="icomoon" aria-hidden="true" data-icon="&#x25e0;"></a>                    
                </li>
              </ul>
            </div><!-- .product-box -->

This is my CSS:

.module .product-box,
.product-grid .product-box,
.related-products .product-box {
  position: relative;
  background: white;
  border: 1px solid #dfdfdf;
  width:220px;
  height:295px;
  border-bottom-color: #a7a7a7;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.module .product-box .product-meta,
.product-grid .product-box .product-meta,
.related-products .product-box .product-meta {

  text-align: center;
  border-bottom: 1px solid #dfdfdf;
}
.module .product-box .product-meta .title,
.product-grid .product-box .product-meta .title,
.related-products .product-box .product-meta .title {
  font-family: "Muli";
  text-transform: uppercase;
  font-size: 14px;
  color: 535353;
}
.module .product-box .product-meta .price,
.product-grid .product-box .product-meta .price,
.related-products .product-box .product-meta .price {
  padding: 10px 0;
}
.module .product-box .product-meta .price .reguler-price,
.product-grid .product-box .product-meta .price .reguler-price,
.related-products .product-box .product-meta .price .reguler-price,
.module .product-box .product-meta .price .new-price,
.product-grid .product-box .product-meta .price .new-price,
.related-products .product-box .product-meta .price .new-price,
.module .product-box .product-meta .price .old-price,
.product-grid .product-box .product-meta .price .old-price,
.related-products .product-box .product-meta .price .old-price {
  font-family: "Muli";
  color: 535353;
}
.module .product-box .product-meta .price .reguler-price,
.product-grid .product-box .product-meta .price .reguler-price,
.related-products .product-box .product-meta .price .reguler-price,
.module .product-box .product-meta .price .new-price,
.product-grid .product-box .product-meta .price .new-price,
.related-products .product-box .product-meta .price .new-price {
  font-size: 16px;
}
.module .product-box .product-meta .price .old-price,
.product-grid .product-box .product-meta .price .old-price,
.related-products .product-box .product-meta .price .old-price {
  position: relative;
  font-size: 13px;
  display: inline-block;
  margin-right: 5px;
}
.module .product-box .product-meta .price .old-price:after,
.product-grid .product-box .product-meta .price .old-price:after,
.related-products .product-box .product-meta .price .old-price:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  top: 10px;
  left: 0;
}
.module .product-box .product-meta .product-desc,
.product-grid .product-box .product-meta .product-desc,
.related-products .product-box .product-meta .product-desc {
  padding: 6px;
  text-align: left;
  border-top: 1px solid #dfdfdf;
}
.module .product-box .product-action,
.product-grid .product-box .product-action,
.related-products .product-box .product-action {
  background: white;
  background: -moz-linear-gradient(top, white 0%, #ededed 100%, #ededed 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(90%, white), color-stop(100%, #ededed), color-stop(100%, #ededed));
  background: -webkit-linear-gradient(top, white 0%, #ededed 100%, #ededed 100%);
  background: -o-linear-gradient(top, white 0%, #ededed 100%, #ededed 100%);
  background: -ms-linear-gradient(top, white 0%, #ededed 100%, #ededed 100%);
  background: linear-gradient(to bottom, white 0%, #ededed 100%, #ededed 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
}
.module .product-box .product-action li,
.product-grid .product-box .product-action li,
.related-products .product-box .product-action li {
  position: relative;
  display: inline-block;
  width: 33.33%;
  text-align: center;
  margin-right: -4px;
}
.module .product-box .product-action li a,
.product-grid .product-box .product-action li a,
.related-products .product-box .product-action li a {
  display: block;
  padding: 18px 10px;
  font-size: 22px;
  color: #232323;
  border-right: 1px solid #dfdfdf;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.module .product-box .product-action li:last-child .tooltip-wrapper,
.product-grid .product-box .product-action li:last-child .tooltip-wrapper,
.related-products .product-box .product-action li:last-child .tooltip-wrapper {
  left: -8px;
}
.module .product-box .product-action li:last-child a,
.product-grid .product-box .product-action li:last-child a,
.related-products .product-box .product-action li:last-child a {
  border-right: none;
}
.module .product-box .product-action li:hover .tooltip-wrapper,
.product-grid .product-box .product-action li:hover .tooltip-wrapper,
.related-products .product-box .product-action li:hover .tooltip-wrapper {
  top: -40px;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@opacity_2)";
  filter: alpha(opacity=90);
  visibility: visible;
}
.module .product-box .ribbon-new,
.product-grid .product-box .ribbon-new,
.related-products .product-box .ribbon-new {
  position: absolute;
  top: -3px;
  left: -3px;
  background: url("../images/ribbon-new.png") no-repeat transparent;
  width: 81px;
  height: 81px;
}
.module .product-box .ribbon-sale,
.product-grid .product-box .ribbon-sale,
.related-products .product-box .ribbon-sale {
  position: absolute;
  top: -3px;
  right: -3px;
  background: url("../images/ribbon-sale.png") no-repeat transparent;
  width: 81px;
  height: 81px;
}
.product-grid,
.product-list {
  margin-bottom: 20px;
}
.product-grid .product-box,
.product-list .product-box {
  margin-bottom: 30px;
}
.product-list .product-box {
  position: relative;
  background: white;
  border: 1px solid #dfdfdf;
  border-bottom-color: #a7a7a7;
  margin-bottom: 30px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.product-list .product-box .img-cover {
  min-height: 50px;
  border-right: 1px solid #dfdfdf;
  line-height: 0;
  position: relative;
}
.product-list .product-box .product-content,
.product-list .product-box .product-price {
  padding: 10px 10px 10px 0;
}
.product-list .product-box .title,
.product-list .product-box .price {
  font-family: 'Muli';
}
.product-list .product-box .product-content {
  position: relative;
  border-right: 1px solid #dfdfdf;
  min-height: 208px;
}
.product-list .product-box .product-content .title a {
  font-size: 21px;
  color: #202020;
}
.product-list .product-box .product-price {
  position: relative;
  min-height: 208px;
  text-align: center;
  float: left;
}
.product-list .product-box .product-price .price {
  margin-top: 40px;
}
.product-list .product-box .product-price .price .reguler-price,
.product-list .product-box .product-price .price .new-price {
  font-size: 23px;
}
.product-list .product-box .product-price .price .reguler-price,
.product-list .product-box .product-price .price .new-price,
.product-list .product-box .product-price .price .old-price {
  display: block;
  color: #535353;
}
.product-list .product-box .product-price .price .old-price {
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  /* Fix for IE7 */
  *display: inline;
  position: relative;
  font-size: 18px;
  margin-right: 5px;
}
.product-list .product-box .product-price .price .old-price:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  top: 10px;
  left: 0;
}
.product-list .product-box .product-action {
  display: inline-block;
  position: absolute;
  left: -22px;
  width: 108%;
  bottom: 0;
  border-top: 1px solid #dfdfdf;
}
.product-list .product-box .product-action i {
  font-size: 20px;
  color: #232323;
  padding: 0 15px;
  vertical-align: middle;
}
.product-list .product-box .product-action a {
  font-size: 13px;
}
.product-list .product-box .product-action div {
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  /* Fix for IE7 */
  *display: inline;
  width: 49%;
  padding: 8px 0;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.product-list .product-box .addtoCart-list {
  border-top: 1px solid #dfdfdf;
  position: absolute;
  left: 0;
  width: 113%;
  bottom: 0;
  padding: 8px 0;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.product-list .product-box .addtoCart-list i {
  font-size: 21px;
  color: #232323;
  padding: 0 15px;
  vertical-align: middle;
}
.product-list .product-box .addtoCart-list a {
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  /* Fix for IE7 */
  *display: inline;
  font-size: 14px;
}
.product-list .product-box .ribbon-new {
  position: absolute;
  top: -3px;
  left: -3px;
  background: url("../images/ribbon-new.png") no-repeat transparent;
  width: 81px;
  height: 81px;
}
.product-list .product-box .ribbon-special {
  position: absolute;
  top: -3px;
  left: -3px;
  background: url("../images/ribbon-special.png") no-repeat transparent;
  width: 81px;
  height: 81px;
}
.product-list .product-box .ribbon-limited {
  position: absolute;
  top: -3px;
  left: -3px;
  background: url("../images/ribbon-limited.png") no-repeat transparent;
  width: 81px;
  height: 81px;
}
.product-list .product-box .ribbon-discount {
  position: absolute;
  top: -3px;
  left: -3px;
  background: url("../images/ribbon-discount.png") no-repeat transparent;
  width: 81px;
  height: 81px;
}
.product-list .product-box .ribbon-sale {
  position: absolute;
  top: -3px;
  right: -3px;
  background: url("../images/ribbon-sale.png") no-repeat transparent;
  width: 81px;
  height: 81px;
}

web-design

Edited 10 Years Ago by devianleong

2 Contributors
1 Reply
147 Views
3 Days Discussion Span
Latest Post 10 Years Ago Latest Post by stbuchok

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

stbuchok · Answer 1 · 2013-08-13T15:15:04+00:00

Are you saying the buttons should be at the bottom? Can you please explain what exactly is wrong. Can you change the image you've attached so that it shows how you would like it to look (please keep the original one attached still for comparison)?