Add To Cart - OrderProgress

Hi,

The Add To Cart feature on my site displays differently between FireFox & IE 8 Browser. The FireFox Browser show the GREEN LIGHT as each order step goes from (Cart, Address, Shipping) while IE 8 doesn't show the GREEN LIGHT.

FireFox Screenshot:
http://i1116.photobucket.com/albums/k576/afg_chandler/American%20Furniture%20Galleries/ScreenShots/screenshot_firefox.jpg

IE 8 Screenshot:
http://i1116.photobucket.com/albums/k576/afg_chandler/American%20Furniture%20Galleries/ScreenShots/screenshot_ie.jpg

Here's the UL for your reference although I don't think this is this place:
<ul>
        <li>
            <span id="ctl00_ctl00_cph1_cph1_OrderProgressControl_lblCart" class="ActiveStep">Cart</span></li>
        <li>
            <span id="ctl00_ctl00_cph1_cph1_OrderProgressControl_lblAddress" class="InactiveStep">Address</span></li>
        <li>
            <span id="ctl00_ctl00_cph1_cph1_OrderProgressControl_lblShipping" class="InactiveStep">Shipping</span></li>
        <li>
            <span id="ctl00_ctl00_cph1_cph1_OrderProgressControl_lblPayment" class="InactiveStep">Payment</span></li>
        <li>
            <span id="ctl00_ctl00_cph1_cph1_OrderProgressControl_lblConfirm" class="InactiveStep">Confirm</span></li>
        <li>
            <span id="ctl00_ctl00_cph1_cph1_OrderProgressControl_lblComplete" class="InactiveStep">Complete</span></li>
</ul>

Any idea where I should look into fixing this issue? Many thanks!

tombanh wrote:

Hi ,
I had seen the screen shots.

Looking this is CSS problem.
First cross check is there seperate css files for IE and Firefox.If two are there use one css for all browsers.
If one there  corss check  styles.css  of your theme there you can find css classes " .order-progress ul li .active-step " and "order-progress ul li .inactive-step."
Here change images as you need...just try this....!!!!!!
If any browser specification mentioned for this you can make it common for all browsers.

Hi,

I have cross checked very carefully and there's only one 'cart-checkout-order.css" file that specifies the ".order-progress ul li .active-step " and "order-progress ul li .inactive-step." Although I was able to fix the alignment issues from this CSS file and thanks to you.

I even tried changing active and inactive images from 'gif' to 'jpg' and 'png', but still it had no effect on IE Browser. Unfortunately, there's no browser spec mentioned for this at all.

Here's the codes from the CSS file:

.OrderProgress
{
  height: 40px;
  margin: 0 auto;
  text-align: center;
  border-bottom: solid 1px #6a6a6a;
}

.OrderProgress ul
{
  padding: 0;
  margin: 0;
}

.OrderProgress ul li
{
  list-style: none;
  display: inline;
  padding: 5px 20px 0 20px;
}

.OrderProgress ul li .ActiveStep
{
  color: #6a6a6a;
  background: url('images/progress-step-active.gif') no-repeat 50% 50%;
  padding-bottom: 40px;
  padding-right: 1px;
}

.OrderProgress ul li .InactiveStep
{
  color: #d7d7d7;
  background: url('images/progress-step-inactive.gif') no-repeat 50% 50%;
  padding-bottom: 40px;
  padding-right: 1px;
}

HERE'S THE CODE BEHIND FOR THIS:

//------------------------------------------------------------------------------

using System;
using System.Collections;
using System.ComponentModel;
using System.Configuration;
using System.Data;
using System.Text;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using NopSolutions.NopCommerce.Common;
using NopSolutions.NopCommerce.Common.Utils;

namespace NopSolutions.NopCommerce.Web.Modules
{
    public partial class OrderProgressControl : BaseNopUserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                SetStatus();
            }
        }

        private void SetStatus()
        {
            lblCart.CssClass = GetStatusCss("Cart");
            lblAddress.CssClass = GetStatusCss("Address");
            lblShipping.CssClass = GetStatusCss("Shipping");
            lblPayment.CssClass = GetStatusCss("Payment");
            lblConfirm.CssClass = GetStatusCss("Confirm");
            lblComplete.CssClass = GetStatusCss("Complete");
        }

        public string GetStatusCss(string step)
        {
            if (this.OrderProgressStep == step)
                return "ActiveStep";
            else
                return "InactiveStep";
        }

        public string OrderProgressStep
        {
            get
            {
                object obj2 = this.ViewState["OrderProgressStep"];
                if (obj2 != null)
                    return (string)obj2;
                else
                    return string.Empty;
            }
            set
            {
                this.ViewState["OrderProgressStep"] = value;
            }
        }
    }
}

Any helpful is deeply appreciated!

Hi ,
I had gone through the coding , i found nothing wrong there....
No issue with the code...

Just...do this..on your  local/online  site ..

Change the theme to Nopcommerce stranded  theme "DarkOrnage"  and check whether you are facing the  same  problem.
If it works well for DarkOrnage theme then the issue might be  with the theme you are using for your site..then contact the theme designers...

Hi, currently I am using the DarkOrange theme. I suppose you want me to change to NopCommerce theme? I don't think contacting theme designer since NopCommerce provide support.

v1.8  works fine for me in IE8  - green light on every page

are you sure you didn't change the css or move a file ?

try clearing the browser ( firefox + IE) caches  and see what happens?

- hayden

POSITIVE!

Regards,

Hi,

If this is an Upgrade issue, then it is painful! I was hoping to get the site up and running Live before doing the Upgrade gradually.

Any other tips would be very helpful. Does anybody have the ORIGINAL CSS FILE I can compare the coding between the old and new version?

Regards,

it's not an upgrade issue

if you downloaded the source code 1st time around then you can unzip the .rar again and get it there or you can download it again

https://www.nopcommerce.com/downloads.aspx


another possibility might be that you have added a duplicate style rule which supercedes the default ones or you've edited the <div> in the control ??


- hayden

--->or you've edited the <div> in the control ??<----

Hi,

Can you tell me where exactly is the "<div> in the control" ??