X-Cart forums

[junliw1975]

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

[xplorer]

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:

<!--[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 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)

[junliw1975]

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

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

Cheers!!