Jose

Product Image Row Increase w/Mouse-over

I have an issue with the Mouse-over feature for the products pictured on the index page. My layout is 4 columns by 4 rows. When the Mouse-over effect occurs in a column 4 product/image (with the exception of Row 4, Column 4 item), the page length increases by 1 row. + 1 - 2 - 3 - 4 1 a - b - c - d 2 e - f - g - H 3 i - j - k - l 4 m - n - o - p So in the above diagram, if product "H" (Row 2, Column 4) is moused-over, the resultant page layout displays as diagrammed below: + 1 - 2 - 3 - 4 1 a - b - c - d 2 e - f - g - H 3 * - * - * - i 4 j - k - l - m 5 n - o - p - * As soon as the "H" product is moused-over (or the "d" product or "i" product for that matter), it "bumps" open 3 empty product spaces in columns 1, 2 and 3. In the second diagram the asterisks " * " represent the blank spaces/empty image areas created by the mouse over. Everything is displaced by three columns, leaving one row empty, with the exception of Column 4. It also fills out the bottom row (Row 5), with three products and leaves the Row 5, Column 4 position empty. We have tried reducing the frame padding - and even giving it a negative value - but nothing alters the 3-frame image displacement... congocollection.com

Created: July 15, 2013 at 11:49 am
  • In: ShopperPress
  • Started by: JoseJose
  • 2 members left 5 comments
  • Last reply from: JoseJose

  • Jose
    Jose
    July 15, 2013 at 12:17 pm

    The Website I am having this issue with is

  • Mark Fail
    Mark Fail
    July 15, 2013 at 2:17 pm

    here, its nothing todo with padding just the border widget, add this to your admin -> display setup -> custom css;

    [code title=””] li:hover {
    border: 5px solid #3f7f00;
    } [/code]

  • Jose
    Jose
    July 15, 2013 at 4:34 pm

    Wow Mark – What an Easy Fix! Thanks so much.

    I tried to decrease the border from 5 px to 2 px but the problem returned. Is there any way to decrease the highlighted border/box to 2 pixels without the problem rearing its ugly head…?

  • Mark Fail
    Mark Fail
    July 15, 2013 at 4:38 pm

    you need to use both the hover and non hover value;

    li {
    border: 2px solid #3f7f00 !important;
    }

    and

    li:hover {
    border: 2px solid #3f7f00;
    }

  • Jose
    Jose
    July 15, 2013 at 7:45 pm

    Mark,

    I am using this code snippet – but still not working – how am I bungling this up:

    <style> li:hover {
    border: 2px solid #3f7f00;
    } </style>

    <style> li:border: {
    2px solid #3f7f00
    } </style>

    What am I missing?


Viewing 6 posts - 1 through 6 (of 6 total)