Product listing table - design help

[jhande]

The first thing I'd like to accomplish is to have a repeating background image in the header row.

 

I've tried many times but it always comes out messed up.

 

Where the sortable link Titles are located (Manufacturer, Product Name+, Item #, Price, etc...) always breaks the background and almost looks as if there's two background images trying to overlap each other.

 

 

I'm using background images for all my other infoboxes and would like that table to match.

 

Any thoughts or ideas would be greatly appreciated.

 

If I can solve that problem, my next step is to try to add a dashed/dotted border to seperate the rows of products.

[Hotclutch]

Something like this in your CSS?

 

TD.InfoBoxHeading {

background-image: url('images/image.jpg');

background-repeat: repeat-x;

 

Where you create the image.jpg you want and copy it to images folder.

[jhande]

Hey Ashley,

 

Thanks, already did that.

 

There's something strange going on with the header links though.

 

It's as if the links call for another copy of the backgroung image and the alignment is lower.

[Xpajun]

It looks like the image is being called for the box and again for the text - have you managed to do that?

[jhande]

Thanks Julian,

 

That's what I figured, but I can't seem to find yet where the text would be calling for it.

 

Still looking...

[jhande]

After checking almost all files, I found this:

 

includes\languages\english\index.php - only calls for the title text, no background image.

 

includes\modules\product_listing.php - does call background image:

 

$list_box_contents[0][] = array('align' => $lc_align,
                				'width' => $lc_width,
                				'params' => 'class="productListing-heading"',
                               	'text' => ' ' . $lc_text . ' ');

 

stylesheet.css - calls for a background image:

 

.productListing-heading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 color: #000000;
 font-weight: bold;
 vertical-align: middle;
 height: 20px;
/*  background-color: #f0e66a;*/
 background: url(images/infobox/bar_mid_blue.gif);
}

 

What I have tried and my results:

 

Turn off background image in stylesheet.css = image totally gone.

Turn it back on.

 

Turn off background image in product_listing.css = background image only behind Title text.

Turn it back on.

 

Tried adding this to product_listing.php:

 

case 'PRODUCT_LIST_PRICE':
   	$lc_text = TABLE_HEADING_PRICE;
   	$lc_align = 'right';
   	$lc_width = '50px';
   	$lc_height = '20px';
   	$lc_valign = 'middle';
 break;

 

And:

 

	$list_box_contents[0][] = array('align' => $lc_align,
                				'width' => $lc_width,
                    	      		'height' => $lc_height,
                    	      		'valign' => $lc_valign,
                				'params' => 'class="productListing-heading"',
                               	'text' => ' ' . $lc_text . ' ');

 

No change, still double images improperly aligned.

 

[spooks]

 

 

 

Looking at your image, I've seen the issue b4, its a browser rendering problem around links, baring trying different doc-types I don't believe there is a fix other by taking care with backround image to minimise the issue.

[jhande]

Gee, thanks Sam for popping my bubble... no fix...

 

Seriously, thanks! That saved me tons of hours driving myself nuttier.