Hi everyone. I hope someone can lead me in the right direction here.

Although I catch on very quickly, I am a newbie at best regarding html and css, so please bear with me!

I'm putting together an e-commerce website that is hosted by ProStores. They have an online tool to develop, or more accurately, tweak, their existing designs. There are a number of various templates contained within a design, but it looks to me that they pretty much build the page by combining a Header page, a Storefront (Homepage) and a Footer page. Then there are numerous other pages that utilize this basic layout for "Store Policies", "Customer Service", etcetera (or so I gather that's how it works). The one I'm having a problem with screen resolution is the catalog list (The page that lists the product after selecting from the drop down menu).

Here is the problem:

I've added a background image to a table on the "Homepage" that displays correctly in any resolution. I added the width="100%" to accomplish this. I've used the same image (image size identical) in the catalog list template, but when I select a product category from the catalog list on the left, the same image is displayed, but extended beyond the right border. It looks clean at 1024x768, but when I go to 800x600, it extends beyond the right border causing the horizontal scroll to show. This does not happen with the homepage...same image, same apparent layout.

I've changed/added the same width="100%" to <TD>'s that look like they would have something to do with the appropriate table in the catlist source, but nothing has worked. I also tried what I believed to be the correct similar attribute to the image statement that displays the image itself, but no go.

This is a portion of the catlist code:
<ss:set name="viewedcategory" value="$request.getParameter('category')"/>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" class="mainlinks">
</tr>
<tr>
<td align="center" valign="top" class="mainlinks" background-color="#cc0000"> <ss:set name="NOsubcat" value="1"/>
<ss:foreach item="category" within="$catalog.categoryList()">
<ss:if test="$viewedcategory">
<ss:if test="$category.parentchaindisplay == $viewedcategory">
<ss:if test="$category.childCategories">
<ss:image source="$category.photoimage" width="100%"/><br>
<ss:value source="$category.description"/><br><br>
</ss:if>
<ss:foreach item="subcat" within="$category.childrenToDepth(1)">

<ss:set name="NOsubcat" value="$subcat"/>
</ss:foreach>
</ss:if>
<ss:else/>
</ss:if>
</ss:foreach>
<ss:if test="$NOsubcat == '1'">
<!-- Start Listing Products -->
<tr valign="top">
<ss:foreach item="listing" within="$catalog.results">
<ss:sortby item="category"/>
<td colspan="6">
<!--<ss:font source="$font.paragraph">
<b><ss:value source="$listing.name"/></b></ss:font><br><br>-->
</td>
<tr>
<!-- start count at zero for columns -->
<ss:set name="ColumnCount" value="$system.getMath(0)"/>
<!-- for each product in this category -->
<ss:foreach item="product" within="$listing.products">
<ss:sortby item="price"/>
<td align="center" valign="top">
<ss:link source="$product"><ss:image source="$product.thumbnailImage" alt="$product.name" border="0"/></ss:link>
</td>
<ss:eval source="$ColumnCount.set($ColumnCount.add(1))"/>
<ss:if test="$ColumnCount.get() == 3">
<!-- 3rd column -->
<td width="50%" valign="top" align="left">
<ss:else/>
<td width="33%" valign="top" align="left">
</ss:if>
<ss:font source="$font.paragraph">
<ss:link source="$product"><b><ss:value source="$product.name"/></b></ss:link>
<br>
<ss:value source="$product.brief"/> <br>
<b>PRICE: <ss:include macro="productprice"/></b>
<br><ss:link shortcut="BuyIt"/>
<ss:if test="$cart.isLastProductAdded($product)">
<a name="itemadded">
<ss:link source="$templateSet.cart"><ss:image source="$templateSet.images['cart-confirm-small.gif']" border="0"/></ss:link>
</a>
</ss:if>
<br>
</ss:font>
</td>

<!-- 3rd product in row, end row and add a blank one, start another row -->
<ss:if test="$ColumnCount.get() == 3">
</tr>
<tr><td colspan="6"> </td></tr>
<tr>
<ss:eval source="$ColumnCount.set(0)"/>
</ss:if>

</ss:foreach>

<ss:if test="$ColumnCount.get() == 1">
<!-- One product in row for this category, add 4 more columns to equal 6 columns, end row and add a blank one, start another row -->
<td colspan="4" width="50%"> </td></tr>
<tr><td colspan="6"> </td></tr>
<tr>
</ss:if>
<ss:if test="$ColumnCount.get() == 2">
<!-- Two products in row for this category, add 2 more columns to equal 6 columns, end row and add a blank one, start another row -->
<td colspan="2" width="50%"> </td></tr>
<tr><td colspan="6"> </td></tr>
<tr>
</ss:if>

</ss:foreach>
<!-- end the last row -->
<td colspan="6"> </td></tr>

</table>
<ss:font source="$font.paragraph">
<ss:if test="$catalog.isMultiPageResult"><p><b>Result Pages:</b> <ss:link shortcut="ListMediumText"/></p></ss:if>
</ss:font>
<ss:else>

</table>

