1 reply [Last post]
spind
spind's picture
Offline
newbie
Last seen: 5 years 43 weeks ago
Timezone: GMT-6
Joined: 2015-02-04
Posts: 1
Points: 2

I'm having some trouble moving a element around, Any help would be appreciated.

Here is my css:

.yotpo.bottomLine.yotpo-small {
position: relative! important;
bottom: 140px! important;
}

.yotpo-display-wrapper {
position: relative! important;
bottom: 10px! important;
}

If you view here: http://slmserver.com/~triathlon/product-category/triathlon/womens-triathlon-wetsuits/womens-sleeveless-triathlon-wetsuits/ you will notice that the review stars are missaligned on the first product.

If you open that product and view it, it appears in the correct place.

AND if you view here: http://slmserver.com/~triathlon/product/2013-synergy-women-s-endorphin-quick-john/

The stars are way out of wack.

What changes to my css do you recommend to have the stars show in the correct place, which is directly under the price of the product. in all three locations?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 51 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Some sanity

Bootcstrap, a gawdawful WP theme with 30+ stylesheets, several jQuery scripts, a document structure that makes no semantic sense at all, and all held together with absolutely positioned elements. I don't doubt you've had troubles. I couldn't figure it out in a reasonable length of time either.

See the W3C html validator. There are 150+ syntax errors.

Look at this, and ask about whatever I've done that you don't see the reasoning.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8">
    <title>
      Test document
    </title>
    <style type="text/css">
/*<![CDATA[*/
 
    body {
      background-color: white;
      color: #404040;
      font: normal 100%/1.5 sans-serif;
      }
 
    p {
      font-size: 1em;
      }
 
    h1, h2, h3 {
      font-family: serif;
      margin-bottom: 0;
      }
 
    h1, #tagline {
      text-align: center;
      }
 
    h2 {
      font-size: 1.5em;
      font-weight: lighter;
      border-bottom: 1px solid #404040;
      }
 
    p#tagline {
      margin-top: 0;
      }
 
    #wrapper {
      margin: 0 auto;
      max-width: 75em;
      }
 
    #topnav {
      padding: 0;
      text-align: center;
      }
 
    #topnav li {
      display: inline-block;
      font-weight: bold;
      margin: 0 .75em;
      position: relative; /*provides reference for drop down items*/
      }
 
    #main {
      float: right;
      margin-left: 1.5em;
      width: 80%;
      }
 
    #main .catalog {
      text-align: center;
      padding: 0;
      }
 
    #main .catalog p {
      margin: 0;
      }
 
    #main .catalog p.alert {
      background-color: red;
      color: white;
      font-weight: bold;
      letter-spacing: .25em;
      padding: 0 .75em;
      position: absolute;
      top: 0;
      left: 0;
      }
 
    #main .catalog li {
      display: inline-block;
      position: relative;    /*provides ref for rear view and alert message*/
      vertical-align: top;
      width: 230px;
      }
 
 
    #main .catalog li img.view2 {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      }
 
    #main .catalog li img.view2:hover {
      opacity: 1.0;
      }
 
    img {
      transition-property: opacity;
      transition-duration: .5s;
      }
 
    #main .catalog .rating span {
      color: orange;
      }
 
    #filters {
      min-width: 10em;
      overflow: hidden;
      }
 
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="banner">
        <h1>
          WetsuitOutlet.com
        </h1>
 
        <p id="tagline">
          The Best Place on Earth to Buy Wetsuits
        </p>
      </div>
 
      <ul id="topnav">
        <li>Home
        </li>
 
        <li>Activity
        </li>
 
        <li>Triathlon
        </li>
 
        <li>Rentals
        </li>
 
        <li>Resources
        </li>
 
        <li>Contact
        </li>
 
        <li>Clearance
        </li>
      </ul>
      <!-- banner -->
 
      <div id="main">
        <h2>
          Sleeveless
        </h2>
 
        <ul class="catalog">
          <li>
            <a href="#"><img src=
            "http://slmserver.com/~triathlon/wp-content/uploads/2014/10/2013-Synergy-Endorphin-Sleeveless-Womens-front-274x293.jpg"
                 alt=""
                 width="229"><img src=
                 "http://slmserver.com/~triathlon/wp-content/uploads/2014/10/2013-Synergy-Endorphin-Sleeveless-Womens-Back-274x293.jpg"
                 alt=""
                 width="229"
                 class="view2"></a>
            <p class="rating">
              [<span>★★★★☆</span> 2 reviews]
            </p>
 
            <p>
              2013 Synergy Women’s Endorphin Sleeveless
              <br>
              $179.99
            </p>
 
            <p class="alert">
              Sale!
            </p>
          </li>
 
          <li>
            <a href="#"><img src=
            "http://slmserver.com/~triathlon/wp-content/uploads/2014/10/2013-Synergy-Endorphin-Sleeveless-Womens-front-274x293.jpg"
                 alt=""
                 width="229"><img src=
                 "http://slmserver.com/~triathlon/wp-content/uploads/2014/10/2013-Synergy-Endorphin-Sleeveless-Womens-Back-274x293.jpg"
                 alt=""
                 width="229"
                 class="view2"></a>
          </li>
 
          <li>
            <a href="#"><img src=
            "http://slmserver.com/~triathlon/wp-content/uploads/2014/10/2013-Synergy-Endorphin-Sleeveless-Womens-front-274x293.jpg"
                 alt=""
                 width="229"><img src=
                 "http://slmserver.com/~triathlon/wp-content/uploads/2014/10/2013-Synergy-Endorphin-Sleeveless-Womens-Back-274x293.jpg"
                 alt=""
                 width="229"
                 class="view2"></a>
          </li>
 
          <li>
            <a href="#"><img src=
            "http://slmserver.com/~triathlon/wp-content/uploads/2014/10/2013-Synergy-Endorphin-Sleeveless-Womens-front-274x293.jpg"
                 alt=""
                 width="229"><img src=
                 "http://slmserver.com/~triathlon/wp-content/uploads/2014/10/2013-Synergy-Endorphin-Sleeveless-Womens-Back-274x293.jpg"
                 alt=""
                 width="229"
                 class="view2"></a>
          </li>
 
          <li>
            <a href="#"><img src=
            "http://slmserver.com/~triathlon/wp-content/uploads/2014/10/2013-Synergy-Endorphin-Sleeveless-Womens-front-274x293.jpg"
                 alt=""
                 width="229"><img src=
                 "http://slmserver.com/~triathlon/wp-content/uploads/2014/10/2013-Synergy-Endorphin-Sleeveless-Womens-Back-274x293.jpg"
                 alt=""
                 width="229"
                 class="view2"></a>
          </li>
        </ul>
      </div>
      <!-- main -->
 
      <div id="filters">
        <h2>
          Filter by Price
        </h2>
 
        <p>
          [price range widget]
        </p>
 
        <h2>
          Categories
        </h2>
 
        <p>
          [Category menu goes here]
        </p>
      </div>
    </div>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.