HTML tables 4 Category Descriptions not displaying properly

More-Japan · #1 07-12-2005, 09:07 AM

Hello

The html tables and layout i want to use in my category descriptions is not lining up properly, and is getting all mangled.

It's generating a lot of breaks, and the alignment and table sizes are messed up.

Can't seem to figure out why it is doing this.

ETInteractive.com · #2 07-12-2005, 09:32 AM

[balinor voice]
your going to need to post a url or the html code output from the page , if you want any help.
[/balinor voice]

balinor · #3 07-12-2005, 09:33 AM

*laugh* He's right

More-Japan · #4 07-12-2005, 09:39 AM

here is the html i am trying to put into the Category Description

Code:

<table width="787" height="335" border="0" align="left" cellpadding="0" cellspacing="0">
  <tr>
    <td width="509"><table width="509" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><TABLE WIDTH=509 BORDER=0 CELLPADDING=0 CELLSPACING=0>
          <TR>
            <TD COLSPAN=4>[img]http://www.more-japan.com/images/cat_mid_top.gif[/img]</TD>
          </TR>
          <TR>
            <TD>[img]http://www.more-japan.com/images/cat_mid_left.gif[/img]</TD>
            <TD><table width="499" height="270" border="0" cellpadding="0" cellspacing="0" background="http://www.more-japan.com/images/cat_mid_content.gif">
                <tr>
                  <td><div id="dynloadarea" style="width:499px;height:270px"></div></td>
                </tr>
            </table></TD>
            <TD>[img]http://www.more-japan.com/images/cat_mid_left2.gif[/img]</TD>
            <TD>[img]http://www.more-japan.com/images/cat_mid_right.gif[/img]</TD>
          </TR>
          <TR>
            <TD COLSPAN=4>[img]http://www.more-japan.com/images/cat_mid_bottom.gif[/img]</TD>
          </TR>
        </TABLE></td>
      </tr>
    </table>    </td>
    <td width="278"><table width="278" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><TABLE WIDTH=278 BORDER=0 CELLPADDING=0 CELLSPACING=0>
          <TR>
            <TD COLSPAN=3>[img]http://www.more-japan.com/images/cat_right_top.gif[/img]</TD>
          </TR>
          <TR>
            <TD ROWSPAN=8>[img]http://www.more-japan.com/images/cat_right_left.gif[/img]</TD>
            <TD>[img]http://www.more-japan.com/images/cat_right_company.gif[/img]</TD>
            <TD ROWSPAN=8>[img]http://www.more-japan.com/images/cat_right_right.gif[/img]</TD>
          </TR>
          <TR>
            <TD>[img]http://www.more-japan.com/images/cat_right_engine.gif[/img]</TD>
          </TR>
          <TR>
            <TD>[img]http://www.more-japan.com/images/cat_right_suspension.gif[/img]</TD>
          </TR>
          <TR>
            <TD>[img]http://www.more-japan.com/images/cat_right_chassis.gif[/img]</TD>
          </TR>
          <TR>
            <TD>[img]http://www.more-japan.com/images/cat_right_interior.gif[/img]</TD>
          </TR>
          <TR>
            <TD>[img]http://www.more-japan.com/images/cat_right_exterior.gif[/img]</TD>
          </TR>
          <TR>
            <TD>[img]http://www.more-japan.com/images/cat_right_apparel.gif[/img]</TD>
          </TR>
          <TR>
            <TD>[img]http://www.more-japan.com/images/cat_right_blank.gif[/img]</TD>
          </TR>
          <TR>
            <TD COLSPAN=3>[img]http://www.more-japan.com/images/cat_right_bottom.gif[/img]</TD>
          </TR>
        </TABLE></td>
      </tr>
    </table></td>
  </tr>
</table>

More-Japan · #5 07-12-2005, 09:42 AM

And then after cutting and pasting into the category description, this is the HTML that is generated. Generating
galore!

Basically, I have a format that I am using on the front page of www.more-japan.com that uses some DHTML and Java that I would like to carry over to the categories.

Code:

<html>
<head>

<title> 
 
 
 Kazama Auto 
 
 
@ More Japan JDM Parts Supply 
</title>


<meta name="description" content="More Japan is the official distributor of SARD, Kazama, Ueo Style, Nagisa and Signal Auto performance, drift suspension, and exterior accessories.">
<meta name="keywords" content="drift, suspension, drifting, ueo, style, kazama, auto, sard, nagisa, signal, spl, performance, jdm, 240sx, ae86, fc3s, fd3s, s13, s14, 180sx, horsepower, tuning, fuel, tuning, import">


 
 