</ss:if>


The code in red is what I've tried applying the width="100%" info to at one time or another, and I see some are still that way.

Is it possible the "table" that's actually diplaying the <ss:image source="$category.photoimage" width="100%"/> is not initiated in the catlist page code and coming from some other source?

Thanks in advance. Your help is greatly appreciated!

HTMLidiot

Hi, have you found your way here too now?

It would be easier if we could see the output when it goes wrong. If you for some reason can't post the URL, go to the page that displays wrong, View Source and copy it here.

Hi Pandy.

You know me, or am I just one of a throng of people from ProStores?? Jeeez...hope I'm not bugging too many people about this issue!

Here's the url:

www.cablestockroom.com

I did't post it before 'cause I've been making a lot of changes... basically attempts at fixing this issue on the fly. Never know when it'll go belly up and I'll have to copy and paste the code back in from one of the 10 million text files I have currently residing on my desktop thanks to this endeavor.

I recognize your name and thought it was from the old WDG board. Maybe it's from somewhere else or I think of another HTMLidiot altogether.

http://www.cablestockroom.com

I don't see any background image at all on the product pages.
http://www.cablestockroom.com/servlet/the-...tors/Categories

Thats correct. Sorry. The problem is most noticable at the top level category, or second level when there are multiple subcats of the second level. The idea was to not blast product at the viewer, which is the ProStores default methodology.

Go here for an example:

http://www.cablestockroom.com/servlet/the-...ideo/Categories

Then here to see that it also happens when the product IS displayed:
http://www.cablestockroom.com/servlet/the-...able/Categories


The image is the exact image as is one the homepage/storefront but with added text from Photoshop. I'll be doing something like this for each cat with no product if I can find an answer.


And trust me...I AM the real htmlidiot!!! Don't know who that other imposter was.

Just noticed this....you can see the exact same effect if you use the "restore/maximize" button in the upper rt corner of your web browser. Or, just continuously resize the browser window with the mouse cursor. You'll see the homepage maintains aspect ration, the other two I listed do not!


BTW- Thanks!

Still see no background.

The image is 756 pixels wide so there wouldn't be room for it on 800x600, given the browser chrome and the menu. But if used as background it should be cropped off.


OK. Someone is using the same name as you.

That's true, it is 756 pixels wide, but why is the same 756 pixel wide image working on the homepage!? I'm with the understanding that the width="100%" is what's supposed to dynamically adjust the "viewport" (for lack of a better word).


I've attached the image you should be seeing as background at http://www.cablestockroom.com/servlet/the-...ideo/Categories

I don't know because I can't see the non working background. If it worked it would get cropped in a smaller window, just as it does on the front page. The difference is that the other image contains text so the text would be cropped too.


It will make the table, in this case, take up all available width. If the window is smaller, the table will be smaller and vice versa. Maybe what you want is to make the table, or the td, as wide as the backgound image?

OK, I looked at the source. You don't use it as a background. You try to stretch an inline imgage.

If you try to do that, use only width="100%" and the browser will scale the image. I'm not sure this is a good idea in this case though.

FYI now I only see a big white square on those pages. No image, no merchandise, no nothing except the menu and the header.

First off, thank you so much for all your help. I'm sure I'll get it there but it's really frustrating. You're not employed by ProStores by any chance are you?


You wrote: OK, I looked at the source. You don't use it as a background. You try to stretch an inline imgage.

You are correct. The way I have to do this is, PS, in their "admin tools" allows one to assign an image to top level categories. It looks like they assign it this variable: "$category.photoimage".
This is the original line in the code: <img src="$category.photoimage" width="100%"> actually, I added the width= statement...which doesn't work. What you're seeing (<img src="/images/background-av.jpg") is the result of the previous few lines of code that tells it which specific $category photo it needs to reference. The image must change based on which top-level cat is selected.

Since it's not technically a background, is there a way that's syntactically correct to use the <img src="$category.photoimage" width="100%">, but assign it as a background??? I've looked, but to no avail and what I've attempted just bombed.

I did try this in place of the aforementioned line (I know it's probably ridiculous!):
<TD background=img src "$category.photoimage" width="100%" height=500></TD>

This actually works for the image. It was displaying the image OK and within the boundaries, but when I drilled down to a sub-cat with product to display, the three column product listing still overlapped. This tells me there's still some mysterious table or something like that hiding somewhere. your comment about "not being a background" leads me to believe that's likely the issue there and if I could actually assign it as a background, it'd be probably a more sound approach than the <TD>.


Again, thanks SOOO MUCH for your help and have a terrific Thanksgiving!!!


The HTMLidiot

But I can't help really, because I can't see the stuff. Are you looking at cached pages maybe?


Yes. I'm their code detective.



So ditch PS and look at the code.




I assume you position the image behind the text to get it in the "background"?


I wonder why you don't just use it as a background image?

CSS3 may offer the ability to stretch background images, but browser support is years (if not decades) away. In the meantime, your best bet is to use a background color that blends with the appropriate edges of the background image, and to specify a non-repeating background image.