Jump to content

Style Sheet Broken Displaying Inline Boxes


justinbenfaida

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?

Link to comment
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.

Link to comment
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; }

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...