<SCRIPT LANGUAGE="JavaScript" SRC="http://www.more-japan.com/cat_kazama.js"> 
</SCRIPT> 
 



<script type="text/javascript">
<!-- Hide
pics=new Array("http://www.more-japan.com/images/top_kazama.jpg","http://www.more-japan.com/images/top_signal.jpg","http://www.more-japan.com/images/top_ueo.jpg","http://www.more-japan.com/images/top_nagisa.jpg","http://www.more-japan.com/images/top_sard.jpg");
lnpics=pics.length-1;
index=Math.round(Math.random()*lnpics);
// End Hiding -->
</script>

<meta name="robots" content="index, follow"><link rel="stylesheet" href="http://www.more-japan.com/xcart/skin1/skin1.css">
</head>
<body LEFTMARGIN=0 TOPMARGIN=0 RIGHTMARGIN=0 BOTTOMMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<TABLE align=center border=0 cellPadding=0 cellSpacing=0 width="100%" height="100%">
  <TR>
    <TD valign=top>
<TABLE WIDTH=995 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD ROWSPAN=5>
			[img]http://www.more-japan.com/images/mjcomp_01.gif[/img]</TD>
		<TD COLSPAN=4><table width="617" height="68" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><script type="text/javascript">
				<!-- Hide
				document.write("[img]+pics[index]+[/img]");
				// End Hiding -->
				</script></td>
          </tr>
        </table></TD>
	</TR>
	<TR>
		<TD COLSPAN=4>[img]http://www.more-japan.com/images/mjcomp_03.gif[/img]</TD>
	</TR>
	<TR>
		<TD COLSPAN=3>			<table width="359" height="37"  border="0" cellpadding="0" cellspacing="0" background="http://www.more-japan.com/images/mjcomp_04.gif">
          <tr>
            <td><TABLE border=0 cellPadding=0 cellSpacing=0>
              <form method="get" action="/xcart/customer/search.php" name=productsearchform>
                <tr>
                  <td width=20></td>
                  <td class="TopLabel">Search:</td>
                  <td valign="middle"><input type="text" name="substring" size="20" value="">
                  </td>
                  <td valign="middle"> [img]http://www.more-japan.com/xcart/skin1/images/go.gif[/img]  </td>
                  <td width=20></td>
                  <td><u>Adv. Search</u></td>
                </tr>
              </form>
            </TABLE></td>
          </tr>
        </table></TD>
		<TD ROWSPAN=3><table width="258" height="96" border="0" cellpadding="0" cellspacing="0" background="http://www.more-japan.com/images/mjcomp_05.jpg">
          <tr>
            <td><table width="200" height="75" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#825B5B">
              <tr>
                <td><TABLE border=0 cellpadding=1 cellspacing=0>
<TR>
<TD rowspan=2 width=23>
[img]http://www.more-japan.com/xcart/skin1/images/cart_empty.gif[/img]</TD>
<TD class=VertMenuItems><CENTER>Your Cart is Empty</CENTER></TD>
</TR>
<TR>
<TD class=VertMenuItems></TD>
</TR>
</TABLE>					View cart

					Checkout

					</td>
              </tr>
            </table></td>
          </tr>
        </table></TD>
	</TR>
	<TR>
		<TD>			[img]http://www.more-japan.com/images/mjcomp_07.gif[/img]</TD>
		<TD>		  [img]http://www.more-japan.com/images/mjcomp_08.gif[/img]</TD>
		<TD>		  [img]http://www.more-japan.com/images/mjcomp_09.gif[/img]</TD>
	</TR>
	<TR>
		<TD>			[img]http://www.more-japan.com/images/mjcomp_10.gif[/img]</TD>
		<TD>
			[img]http://www.more-japan.com/images/mjcomp_11.gif[/img]</TD>
		<TD>
			[img]http://www.more-japan.com/images/mjcomp_12.gif[/img]</TD>
	</TR>
</TABLE>

<map name="contact" id="contact">
  <area shape="rect" coords="0,26,345,117" href="http://www.more-japan.com/xcart/index.php" alt="More Japan Homepage">
  <area shape="rect" coords="123,135,325,147" href="http://www.more-japan.com/xcart/customer/help.php?section=contactus&mode=update" alt="Contact More Japan">
