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