Jump to content
justinbenfaida

Style Sheet Broken Displaying Inline Boxes

Recommended Posts

New to this, so pardon my verbal mistakes. Site Currently Being Worked On The problem is, is that all the products are in great placement, until you reach the 4th row down, where the style breaks and the hats on the bottom do "their own thing". I can't find anywhere in the break that would show this...

/*============= Begin Products Grid Styles========================*/#products {background:none;display:inline;float:left;margin:0px;width:995px;}#products div.product {  border: 0 none;  display: block;  float: middle;  height: 200px;  margin-bottom: 20px;  margin-right: 20px;  width: 171px;}#products div.product p {margin-bottom:5;}#products .product-img {  border: 1px solid #bbbbbb;  display: inline;  height: 170px;  float: middle;  vertical-align: middle;  width: 169px;}#products .product-info {border-top:2px solid #fff;float:middle;padding:5px 9px 11px;width:157px;}html #products .product-info {width:157px;}#products .product-a h3, #products .product-a p {  color: #FFFFFF;  text-align: middle;}#products .product-title {  background: none repeat scroll 0 0 #000000;  font-size: 10px;  line-height: 16px;  margin-top: 5px;  margin-bottom: 5px;  padding: 3px 0;  position: relative;  text-transform: normal;  vertical-align: middle;}#products .product-title span {padding-left: 10px;padding-right: 10px;}#products .product-price {background:none repeat scroll 0 0 #000000;float:right;font-size:11px;font-weight:700;margin-left:176px;margin-right:0;margin-top:-25px;padding:5px;position:relative;}#products .product-status {font-size:10px;font-style:italic;}#products .product-a {clear:left;cursor:pointer;display:block;float:center;overflow:hidden;text-align:center;width:100%;}#products .product-a h3,#products .product-a p {color:#ffffff;font-weight:normal;text-align:center;}.pagination {background:none repeat scroll 0 0 #fffff;clear:both;float:middle;font-size:12px;font-weight:normal;margin-bottom:20px;margin-left:5px;margin-right:5px;padding:5px 0;text-align:center;}.pagination span,.pagination a {padding:0 3px 0 6px;}.pagination span.yadda {background:none;padding:5px 4px;}span.stilt {display:inline-block;vertical-align:middle;}.current-product-counter {display:none;}

What could the issue be?

Share this post


Link to post
Share on other sites

Note the code at the bottom of the base:

* {font-family:Verdana, Arial, Helvetica, sans-serif;margin:0;padding:0;}body {{% if theme.background_image != blank %}  background-image: url({{ theme.background_image.url }});  background-repeat: repeat;  background-attachment: fixed;{% endif %}background-color:#FFFFFF;color:#00000;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;font-weight:normal;margin:0;text-align:center;}ul,ol {margin-bottom:1em;}li {list-style:none;}h2 {font-size:13px;font-weight:normal;margin-bottom:1em;text-transform:uppercase;}p {color:#00000;font-size:11px;line-height:15px;margin-bottom:1em;}a {outline:none;text-decoration:none;}a img {border:none;}a:hover,a:active,#products .product-a:hover h3,#products .product-a:hover p {color:#91a3b0;}#products,#products .product-pic,#product-images .images-nav {background-color:transparent;}input,textarea {color:#00000;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;font-weight:normal;}hr {background:#ccc;border:none;color:#ccc;height:1px;margin-bottom:10px;}#wrap {margin:0 auto;text-align:center;width:970px;}#header.image h1 span,#minicart .minicart-view span,#minicart .minicart-checkout span,#search-submit span,#badge span,div#error h2,div#error p,.pagination span.disabled,#product-images .images-prev span,#product-images .images-next span,#inventory .bar span em,#update-btn-head,#head-options span,#cart-body .item-options span {display:none;}body,p,input,textarea,#product-details .price,#faq-content .faq-list dt,#contact-form label,#cart-footer .cart-total #cart-shipping-tax p,a:link,a:visited {color:#00000;}#product-1,#product-4,#product-7,#product-10,#product-13,#product-16,#product-19,#product-22,#product-25,#product-28,#product-31,#product-34,#product-37,#product-40,#product-43,#product-46,#product-49,#product-52,#product-55,#product-58,#product-61,#product-64,#product-67,#product-70,#product-73,#product-76,#product-79,#product-82,#product-85,#product-88,#product-91,#product-94,#product-97,#product-100,#product-2,#product-5,#product-8,#product-11,#product-14,#product-17,#product-20,#product-23,#product-26,#product-29,#product-32,#product-35,#product-38,#product-41,#product-44,#product-47,#product-50,#product-53,#product-56,#product-59,#product-62,#product-65,#product-68,#product-71,#product-74,#product-77,#product-80,#product-83,#product-86,#product-89,#product-92,#product-95,#product-98,#product-3,#product-6,#product-9,#product-12,#product-15,#product-18,#product-21,#product-24,#product-27,#product-30,#product-33,#product-36,#product-39,#product-42,#product-45,#product-48,#product-51,#product-54,#product-57,#product-60,#product-63,#product-66,#product-69,#product-72,#product-75,#product-78,#product-81,#product-84,#product-87,#product-90,#product-93,#product-96,#product-99 {margin:0;padding:0;}

^ Does it have something to do with how the product numbers are ordered? This style sheet used to only display the products 3 across the page before I started messing with it, and now I've gotten it to do 5 across.

Share this post


Link to post
Share on other sites

WHY? apply this style to individual id reference, why not just give these elements that use this id ref's a classname as well to apply this styling instead.

<div id="product-1" class="product">...</div> <div id="product-4" class="product">...</div><div id="product-7" class="product">...</div><div id="product-10" class="product">...</div>

.product {  margin:0;padding:0; }

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...