</map>
<table border=0 width="100%" cellpadding=0 cellspacing=0 align="center">
<tr>
<td width=6 rowspan=2></td>
<td width=150 valign=top>
<TABLE border=0 cellPadding=0 cellSpacing=0 width="100%">
<TR> 
<TD class=VertMenuBorder> 
<TABLE border=0 cellPadding=1 cellSpacing=1 width="100%">
<TR> 
<TD class=VertMenuTitle>
<font class=VertMenuBoxNewsTitle>[img]http://www.more-japan.com/images/header_products.gif[/img]</font></TD>
</TR>
<TR> 
<TD class=VertMenuBox> 
 <TABLE border=0 cellPadding=5 cellSpacing=0 width="100%">
 <TR> 
 <TD><font class=CategoriesList>Kazama Auto</font>

<font class=CategoriesList>Nagisa Auto</font>

<font class=CategoriesList>Ueo Style</font>

<font class=CategoriesList>Signal Auto</font>

<font class=CategoriesList>SARD</font>

<font class=CategoriesList>All Parts Listing</font>



<FONT class="CategoriesList">Site map</FONT> 
</TD></TR>
 </TABLE>
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>

<TABLE border=0 cellPadding=0 cellSpacing=0 width="100%">
<TR> 
<TD class=VertMenuBorder> 
<TABLE border=0 cellPadding=1 cellSpacing=1 width="100%">
<TR> 
<TD class=VertMenuTitle>
<font class=VertMenuBoxNewsTitle>[img]http://www.more-japan.com/images/header_login.gif[/img]</font></TD>
</TR>
<TR> 
<TD class=VertMenuBox> 
 <TABLE border=0 cellPadding=5 cellSpacing=0 width="100%">
 <TR> 
 <TD><TABLE border=0 cellPadding=0 cellSpacing=0 width=100%>

<FORM action="http://www.more-japan.com/xcart/include/login.php" method=post name=authform>
<INPUT type="hidden" name="xid" value="7cefa2fa1f7ffcc79e348217ca0bf225">
 
<tr>
<td class=VertMenuItems>
<font class=VertMenuItems>Username</font>

<input type=text name=username size=16 value="">

<font class=VertMenuItems>Password</font>

<input type=password name=password size=16 value="">

<input type=hidden name=mode value=login>
<input type=hidden name=usertype value="C">
<input type=hidden name=redirect value="customer">
</td></tr>
<tr>
<td height=24 class=VertMenuItems>
<a href="javascript: document.authform.submit()" class=VertMenuItems><font class=VertMenuItems>Login </font><input type=image src='http://www.more-japan.com/xcart/skin1/images/go_menu.gif' width=27 height=14 border=0 align=absmiddle
>
</a>
</td>
</tr>
 
<tr>
<td height=24 nowrap class=VertMenuItems>
<a href="register.php" class=VertMenuItems><font class=VertMenuItems>Register </font>[img]http://www.more-japan.com/xcart/skin1/images/go_menu.gif[/img]
</a>
</td>
</tr>
<tr>
<td class=VertMenuItems>


<div align=right>
If you have disabled Javascript in your browser click here
</div>
</td>
</tr>
</form>
</table>
</TD></TR>
 </TABLE>
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>



<TABLE border=0 cellPadding=0 cellSpacing=0 width="100%">
<TR> 
<TD class=VertMenuBorder> 
<TABLE border=0 cellPadding=1 cellSpacing=1 width="100%">
<TR> 
<TD class=VertMenuTitle>
<font class=VertMenuBoxNewsTitle>[img]http://www.more-japan.com/images/header_cart.gif[/img]</font></TD>
</TR>
<TR> 
<TD class=VertMenuBox> 
 <TABLE border=0 cellPadding=5 cellSpacing=0 width="100%">
 <TR> 
 <TD><TABLE border=0 cellpadding=1 cellspacing=0>
<TR>
<TD rowspan=2 width=23>
[img]http://www.more-japan.com/xcart/skin1/images/cart_empty.gif[/img]</TD>
<TD class=VertMenuItems><CENTER>Your Cart is Empty</CENTER></TD>
</TR>
<TR>
<TD class=VertMenuItems></TD>
</TR>
</TABLE>View cart

Checkout




</TD></TR>
 </TABLE>
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>


<TABLE border=0 cellPadding=0 cellSpacing=0 width="100%">
<TR> 
<TD class=VertMenuBorder> 
<TABLE border=0 cellPadding=1 cellSpacing=1 width="100%">
<TR> 
<TD class=VertMenuTitle>
<font class=VertMenuBoxNewsTitle>[img]http://www.more-japan.com/images/header_news.gif[/img]</font></TD>
</TR>
<TR> 
<TD class=VertMenuBox> 
 <TABLE border=0 cellPadding=5 cellSpacing=0 width="100%">
 <TR> 
 <TD><FONT  class=VertMenuItems>
