X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)
-   -   Formatting gone awry... what the heck is that doing over THERE!? (https://forum.x-cart.com/showthread.php?t=24931)

pinklinoleum 09-14-2006 02:50 PM
Formatting gone awry... what the heck is that doing over THERE!?
 
hey XCART pros out there..... i have messed with every .tpl file that i think could possibly cause this problem.

on certain pages, some of the content is getting smushed into the far right hand side. i have the body of the site set to 90% width in the customer/home.tpl file.... so how the heck can it find its way over there?? i dont know when this started happening.... but it was fine at one point, and then......... AHH!

also... my admin area looks like a wreck on all pages. all the content is there, but the formatting is all screwy. this seems like a related problem


SITE IN PROGRESS:
http://www.motonekoparts.com

....to see the worst of it, put something in the cart, and then click checkout
NOTE: the icons in the "featured brands section on the home page dont work, you have to select a category from the left navigation to get to the products. =)



i dunno.... its makin me grumpy! if anyone has any pointers that can send me in the right direction it would be greatly appreciated! thanks everyone

inebriate 09-14-2006 03:16 PM
Re: Formatting gone awry... what the heck is that doing over THERE!?
 
it looks even more chaotic in opera...

post your skin1.css and skin1/customer/home.tpl and skin1/rectangle_top.tpl

pinklinoleum 09-14-2006 04:20 PM
Re: Formatting gone awry... what the heck is that doing over THERE!?
 
man... i haven't dared to look at it in other browsers yet!

here's my skin1.css
Code:
SKIN.CSS

BODY,DIV,TH,TD,P,INPUT,SELECT,TEXTAREA,TT {
        FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif;
        COLOR: #000000; FONT-SIZE: 10px;
}
A:link {
        COLOR: #000000; TEXT-DECORATION: none;
}
A:visited {
        COLOR: #000000; TEXT-DECORATION: none;
}
A:hover {
        COLOR: #00000; TEXT-DECORATION: underline;
}
A:active  {
        COLOR: #000000; TEXT-DECORATION: none;
}
H1 {
        FONT-SIZE: 15px;
}
H2 {
        FONT-SIZE: 13px;
}
H3 {
        FONT-SIZE: 12px;
}
HR {
        COLOR: #DDDDDD; HEIGHT: 1px;
}
BODY {
        MARGIN-TOP: 5 px; MARGIN-BOTTOM: 0 px; MARGIN-LEFT: 83 px; MARGIN-RIGHT: 0 px;
}
.HeadBox {
        BACKGROUND-COLOR: #000000;
}
.HeadText {
        FONT-SIZE: 12px; FONT-WEIGHT: bold;
}
.HeadLine {
        BACKGROUND-COLOR: #FFD44C;
}
.VertMenuCategories        { color: #000000; text-decoration: none; }

.VertMenuCategories:link      { color: #000000; text-decoration: none }

.VertMenuCategories:visited    { color: #000000; text-decoration: none }

.VertMenuCategories:hover  { color: #000000; text-decoration: none }

.VertMenuCategories:active      { color: #000000; text-decoration: none }

.VertMenuBox
        BACKGROUND-COLOR: transparent;
}
.VertMenuBorder {
        BACKGROUND-COLOR: transparent;
}
.VertMenuTitle {
        BACKGROUND-COLOR: #000000;
        COLOR: #FFFFFF; FONT-WEIGHT: bold; font-style: italic; FONT-SIZE: 11px;  text-indent: 5px;
        TEXT-TRANSFORM: uppercase,
}

.VertMenuFont {
        background-color: none;
        color: #FFFFFF;
        font-weight: bold;
        padding: 1px;
text-indent: 3px;
      TEXT-TRANSFORM: uppercase
}
.transON {opacity:.85;filter: alpha(opacity=85); -moz-opacity: .85;}

.transOFF {opacity:.60;filter: alpha(opacity=60); -moz-opacity: 0.6;}

.VertMenuItems{
        COLOR: #000000; TEXT-DECORATION: none; text-indent: 3px;
}
.VertMenuItems:link {
        COLOR: #000000; TEXT-DECORATION: none;
}
.VertMenuItems:visited {
        COLOR: #000000; TEXT-DECORATION: none;
}
.VertMenuItems:hover {
        COLOR: #000000; TEXT-DECORATION: none;
}
.VertMenuItems:active  {
        COLOR: #000000; TEXT-DECORATION: none;
}
.VertMenuHr {
        COLOR: #999999;
}
.SubCatBox {
        BACKGROUND-COLOR:#EEEEEE; cellpadding:10px;
}
.CategoriesList {
        FONT-SIZE: 10px;
      TEXT-TRANSFORM: uppercase; text-indent: 5px;
}
.DialogBox{
        BACKGROUND-COLOR: transparent;
}
.DialogSubBox{
        BACKGROUND-COLOR:transparent; BORDER: #8A8A8A 1px solid;
}
.DialogBorder {
        BACKGROUND-COLOR: transparent;
}
.DialogTitle {
        BACKGROUND-COLOR: #000000;
        COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-SIZE: 11px;
        TEXT-TRANSFORM: uppercase
}
.NumberOfArticles {
        COLOR: #000000; FONT-WEIGHT: bold;
}
.TopLabel {
        COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.Text {
        COLOR: #000000;
}
.DecorTr {
        COLOR: #000000;
}
.AdminSmallMessage {
        COLOR: #FF3300;
}
.AdminTitle {
        COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.Line {
        BACKGROUND-COLOR: #00000;
}
.ProductTitle {
        COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductTitleHidden {
        COLOR: #666666; FONT-WEIGHT: bold; FONT-SIZE: 11px;
}
.ProductDetailsTitle {
        COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductDetails {
        COLOR: #000000;
}
.ProductPriceTitle {
        COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductPriceConverting {
        COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductPrice {
        COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductPriceSmall {
        COLOR: #FF3300; FONT-WEIGHT: bold;
}
.MarketPrice {
                FONT-SIZE: 14px; FONT-FAMILY: Times New Roman;
}
.ItemsList {
        BACKGROUND-COLOR: #000000;
        COLOR: #FFFFFF; FONT-WEIGHT: bold; ; FONT-SIZE: 10px;          padding: 5px;

}
#Disabled {
        COLOR: #909090;
}
.NavigationPath {
        COLOR: #CC6666; FONT-WEIGHT: bold; TEXT-DECORATION: none;
}
.NavigationPath:link {
        COLOR: #CC6666; FONT-WEIGHT: bold; TEXT-DECORATION: underline;
}
.NavigationPath:visited {
        COLOR: #CC6666; FONT-WEIGHT: bold; TEXT-DECORATION: underline;
}
.NavigationPath:hover {
        COLOR: #CC6666; FONT-WEIGHT: bold; TEXT-DECORATION: none;
}
.NavigationPath:active  {
        COLOR: #CC6666; FONT-WEIGHT: bold; TEXT-DECORATION: underline;
}
.FormButton {
        COLOR: #330000; FONT-WEIGHT: bold;
}
.Button {                               
                FONT-FAMILY: Arial;
                BACKGROUND: URL(images/butbg.gif);
                BACKGROUND-COLOR: #FF8600;
                COLOR: #FFFFFF; FONT-WEIGHT: bold;
                FONT-SIZE: 11px;
                TEXT-DECORATION: none;
}
.CustomerMessage {
        COLOR: #FF3300; FONT-WEIGHT: bold;
}
.ErrorMessage {
        COLOR: #FF3300; FONT-WEIGHT: bold;
}
.Star {
        COLOR: #FF0000;
}
.HighLight {
                BACKGROUND-COLOR: #FFFFCC;
}
.SaveMoneyLabel {
        COLOR: #FFFFFF; FONT-WEIGHT: bold;
}
.TableHead {
        BACKGROUND-COLOR: #CCCCCC; FONT-WEIGHT: bold;
}
.TableSubHead {
    BACKGROUND-COLOR: #EEEEEE;
}
.TableLine {
    BACKGROUND-COLOR: #F0F0F0;
}
.SmallNote:link {
        COLOR: #7C4C00; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.SmallNote:visited {
        COLOR: #7C4C00; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.SmallNote:hover {
        COLOR: #7C4C00; TEXT-DECORATION: underline; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.SmallNote:active {
        COLOR: #7C4C00; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.SmallText {
        COLOR: #7C4C00; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.Bottom {
        BACKGROUND-COLOR: #000000; COLOR: #8E4B00;
}
.Tab {
        BACKGROUND-COLOR: #000000;
        FONT-WEIGHT: bold;
        TEXT-TRANSFORM: uppercase;
}
.CatMenuItemOff
{
    BACKGROUND-COLOR: transparent;              /* like "VertMenuBox" */
    BORDER-RIGHT: none;        /* like "VertMenuBox" */
    BORDER-TOP: none;          /* like "VertMenuBox" */
    BORDER-LEFT: none;        /* like "VertMenuBox" */
    BORDER-BOTTOM: none;      /* like "VertMenuBox" */
    MARGIN-BOTTOM: 0px;
    MARGIN-TOP: 0px;
    MARGIN-LEFT: 0px;
    MARGIN-RIGHT: 0px;
    CURSOR: pointer;
}
.CatMenuItemOffExp
{
    BACKGROUND-COLOR: transparent;              /* like "VertMenuBox" */
    BORDER-RIGHT: none;        /* like "VertMenuBorder" */
    BORDER-TOP: none;          /* like "VertMenuBorder" */
    BORDER-LEFT: none;        /* like "VertMenuBorder" */
    BORDER-BOTTOM: none;      /* like "VertMenuBorder" */
    MARGIN-BOTTOM: 0px;
        MARGIN-TOP: 0px;
        MARGIN-LEFT:0px;
    MARGIN-RIGHT: 0px; 
    CURSOR: pointer;
}
.CatMenuItemOn
{ 
    BACKGROUND-COLOR: none;              /* like "VertMenuTitle" */
    BORDER-RIGHT: none;        /* like "VertMenuBorder" */
    BORDER-TOP: none;          /* like "VertMenuBorder" */
    BORDER-LEFT: none;        /* like "VertMenuBorder" */
    BORDER-BOTTOM: none;      /* like "VertMenuBorder" */
    MARGIN-BOTTOM: 0px;
        MARGIN-TOP: 0px;
        MARGIN-LEFT: 0px;
    MARGIN-RIGHT: 0px; 
    CURSOR: pointer;
}
.CatSubMenu
{
    BACKGROUND-COLOR: none;              /* like "VertMenuBox" */
    BORDER-RIGHT: #8E4B00 1px solid;        /* like "VertMenuBorder" */
    BORDER-TOP: #8E4B00 1px solid;          /* like "VertMenuBorder" */
    BORDER-LEFT: #8E4B00 1px solid;        /* like "VertMenuBorder" */
    BORDER-BOTTOM: #8E4B00 1px solid;      /* like "VertMenuBorder" */
    MARGIN-LEFT: 0px;
    MARGIN-RIGHT: 0px;
}
.Subs
{    BORDER: #8E4B00 1px solid;
}
.CatMenuItem
{
    FONT-SIZE: 10px;
    FONT-FAMILY: Arial;
    CURSOR: pointer;
}
.CatMenuItem:link
{
    COLOR: #FFFFFF;                        /* like "VertMenuItems" */
}
.CatMenuItem:visited
{
    COLOR: #330000;                        /* like "VertMenuItems" */
}
.CatMenuItem:hover
{
    COLOR: #330000;                        /* like "VertMenuTitle" */
}
.CatMenuItem:active
{
    COLOR: #330000;                        /* like "VertMenuItems" */
}
.NavDialogTitle {
    font-size: 11px;
    font-weight: bold;
    color: #330000;
} 
.NavDialogBorder {
    background-color: #FFCC33;
}
.NavDialogBox {
    background-color: #FFFFCC;
}
.PopupHelpLink {
        FONT-SIZE: 9px;
        COLOR: #330000;
        TEXT-DECORATION: none;
}
.SubHeader2 {
        COLOR: #000000;
        font-size: 11px;
        FONT-WEIGHT: bold;
}
.SubHeader2Line {
        BACKGROUND-COLOR: #000000;
}
.HightLightRow {
        BACKGROUND-COLOR: #B0B0B0;
        font-weight: bold;
}
.HightLightEqualRow {
        BACKGROUND-COLOR: #ffe8af;
}
.VertMenuSubTitle {
        BACKGROUND-COLOR: #FFFFFF;
}
.SpecialOffersPrice {
        COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 14px;
}

pinklinoleum 09-14-2006 04:20 PM
Re: Formatting gone awry... what the heck is that doing over THERE!?
 
and customer/home.tpl

Code:
{* $Id: home.tpl,v 1.67.2.10 2005/10/31 11:36:14 max Exp $ *}
{config_load file="$skin_config"}
<HTML>
<HEAD>
<TITLE>
{if $config.SEO.page_title_format eq "A"}
{section name=position loop=$location}
{$location[position].0|escape}
{if not %position.last%} :: {/if}
{/section}
{else}
{section name=position loop=$location step=-1}
{$location[position].0|escape}
{if not %position.last%} :: {/if}
{/section}
{/if}
</TITLE>
{ include file="meta.tpl" }
<LINK rel="stylesheet" href="{$SkinDir}/{#CSSFile#}">
</HEAD>
<BODY  background="{$ImagesDir}/bg.gif" style="background-repeat: no-repeat" leftmargin="0" topmargin="0" rightmargin="0" bottomargin="0" marginwidth="0" marginheight="0">
{ include file="rectangle_top.tpl" }
{ include file="head.tpl" }
{if $active_modules.SnS_connector}
{include file="modules/SnS_connector/header.tpl"}
{/if}
<!-- main area -->
<TABLE border="0" width="90%" cellpadding="0" cellspacing="0" align="left">
<TR>
<TD width="6" rowspan="2">>&nbsp;</TD>
<TD width="150" align= "left" valign="top">
{if $categories ne "" and ($active_modules.Fancy_Categories ne "" or $config.General.root_categories eq "Y" or $subcategories ne "")}
{ include file="customer/categories.tpl" }
<BR>
{/if}
{if $active_modules.Bestsellers ne "" and $config.Modules.bestsellers_menu eq "Y"}
{***** include file="modules/Bestsellers/menu_bestsellers.tpl" *****}
{/if}
{if $active_modules.Manufacturers ne "" and $config.Modules.manufacturers_menu eq "Y"}
{ include file="modules/Manufacturers/menu_manufacturers.tpl" }
{/if}
{*****include file="customer/special.tpl"*****}
<BR>
{if $login eq "" }
{ include file="auth.tpl" }
<BR>
{/if}
{ include file="customer/menu_cart.tpl" }
<BR>
{if $login eq "" }
{ include file="news.tpl" }
{else}
{ include file="authbox.tpl" }
{/if}
<BR>
{ include file="help.tpl" }
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<IMG src="{$ImagesDir}/spacer.gif" width="150" height="1" border="0">
</TD>
<TD width="30">&nbsp;&nbsp;</TD>
<TD valign="top">

<!-- central space -->
{include file="customer/home_main.tpl"}
</TR>
</TABLE>
</BODY>
{ include file="rectangle_bottom.tpl" }
</HTML>

pinklinoleum 09-14-2006 04:21 PM
Re: Formatting gone awry... what the heck is that doing over THERE!?
 
and lastly... the rectangletop.tpl

Code:
{* $Id: rectangle_top.tpl,v 1.13.2.7 2005/09/06 11:07:44 max Exp $ *}
{ include file="common_js.tpl"}
{if $config.Adaptives.isJS eq '' && $config.Adaptives.is_first_start eq 'Y'}
<SCRIPT id="adaptives_script" type="text/javascript" language="JavaScript 1.2"></SCRIPT>
<SCRIPT type="text/javascript" language="JavaScript 1.2">
if (document.getElementById('adaptives_script'))
    document.getElementById('adaptives_script').src = "{$current_location}/adaptive.php?send_browser="+(localIsDOM?"Y":"N")+(localIsStrict?"Y":"N")+(localIsJava?"Y":"N")+"|"+localBrowser+"|"+localVersion+"|"+localPlatform+"|"+(localIsCookie?"Y":"N")+"|"+screen.width+"|"+screen.height+"|{$usertype}";
</SCRIPT>
{/if}
<TABLE align="center" border="0" cellpadding="0" cellspacing="0" width="{$width|default:"100%"}" height="100%">
  <TR>
    <TD valign="top"><DIV style="position: absolute;" id="div_null"></DIV>


thanks a ton for your time! =)

inebriate 09-14-2006 05:44 PM
Re: Formatting gone awry... what the heck is that doing over THERE!?
 
will have a look at everything later on...when you say 90% body, do you mean the entire site or the main area, headers, footers, etc.?

pinklinoleum 09-14-2006 06:01 PM
Re: Formatting gone awry... what the heck is that doing over THERE!?
 
i am referring to:


<!-- main area -->
<TABLE border="0" width="90%" cellpadding="0" cellspacing="0" align="left">



in the customer/home.tpl

pinklinoleum 09-14-2006 06:13 PM
Re: Formatting gone awry... what the heck is that doing over THERE!?
 
when i change that code to:


<!-- main area -->
<TABLE border="0" width="100%" cellpadding="0" cellspacing="0" align="left">

... i get some content showing up at the bottowm, below the navigation (instead of smushed to the right with the 90% width)


i was hoping to acheive a 90% width for the entire contents of the main area.

thanks again

pinklinoleum 09-14-2006 09:40 PM
Re: Formatting gone awry... what the heck is that doing over THERE!?
 
hey there... i think i might have got it! man.... that home.tpl file is very picky!!! will you check it out in safari and see how the formating looks?

inebriate 09-14-2006 09:58 PM
Re: Formatting gone awry... what the heck is that doing over THERE!?
 
dont have safari, but it still looks garbled in Opera, everything is aligned to the left and takes about 50% width, also everything is in different order compared to firefox...from top to bottom: cart, authentication, login, home_main, categories, parts, accessories...the footer is also squished to like 20% width

pinklinoleum 09-15-2006 06:13 AM
Re: Formatting gone awry... what the heck is that doing over THERE!?
 
bummer... i have been using safari to test everything.

any thoughts on how i might correct the formatting to show up the way it's supposed to in other browsers?

pinklinoleum 09-15-2006 08:07 PM
Re: Formatting gone awry... what the heck is that doing over THERE!?
 
hi again!

i have been playing with the customer/home.tpl file, and now i at least gotten consistant results when i test the site in various browsers....

but... i'm still having issues! (there is always something, huh?)
anyway, i'm stumped! if you want a challenge, here is the revised version of my home.tpl file.

my goal is to have the main content area be left justified..... but also set at 90% width. this way, the contents of my dialog boxes will resize and space out their contents depending on the size of the viewers window.

with an older home.tpl i had this working in Safari, but it didnt look right in other browsers. the way it is now, the main content only scales to 90% width on a product detail page, but no other pages. so weird!? all of my contents in their respective .tpl files is set to 100% width.

>>>why is the table in the home.tpl that holds {include file="customer/home_main.tpl"} not sizing itself to the 100% width property for all the min contents?<<<

anyway.... thanks again for your time!

Code:
{* $Id: home.tpl,v 1.67.2.10 2005/10/31 11:36:14 max Exp $ *}
{config_load file="$skin_config"}
<HTML>
<HEAD>
<TITLE>
{if $config.SEO.page_title_format eq "A"}
{section name=position loop=$location}
{$location[position].0|escape}
{if not %position.last%} :: {/if}
{/section}
{else}
{section name=position loop=$location step=-1}
{$location[position].0|escape}
{if not %position.last%} :: {/if}
{/section}
{/if}
</TITLE>
{ include file="meta.tpl" }
<LINK rel="stylesheet" href="{$SkinDir}/{#CSSFile#}">
</HEAD>
<BODY  background="{$ImagesDir}/backgrd.gif" style="background-repeat: no-repeat" leftmargin="0" topmargin="0" rightmargin="0" bottomargin="0" marginwidth="0" marginheight="0">
{ include file="rectangle_top.tpl" }
{ include file="head.tpl" }
{if $active_modules.SnS_connector}
{include file="modules/SnS_connector/header.tpl"}
{/if}
<TABLE width= "90%" border="1" cellpadding="0" cellspacing="0" align="left">
        <TR>
                <TD width="150" border="0" align= "left" valign="top">
                        <table valign="top" border="1"><tr><td valign="top" border="1">
                        {if $categories ne "" and ($active_modules.Fancy_Categories ne "" or $config.General.root_categories eq "Y" or $subcategories ne "")}
                        { include file="customer/categories.tpl" }{/if}
                        {if $active_modules.Manufacturers ne "" and $config.Modules.manufacturers_menu eq "Y"}
                        { include file="modules/Manufacturers/menu_manufacturers.tpl" }{/if}</td></tr></table>
                </TD>

                <TD border="0" valign="top">

                        <!-- central space --><table width=100%  border="1" valign="top"><tr><td valign="top">
                        {include file="customer/home_main.tpl"}</td></tr></table>
                </td>
        </TR>
</TABLE>
</BODY>
</HTML>

inebriate 09-15-2006 08:31 PM
Re: Formatting gone awry... what the heck is that doing over THERE!?
 
Quote:
Originally Posted by pinklinoleum
>>>why is the table in the home.tpl that holds {include file="customer/home_main.tpl"} not sizing itself to the 100% width property for all the min contents?<<<

Code:
                <TD border="0" valign="top">

                        <!-- central space --><table width=100%  border="1" valign="top"><tr><td valign="top">
                        {include file="customer/home_main.tpl"}</td></tr></table>
                </td>

remove the table inside,...change the code up top to:
Code:
                <TD border="0" valign="top">
                        {include file="customer/home_main.tpl"}
                </td>

pinklinoleum 09-15-2006 09:31 PM
Re: Formatting gone awry... what the heck is that doing over THERE!?
 
i took out the table.... but it didn't change anything. weird huh?

in opera, all main content pages are as wide as the contents in them,

it's the same in safari, except for the product details, which actually scale to 100% width like they are supposed to.


is it hopeless?


All times are GMT -8. The time now is 03:13 AM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.