X-Cart forums

[tech@industrialzone.com]

Hello,

The X-Cart version I am using is 4.2.2

Could someone please help me with the design of Clear Cart and Checkout buttons in the Cart Page

I created a new image for the left and right side of the button, but I am unable to align both the sides to create a complete button.

Please find the css for the buttons from skin1/main.css. Let me know where the changes needs to be made. I have tried many changes but in vain.

/*
buttons
*/
/* button-based */
button.button {
border: 0px none;
background-color: transparent;
cursor: pointer;
height: 22px;
margin: 0px;
padding: 0px;
vertical-align: top;
overflow: visible;
outline-style: none;
}
button.button .button-right {
display: block;
background: transparent url(images/but_main_right grey.png) no-repeat right top;
padding: 0px 10px 0px 0px;
height: 22px;
}
button.button .button-left {
display: block;
margin: 0px;
background: transparent url(images/but_main_left grey.png) no-repeat left top;
padding: 0px 5px 0px 15px;
vertical-align: middle;
white-space: nowrap;
font-family: verdana, arial, helvetica, sans-serif;
color: #cc2727;
font-weight: bold;
font-size: 11px;
height: 22px;
line-height: 21px;
}
/* div-based */
div.button {
border: 0px none;
background: transparent none;
cursor: pointer;
margin: 0px;
padding: 0px 10px 0px 0px;
white-space: nowrap;
/*clear cart checkout button right side */
/* background: transparent url(images/but_main_right grey.png) no-repeat right top;*/
float: left;
}
div.button div,
div.button a:link,
div.button a:visited,
div.button a:hover,
div.button a:active
{
display: block;
/* background: transparent url(images/but_main_left grey.png) no-repeat left top;*/
line-height: 21px;
padding: 0px 5px 0px 5px;
white-space: nowrap;
font-family: verdana, arial, helvetica, sans-serif;
color: #111d4d;
font-weight: bold;
font-size: 11px;
text-decoration: none;
outline-style: none;
}
/* button-based link */
button.simple-button {
border: 0px none;
background-color: transparent;
cursor: pointer;
height: 15px;
margin: 3px 0px 0px 0px;
padding: 0px;
white-space: nowrap;
color: #000000;
font-size: 11px;
font-weight: bold;
line-height: 15px;
vertical-align: middle;
outline-style: none;
}
button.simple-button span {
/* text-decoration: underline;*/
}
button.simple-button img {
display: none;
}
/* a-based link */
a.simple-button:link,
a.simple-button:visited,
a.simple-button:hover,
a.simple-button:active
{
font-size: 11px;
white-space: nowrap;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 0px;
line-height: 21px;
vertical-align: bottom;
text-decoration: underline;
outline-style: none;
}
/* input-image-based */
input.image-button {
margin: 0px;
margin-bottom: 1px;
padding: 0px;
border: 0px none;
width: 20px;
height: 20px;
background: transparent url(images/go_red.gif) no-repeat left top;
vertical-align: middle;
}
/* a-image-based */
a.image-button:link,
a.image-button:visited,
a.image-button:hover,
a.image-button:active
{
text-decoration: none;
}
a.image-button:link img,
a.image-button:visited img,
a.image-button:hover img,
a.image-button:active img
{
margin: 0px;
padding: 0px;
border: 0px none;
width: 20px;
height: 18px;
background: transparent url(images/go.gif) no-repeat center center;
vertical-align: middle;
}
/*
Buttons alternative styles
*/
/* highlighted button */
button.main-button .button-right {
/* background: transparent url(images/but_main_right grey.png) no-repeat right top;*/

}
button.main-button .button-left {
/* background: transparent url(images/but_main_left grey.png) no-repeat left top;*/
color: #510000;
}
div.main-button {
/* background: transparent url(images/but_main_right grey.png) no-repeat right top;*/

}
div.main-button div,
div.main-button a:link,
div.main-button a:visited,
div.main-button a:hover,
div.main-button a:active
{
/* background: transparent url(images/but_main_left grey.png) no-repeat left top;*/
color: #510000;
}
button.simple-main-button,
a.simple-main-button:link,
a.simple-main-button:visited,
a.simple-main-button:hover,
a.simple-main-button:active
{
color: #880000;
}
/* Delete cart item button */
a.simple-delete-button:link,
a.simple-delete-button:visited,
a.simple-delete-button:hover,
a.simple-delete-button:active
{
color: #880000;
/*background: transparent url(images/delete_cross.gif) no-repeat left 7px;*/
padding-left: 13px;
}
/* menu button */
button.menu-button {
height: 22px;
}
button.menu-button .button-right {
background: url(images/but_main_right grey.png) no-repeat right top;
padding-right: 7px;
height: 22px;
}
button.menu-button .button-left {
background: url(images/but_main_left grey.png) no-repeat left top;
height: 22px;
/*padding: 0px 1px 0px 8px;*/
color: #000000;
font-size: 10px;
height: 21px;
line-height: 20px;
}
div.menu-button {
/* background: url(images/but_main_right grey.png) no-repeat right top;*/
padding-right: 7px;
}
div.menu-button div,
div.menu-button a:link,
div.menu-button a:visited,
div.menu-button a:hover,
div.menu-button a:active
{
background: url(images/but_main_left grey.png)
no-repeat left top;
padding: 0px 1px 0px 8px;
line-height: 21px;
color: #000000 !important;
font-size: 10px;
}
/*
link-with-arrow
*/
a.simple-arrow-button:link,
a.simple-arrow-button:visited,
a.simple-arrow-button:hover,
a.simple-arrow-button:active
{
padding-left: 10px;
background: transparent url(images/category_bullet_red.gif) no-repeat left 6px;
}
a.simple-arrow-button:hover {
color: #cc2727;
}
.rtl a.simple-arrow-button:link,
.rtl a.simple-arrow-button:visited,
.rtl a.simple-arrow-button:hover,
.rtl a.simple-arrow-button:active
{
padding-left: 0px;
padding-right: 10px;
background: transparent url(images/but_arrow_invert.png) no-repeat right 6px;
}
.button-row a.simple-arrow-button:link,
.button-row a.simple-arrow-button:visited,
.button-row a.simple-arrow-button:hover,
.button-row a.simple-arrow-button:active
{
background-position: left 2px;
}
button.simple-arrow-button img.left-simple-button {
display: inline;
width: 7px;
height: 10px;
background: transparent url(images/but_arrow_grey.png) no-repeat left top;
margin-right: 3px;
vertical-align: bottom;
}

