X-Cart forums - Rollover Image Border Problem

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Rollover Image Border Problem (https://forum.x-cart.com/showthread.php?t=56021)

Rollover Image Border Problem

Hi Guys:

I was able to add mouse moveover border to the image on product list, however when the the border shows, the picture will move a little bit.

I would like to have the picture sit still and I know it must have something to do with table product cell padding but I just can't figure it out where that I can chagne it. I have gone throug main.css and tried many ways but still no success!

Could someone here show me the light to the tunnel?

I am using 4.2.3 and here is the link to my site:

www.bridalshoesca.com

Thanks

Re: Rollover Image Border Problem

Hi!

"td.rolloverproduct-cell" has a 3px border. So, just add a white (or transparent) 3px border to "td.product-cell" either.

By the way, if you don't care about IE6, you can get rid of "onmouseover" functions in your HTML and just apply css styles on "td.product-cell" and "td.product-cell:hover".

And if you care about IE6 you can use the following ":hover" emulation method:

1. Define your styles for td.product-cell and td.product-cell:hover

2. Make "ie6.css" file included in IE6 only: add the following in the head of your page html:

HTML Code:

<!--[if IE 6.0]><link rel="stylesheet" href="<path_to_the_file>" type="text/css" media="all" charset="utf-8" /><![endif]-->

3. Edit "ie6.css" as follows:

3a. Duplicate the "td.product-cell:hover" styles for "td.product-cell-hover"

3b. Add the following styles:

HTML Code:



* html td.product-cell

{

  behavior: expression(

    this.onmouseover = new Function("this.className += ' product-cell-hover'"),

    this.onmouseout = new Function("this.className = this.className.replace(' product-cell-hover','')"),

    this.style.behavior = null

  );

}

You can see this emulation method "in action" at http://www.litecommerce.com/ (see http://www.litecommerce.com/themes/lccms/style.css file)

Re: Rollover Image Border Problem

That works great!!! You made my day!!

I don't reallycare about IE6 but thanks so much for the code!!!!

Cheers!!