Event Payment not working in IE8

Stacey Chase

We have an event page set up but ticket purchasers cannot complete their payment process because the spaces to enter the expiration date are not appearing.  It seems to only be happening in IE8 but we still have a lot of customers using IE8 - any suggestions?

Daniel Hartanto

Hi Stacey

 

Do you have the link to the troubled page? if you may share that with us in case if we could be of any help 

 

regards,

 

Daniel

Stacey Chase

Daniel Hartanto:

Hi Stacey

 

Do you have the link to the troubled page? if you may share that with us in case if we could be of any help 

 

regards,

 

Daniel

Sure, and again, this only happens in Internet Explorer 8, www.bethematchfoundation.org/fieldsclub.

 

I tried to send the link to the actual page where it happens but that link doesn't work when I copy and paste it so you have to click on "buy tickets", enter some filler information and get to the payment page.

 

 

 

I attached a screen shot as well.

Daniel Hartanto

Stacey Chase:

Sure, and again, this only happens in Internet Explorer 8, www.bethematchfoundation.org/fieldsclub.

 

I tried to send the link to the actual page where it happens but that link doesn't work when I copy and paste it so you have to click on "buy tickets", enter some filler information and get to the payment page.

 

 

 

I attached a screen shot as well.

Looking at the screengrab you provided, looks like on IE8 we might want to declare the width of those 2 dropdown specifically within the CSS.

 

How about try inserting this into the custom CSS you have on your wrapper (or you could also insert this as HTML Caption within the donation page), and let see if that might fix the issue

 

<font size="2" color="#000000"><!--[if lte IE 8]></font><br><font size="2" color="#000000"><style><br/><strong>#ccExp_MONTH, #ccExp_YEAR {</strong></font><br><font size="2" color="#000000"><strong>width:180px;</strong></font><br><font size="2" color="#000000"><strong>}</strong>     </font><br><font size="2" color="#000000"></style><br/><![endif]--></font>

Note that the width value is arbitrary, you can change that px value as you like, but I figure out 180 should be safe for scaling down to mobile

 

Or you could set max-width and min-width value range and have the width be of percentage of it (i.e. 100%, 90% etc). Older IE seems to be counting padding as part of the entire dimension just heads up.

 

Hope it helps, let us know otherwise.

 

regards,

 

Daniel

 

 

Daniel Hartanto

Daniel Hartanto:

Looking at the screengrab you provided, looks like on IE8 we might want to declare the width of those 2 dropdown specifically within the CSS.

 

How about try inserting this into the custom CSS you have on your wrapper (or you could also insert this as HTML Caption within the donation page), and let see if that might fix the issue

 

<font size="2" color="#000000"><!--[if lte IE 8]></font><br><font size="2" color="#000000"><style><br/><strong>#ccExp_MONTH, #ccExp_YEAR {</strong></font><br><font size="2" color="#000000"><strong>width:180px;</strong></font><br><font size="2" color="#000000"><strong>}</strong>     </font><br><font size="2" color="#000000"></style><br/><![endif]--></font>

Note that the width value is arbitrary, you can change that px value as you like, but I figure out 180 should be safe for scaling down to mobile

 

Or you could set max-width and min-width value range and have the width be of percentage of it (i.e. 100%, 90% etc). Older IE seems to be counting padding as part of the entire dimension just heads up.

 

Hope it helps, let us know otherwise.

 

regards,

 

Daniel

 

 

And also,

 

you may want to disable / comment out that 

 

SELECT {

max-width:100%;

}

 

I saw that you have set a fixed width of 170px  and that max-width: 100% percent seems to be conflicting with that  on IE8  (ideally a max width should be of fixed value instead of percentage, the width could be of percentage)

 

UPDATED NOTE:

 

I am adding the screengrab from the dev tool, notice when I 'disable' (unchecking) the max-width:100% the drop down gets widened as it supposed to to 170 px as defined originally by your CSS

 

The declaration seems to be found at this external CSS   the path would be ../assets/css/styles_static.min.css"

Daniel Hartanto

Daniel Hartanto:

And also,

 

you may want to disable / comment out that 

 

SELECT {

max-width:100%;

}

 

I saw that you have set a fixed width of 170px  and that max-width: 100% percent seems to be conflicting with that  on IE8  (ideally a max width should be of fixed value instead of percentage, the width could be of percentage)

 

UPDATED NOTE:

 

I am adding the screengrab from the dev tool, notice when I 'disable' (unchecking) the max-width:100% the drop down gets widened as it supposed to to 170 px as defined originally by your CSS

 

The declaration seems to be found at this external CSS   the path would be ../assets/css/styles_static.min.css"

Last but not least  (just trying to give you options ) )

 

In case if you cannot override that external css asset, or if you just prefer to do a one quick dirty override

 

You can 

 

1. Add "HTML Caption" item / entity within your donation form

2. Copy paste this line below and save  (p.s. no need to redefine the  fixedwidth value as I initially stated on my previous post since you already have one).

 

 

<font size="2" color="#000000"><!--[if lte IE 8]></font><br><font size="2" color="#000000"><style><br/></font><strong>select{<br>max-width:inherit;<br></strong>}<br><font size="2" color="#000000"></style><br/><![endif]--></font>

Hope it helps

 

regards,

 

Daniel