justinbenfaida Posted March 1, 2013 Share Posted March 1, 2013 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 More sharing options...
justinbenfaida Posted March 1, 2013 Author Share Posted March 1, 2013 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 More sharing options...
dsonesuk Posted March 2, 2013 Share Posted March 2, 2013 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now