<span style="font-size: 9px">

05-20-05 New Nagisa Auto Parts for FD3S

05-24-05 Nagisa Auto Seat Rails available!
</span>

[img]http://www.more-japan.com/xcart/skin1/images/spacer.gif[/img]

More Japan
newsletter !
<form action="/xcart/mail/subscribe.php" method=get name=subscribeform>
<input type="text" name="email" size=16>


<a href="javascript:document.subscribeform.submit()" class=VertMeuItems><font class=VertMenuItems>Subscribe</font>[img]http://www.more-japan.com/xcart/skin1/images/go_menu.gif[/img]
</a>
<input type=hidden name=redirect value="customer">
</form>
</FONT>
</TD></TR>
 </TABLE>
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>


<TABLE border=0 cellPadding=0 cellSpacing=0 width="100%">
<TR> 
<TD class=VertMenuBorder> 
<TABLE border=0 cellPadding=1 cellSpacing=1 width="100%">
<TR> 
<TD class=VertMenuTitle>
<font class=VertMenuTitle>[img]http://www.more-japan.com/images/header_info.gif[/img]</font>
</TR>
<TR> 
<TD class=VertMenuBox> 
 <TABLE border=0 cellPadding=5 cellSpacing=0 width="100%">
 <TR> 
 <TD>Recover password

Contact More Japan

Privacy statement

Terms & Conditions

 
 
 
About Us
 
 
 
 
Site Map
 
 
 
 
News Updates
 
 
 
 
Downloads
 
 
 
 
Installation Pictures
 
 
 
 
Authorized Retailers
 
 
 
 
Links
 
 
 
 
Nagisa Auto T-Shirt Giveaway!
 
 


</TD></TR>
 </TABLE>
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>




</td>
<td width=20></td>
<td valign=top>


<font class=NavigationPath>More Japan</font>::<font class=NavigationPath>Kazama Auto</font>





<table width="787" height="335" border="0" align="left" cellpadding="0" cellspacing="0">

  <tr>

    <td width="509"><table width="509" border="0" cellspacing="0" cellpadding="0">

      <tr>

        <td><TABLE WIDTH=509 BORDER=0 CELLPADDING=0 CELLSPACING=0>

          <TR>

            <TD COLSPAN=4>[img]http://www.more-japan.com/images/cat_mid_top.gif[/img]</TD>

          </TR>

          <TR>

            <TD>[img]http://www.more-japan.com/images/cat_mid_left.gif[/img]</TD>

            <TD><table width="499" height="270" border="0" cellpadding="0" cellspacing="0" background="http://www.more-japan.com/images/cat_mid_content.gif">

                <tr>

                  <td><div id="dynloadarea" style="width:499px;height:270px"></div></td>

                </tr>

            </table></TD>

            <TD>[img]http://www.more-japan.com/images/cat_mid_left2.gif[/img]</TD>

            <TD>[img]http://www.more-japan.com/images/cat_mid_right.gif[/img]</TD>

          </TR>

          <TR>

            <TD COLSPAN=4>[img]http://www.more-japan.com/images/cat_mid_bottom.gif[/img]</TD>

          </TR>

        </TABLE></td>

      </tr>

    </table>    </td>

    <td width="278"><table width="278" border="0" cellspacing="0" cellpadding="0">

      <tr>

        <td><TABLE WIDTH=278 BORDER=0 CELLPADDING=0 CELLSPACING=0>

          <TR>

            <TD COLSPAN=3>[img]http://www.more-japan.com/images/cat_right_top.gif[/img]</TD>

          </TR>

          <TR>

            <TD ROWSPAN=8>[img]http://www.more-japan.com/images/cat_right_left.gif[/img]</TD>

            <TD>[img]http://www.more-japan.com/images/cat_right_company.gif[/img]</TD>

            <TD ROWSPAN=8>[img]http://www.more-japan.com/images/cat_right_right.gif[/img]</TD>

          </TR>

          <TR>

            <TD>[img]http://www.more-japan.com/images/cat_right_engine.gif[/img]</TD>

          </TR>

          <TR>

            <TD>[img]http://www.more-japan.com/images/cat_right_suspension.gif[/img]</TD>

          </TR>

          <TR>

            <TD>[img]http://www.more-japan.com/images/cat_right_chassis.gif[/img]</TD>

          </TR>

          <TR>

            <TD>[img]http://www.more-japan.com/images/cat_right_interior.gif[/img]</TD>

          </TR>

          <TR>

            <TD>[img]http://www.more-japan.com/images/cat_right_exterior.gif[/img]</TD>

          </TR>

          <TR>

            <TD>[img]http://www.more-japan.com/images/cat_right_apparel.gif[/img]</TD>

          </TR>

          <TR>

            <TD>[img]http://www.more-japan.com/images/cat_right_blank.gif[/img]</TD>

          </TR>

          <TR>

            <TD COLSPAN=3>[img]http://www.more-japan.com/images/cat_right_bottom.gif[/img]</TD>

          </TR>

        </TABLE></td>

      </tr>

    </table></td>

  </tr>

