X-Cart forums

[swifty1]

Hi
I have changed the add to cart Big Button to have a red background, leaving all of the original CSS code and HTML code only changing the file name to point to the new images
BACKGROUND-IMAGE: URL(../../images/tab_bg2.gif); and creating a new copy of the CSS code with new name etc to allow the change in colour to happen.All works ok in ie7/8 and FF but in ie6 the center of the button is white with no visable text.
Has anybody got a solution around this and why has this button got to have 6 img's and not be the same layout as the rest of the buttons in x-cart which have 3 img's?

[Victor D]

Q.:

Has anybody got a solution around this and why has this button got to have 6 img's and not be the same layout as the rest of the buttons in x-cart which have 3 img's?

This is a BIG button isn't it?

for center part of this button you should also change background-color

[swifty1]

Hi Victor

yes it is BIG button with fast lane Checkout selected.

Do you mean the background-color in /skin1/modules/Fast_Lane_Checkout/skin1.css ?

I changed the color of the new BIG button by copying the original images for this button into photoshop then filling with red and saving as new BIG button then renaming the img files in the new bigbutton.tpl.

Are you saying that all i needed to do was change the background-color (hex value) in the CSS files for the BIG button?

[Victor D]

Yes. You changed rounded corners but the central part of this button has plain background color specified in CSS

[swifty1]

I have tried BACKGROUND-COLOR: #DA1203; with TEXT-COLOR; #FEFEFE which does change the center part to red with white text in IE7/8 and FF but in IE6 it remains white with white text, for some reason IE6 does not recognise BACKGROUND-COLOR:
I have changed the TEXT-COLOR to #000000 so that it shows up in all the browsers but black text in red is not good, it should be white text.

Does IE6 follow the HTML rather than CSS as i had to remove the font color from the HTML code to prevent the white text in IE6 and allow the CSS TEXT-COLOR to #000000 to be shown.

Copy of HTML code
<tr>
<td width="9" style="background-repeat: repeat-y; background-image: url({$ImagesDir}/tab_left_2{$sfx}.gif);"><img src="{$ImagesDir}/spacer.gif" class="BBCorner" alt="" /></td>
<td class="{$bg_title_class}"{$reading_direction_tag}> &nbsp;<font color="#">{$button_title}&nbsp;{if $arrow eq "Y"}<img src="{$ImagesDir}/rarrow_flc_2.gif" class="BBCorner" alt="" />{/if}</font></td>
<td width="9" style="background-repeat: repeat-y; background-image: url({$ImagesDir}/tab_right_2{$sfx}.gif);"><img src="{$ImagesDir}/spacer.gif" class="BBCorner" alt="" /></td>
</tr>
Any ideas as to what is happning?

[Victor D]

remove FONT
add space here: class="{$bg_title_class}"{$reading_direction_tag}
class="{$bg_title_class}" {$reading_direction_tag}
what do you pass in $bg_title_class variable?

[swifty1]

Not sure what you are telling me to do or what you mean by "what do you pass in $bg_title_class variable?"

[Victor D]

<td class="{$bg_title_class}"

This means you should specify value for bg_title_class while including big_button.tpl

for example
{incude file="..." bg_title_class="default" }
and then in your css

td.default {
background: #ff0000 none;
}

[swifty1]

Victor i have done the following but the IE6 problem is still there

In big_button1.tpl is the following-

{assign var="bg_title_class" value="YellowBackground2"}
{assign var="sfx" value=""}
{/if}
<table cellspacing="0" cellpadding="0" onclick="{$js_link}" style="cursor: pointer;" dir="ltr">
<tr>
<td width="9" style="background-repeat: no-repeat; background-image: url({$ImagesDir}/top_cl_2{$sfx}.gif);"><img src="{$ImagesDir}/spacer.gif" class="BBCorner" alt="" /></td>
<td height="9" style="background-repeat: repeat-x; background-image: url({$ImagesDir}/top_b_2{$sfx}.gif);"><img src="{$ImagesDir}/spacer.gif" class="BBCorner" alt="" /></td>
<td width="9" style="background-repeat: no-repeat; background-image: url({$ImagesDir}/top_cr_2{$sfx}.gif);"><img src="{$ImagesDir}/spacer.gif" class="BBCorner" alt="" /></td>
</tr>

<tr>
<td width="9" style="background-repeat: repeat-y; background-image: url({$ImagesDir}/tab_left_2{$sfx}.gif);"><img src="{$ImagesDir}/spacer.gif" class="BBCorner" alt="" /></td>
<td class="{$bg_title_class}"{$reading_direction_tag}> &nbsp;<font color="#">{$button_title}&nbsp;{if $arrow eq "Y"}<img src="{$ImagesDir}/rarrow_flc_2.gif" class="BBCorner" alt="" />{/if}</font></td>
<td width="9" style="background-repeat: repeat-y; background-image: url({$ImagesDir}/tab_right_2{$sfx}.gif);"><img src="{$ImagesDir}/spacer.gif" class="BBCorner" alt="" /></td>
</tr>

<tr>
<td width="9" style="background-repeat: no-repeat; background-image: url({$ImagesDir}/tab_cl_2{$sfx}.gif);"><img src="{$ImagesDir}/spacer.gif" class="BBCorner" alt="" /></td>
<td height="9" style="background-repeat: repeat-x; background-image: url({$ImagesDir}/tab_bt_2{$sfx}.gif);"><img src="{$ImagesDir}/spacer.gif" class="BBCorner" alt="" /></td>
<td width="9" style="background-repeat: no-repeat; background-image: url({$ImagesDir}/tab_cr_2{$sfx}.gif);"><img src="{$ImagesDir}/spacer.gif" class="BBCorner" alt="" /></td>
</tr>


In /skin1/modules/Fast_Lane_Checkout/skin1.css is the following-

.YellowBackground2 {
{*BACKGROUND-IMAGE: URL(../../images/tab_bg2.gif);*}
BACKGROUND-COLOR: #000000;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
TEXT-ALIGN: center;
TEXT-COLOR: #fefefe;

}

To allow the button to appear in all browsers i have omitted {*BACKGROUND-IMAGE: URL(../../images/tab_bg2.gif);*}
This img is red in color in IE7/8 and FF but in IE6 the background is white.
I have changed both TEXT-COLOR: #fefefe; BACKGROUND-COLOR: #000000;
to different colors but it makes no difference in IE6.

May be i am missing something simple.....?

[Victor D]

This is CSS file so you should use
/*BACKGROUND-IMAGE: URL(../../images/tab_bg2.gif);*/

instead of

{*BACKGROUND-IMAGE: URL(../../images/tab_bg2.gif);*}
to comment the line.

All browsers skip the invalid css lines but IE6 possibly skips the next rule after this one also.

To check this you can change your CSS to

{*BACKGROUND-IMAGE: URL(../../images/tab_bg2.gif);*}
 TEXT-COLOR: #fefefe;
 BACKGROUND-COLOR: #000000;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
TEXT-ALIGN: center;

I suppose you will get right background color but font-color won't be applied.

PS AFAIK there is no valid property TEXT-COLOR. The right variant is COLOR