Help with Random Code appearing in Product List

[Oozle]

Hi guys, I am almost done with my site, and started uploading my product images, but somehow this random code appeared under my Product Names, and I am not sure where to locate it, or how to get rid of it.

Can anyone help me please?

I am using 1.3.8a, and my website URL is www.oozleideas.com

[SCR]http://i605.photobucket.com/albums/tt132/oozleideas/Capture.jpg[/SCR]

[Website Rob]

Doesn't look like radom code but incorrect coding manually put in.

<div class="listingDescription">&lt;!-- /* Font Definitions */

Using the ASCII symbol for < will display as < and thus, code that follows will be displayed as well.

Correct way to use HTML quotes...
<!-- content not to be shown -->

[Oozle]

Thanks for the explanation Rob.

Mind if I ask too, which file should I be looking to amend in order to correct this issue?

[Website Rob]

No idea what file to look in but suggest you use Admin > Tools > Developers Tool Kit
and search 'Font Definitions' (last input box on the left: Look-up in all files)

If not already familiar with using the Developers Tool Kit then now is a good time. It is definitely a handy tool and one to become familiar with.

[Oozle]

Ah ok! Will do so right away.

Thanks for the reminder.

[Oozle]

Followed Rob's advice, but still not able to find the correct file which contains this error.

All I can narrow down is that it is linked to the Product Listing's Product Name field.

When I turned off Display Product Name under Admin > Product Listing, the line of coding disappears along with the product title.

Is there someone else able to help me on this issue?

Thanks in advance!

[stevesh]

I'm going to guess that you pasted your product names and/or description from Microsoft Word. Not a good idea. Word adds a lot of styling stuff that can mess with your code. Try re-entering your descriptions from the product entry page, or copy and paste from a different HTML editor.

[schoolboy]

What program are you using to create your product descriptions?

I'll bet you're doing this...

You're writing your product descriptions in MS Word, then saving these as HTML.

Then, you're toggling to the source (or perhaps not), and using COPY and PASTE to put these descriptions into HTMLArea (or FCK Editor as the case may be) on your product editing pane.

Trouble with using MS products - even MS Word - to create descriptions - is that it formats the stuff in that excruciatingly annoying microsoft way.

If you want to create your product descriptions in a HTML WYSIWYG editor, do it with a reputable piece of software - and that excludes anything put out by MS for this purpose.

When you have the raw html, you need to TOGGLE to html mode in HTMLArea (the <> icon) and paste the raw code there.

[Oozle]

Stevesh and schoolboy,

You guys hit the nail on the spot. Indeed I am using MS Word to create my descriptions before Copy Pasting into HTMLArea.

I didn't know that MS products will cause such problems, and I'll be sure to re-try again using other HTML editors (I'm guessing FCK Editor is recommended?)

Will be updating with whether I manage to solve the issue.

Thanks alot guys!

[schoolboy]

Using an external WYSIWYG editor is a GOOD way of getting the underlying HTML of things (like product descriptions, defined pages content, ezpages) sorted out...

... but bear in mind how you FORMAT this HTML, and, when you've created it, what you need to AVOID when you use CTRL+C / CTRL+V.

I do many of my descriptive text stuff in Dreamweaver, having set up a range of style ID's and Classes within DW. For example, I have a style ID called "productMainParagraph", another called "productSubParagraph".

(I make sure that the style names do not conflict with any used in standard ZC, then, I append the declarations for these styles into my stylesheet.css)

So, as I work in DW, I apply the styles to the content, so (for example), a product description's HTML could look like this:

<div id="productMainParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<div>
<br /><br />
<div id="productSubParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<div>

Then in stylesheet.css I have:

#productMainParagraph {
color:#000000;
font-family:verdana,arial,helvetica,sans-serif;
font-size:105%;
 }

#productSubParagraph {
color:#F3F3F3;
font-family:verdana,arial,helvetica,sans-serif;
font-size:85%;
 } 

Then, when it comes to copying the HTML source code, I make sure to copy stuff (off DW) that exists only between the <body> and </body> tags... or more usually, only the <div> components I am working with.

You must NOT paste any <head> </head> stuff... the page will already inherit the ZC header stuff.

In this way, I make sure that my styles are not embedded in the description's html, but are rather sourced from the stylesheet.