[Shamun]

Saying it doesnt align and giving us the css won't help. It may be due to another selector.
If you could pm me the link to your website, I could check it.

[Industrialzone]

Hello Tal,

I have PM ed you the website.

For anyone else who would like to help, the website is www.industrialzone.com.

Thanks.

[Shamun]

Ok, so heres the problem if anyone else wants to jump in.

The buttons hes talking about is the clear cart, checkout, and update buttons at the bottom of the checkout page. They currently do not display at all in firefox 3+, ie8 or safari 3.
They only partially appear in IE7 but thats where the mis-alignment is.


For industrial:
The css thats used in firefox 3 does not contain any images at all for the buttons, nor does the html. Thats why they arent appearing.

[cflsystems]

You have bigger problem then this. Only IE shows your buttons, all other browsers show only the text and no button images

[Industrialzone]

Hello Tal,

Could you please help me with the solution. I am currently using IE 8.0 and all the buttons appear correctly except the clear cart and checkout buttons.

Also regarding the firefox , could you please explain what should be done.I did not change anything in firefox file.


Thanks

[Shamun]

It shows up in IE8 because your (almost positively) in compatibility mode, which uses display settings similar to IE7.

Your best bet is to copy the way the checkout button at the top right is and port it to the bottom ones.

[Industrialzone]

Hello Tal,

Thanks for the reply.

Do you know why this error occurs...the same website is working fine in my development server where all the buttons are displayed.

The browser used is IE7.

[Shamun]

Originally Posted by Industrialzone

Hello Tal,

Thanks for the reply.

Do you know why this error occurs...the same website is working fine in my development server where all the buttons are displayed.

The browser used is IE7.

Because IE7 and below doesn't comply with web standards set by the w3c.
All you really need to know is that IE7 and below will always need a seperate css file.

Firefox complies with the standards and generally its a good idea to design in that first. Then once you get the site looking like what you want, then make an IE7 css file and change what needs to be.
IE6 will also need a different css than IE7 and the normal one.

See why IE sucks? :P


But my tips to get this fixed
1) Download firefox http://www.mozilla.com/firefox/
2) Get firebug (an addon for firefox) https://addons.mozilla.org/en-US/firefox/addon/1843
This will let you change css and html code in firefox. This is essential and is a VERY useful add-on.
3) Start hacking the top right buttons into the bottom ones css.
4) Once it looks good, open up the css file and copy the changes over.


Thats how I design. When its looking all spiffy in firefox and working like you want, check it out in IE8. If it doesnt look good, theres some code somewhere like
<!--[if IE 6]>

HTML that only executes in IE6

<![endif]-->

That will let you set specific css files per IE version.

IE8 has a built-in thing like firebug, just press F12 to get it. Its not as fast or versatile as firebug, but its better than nothing.

Once its good in IE8, turn compatability mode on. This will use IE7 standards.
Same concept as above with the code.

Once good in IE7, if you want you can make an IE6 css or just check this out:
http://ie6update.com/

[tech@industrialzone.com]

Hey Tal,

Thank you for the tips.I will work on them.