</table>

<TABLE border=0 cellPadding=0 cellSpacing=0 width=100%>
<TR> 
<TD height=15 class=DialogTitle background="http://www.more-japan.com/xcart/skin1/images/dialog_bg_n.gif" valign=bottom>Kazama Auto</TD>
</TR>
<TR><TD class=DialogBorder><TABLE border=0 cellPadding=10 cellSpacing=1 width="100%">
<TR><TD class=DialogBox>
 [img]/xcart/icon.php?categoryid=250[/img] <table border=0 cellspacing=5>
<tr><td align=left nowrap width=95%>
<font class="ItemsList">Kazama Multi-Link Suspension &amp; Chassis Components</font>

</td>
<td align=right nowrap><font class=Text>
11 products
</font></td>
</tr>
<tr><td align=left nowrap width=95%>
<font class="ItemsList">Interior, Accessories</font>

</td>
<td align=right nowrap><font class=Text>
1 products
</font></td>
</tr>
<tr><td align=left nowrap width=95%>
<font class="ItemsList">Kazama Aero Parts, Accessories</font>

</td>
<td align=right nowrap><font class=Text>
3 products
</font></td>
</tr>
<tr><td align=left nowrap width=95%>
<font class="ItemsList">Kazama Auto All Parts</font>

</td>
<td align=right nowrap><font class=Text>
17 products
</font></td>
</tr>
</table>
<table border=0 width=100% cellpadding=0 cellspacing=0><tr><td class="TableThumbnailBorder">

<table border=0 width=100% cellpadding=5 cellspacing=1>




<td class="DialogBox"></td>
<td class="DialogBox"></td>
<td class="DialogBox"></td>
</tr>

</table>
</td></tr></table>

</TD></TR>
</TABLE></TD></TR>
</TABLE>




</td>
<td width=20></td>
</tr>
</table>

</TD>
</TR>
<SCRIPT>
if (navigator.appName.indexOf('Microsoft')>=0)
document.write("<TR><TD height='100%'>[img]http://www.more-japan.com/xcart/skin1/images/spacer.gif[/img]</TD></TR>" );
else
document.write("<TR><TD><img src=http://www.more-japan.com/xcart/skin1/images/spacer.gif width=1 height=1></TD></TR>" );
</SCRIPT>    
<TR>
<TD>
<table border=0 width=100% cellpadding=0 cellspacing=0 align="center">
<tr><td class=VertMenuBorder>[img]http://www.more-japan.com/xcart/skin1/images/spacer.gif[/img]
</td></tr>
<tr height=22 valign=center align=right>
<td class=Bottom>
<table border=0 width=100% cellpadding=0 cellspacing=0><tr>
<td class=Bottom>Powered by <font class=Bottom>2004 More-Japan</font></td>
<td class=Bottom align=right>Copyright &copy; 2004-2005More Japan</td>
</tr></table>
</td>
</tr>
</table>
</TD></TR>
</TABLE>
</body>
</html>

More-Japan · #6 07-12-2005, 10:00 AM

When I manually delete the spaces that I am cutting and pasting (effectively making just one long string of html *ugh*) everything is fixed

Now, this is really tedious work to do, is there any way to automatically optimize the html for xcart prior to pasting it?

I use Dreamweaver MX

More-Japan · #7 07-12-2005, 10:21 AM

From what i've read Smarty already has a {strip} function that does this...now I suppose the question is how to set xcart to automatically strip any HTML that I put into product category descriptions

More-Japan · #8 07-13-2005, 10:30 AM

Found a good tool to strip down any html you might create for your category descriptions

HTML Compress 5

http://channels.lockergnome.com/windows/archives/20050112_html_compress_54.phtml

Strips white space and carriage returns. My javascripts and dhtml has stayed intact when stripping under 'Normal'

Pro:

Easy to use

Cons:

HTML must be saved in a file to strip. Can't simply cut and paste code to strip