SIM page style lost after bad submission

[ACuffman]

I hope this isn't a duplicate, but I can't seem to find any information pertaining to my problem.

I'm working on a website using the SIM API. I redirect my users to the secure payment page. I've styled the page to look just like our site style, so that worked out really well. After submitted credit card data, I receive the post back to my relay page just fine.

The problem I'm getting occurs if the user makes a mistake on the secure payment page. Like say, submitting before entering their credit card number. If this happens, the secure payment page will reload, displaying the errors to the user. However, all of my style will not be applied anymore. The secure payment page is back to it's plain white style.

It's not breaking anything, however, my customer isn't really satisfied with this. We'd both prefer to maintain the style even if an error occurs.

Here's my mark up for the x_header_html_payment_form element with my style:

<INPUT TYPE=HIDDEN NAME="x_header_html_payment_form"
VALUE="<style type='text/css' media='all'>
body{background-color:#96403c !important;}
#divPage{background-color:#fff8e5;}
#divMerchantHeader{background-image: url('<%= LogoURL %>');
background-repeat: no-repeat; background-position:center;
height: 50px;
background-size: contain;}
TD{font-family: 'Trebuchet MS' , Verdana, Helvetica, Sans-Serif;font-size:18px; color:#000000;margin-left:1px;}
INPUT{font-family: 'Trebuchet MS' , Verdana, Helvetica, Sans-Serif;font-size:18px;color: #000000;margin-left:1px;}
.LabelColTotal{ font-size: 18px; }
.DataColTotal{ font-size: 18px; }
input.input_text{ height: 30px; }
#x_card_num{ width: 150px !important; }
#x_exp_date{ width: 50px !important; }
.Comment{ font-size: 13px; }
</style>">

My style gets placed in the divMerchanteHeader div, just like you would expect:

<div id="divMerchantHeader" class="HeaderFooter1">

<style type="text/css" media="all">
body{background-color:#96403c !important;}

...
.Comment{ font-size: 13px; }
</style>

</div>

Even after the failed submission, the divMerchantHeader div appears unaffected. However, the style in it is not applied. Is there a reason this would happen? Is there something I'm configuring wrong in my initial submission?

[ACuffman]

Has anyone seen this issue before? Does anyone have any clues as to what might be causing it? I'm spinning my wheels here.

[RaynorC1emen7]

It work for me on the https://test.authorize.net/gateway/transact.dll

Tried on IE, Firefox and Chrome. The only thing I changed was removed the background image as I don't have one.

[ACuffman]

I've tried it in all of the browsers, and I always get the same result. I tried taking out the background image too.

The style shows up fine after loading for the first time. The style gets lost if I click submit without typing anything.

Do you think it could be something with my account? Like a setting that isn't configured. I just don't know what could possibly be causing this issue.

[ACuffman]

It seems that it is defaulting back to whatever style I have set in my profile under Account -> Settings -> Payment Form -> Color and Font Settings. I'm still not sure why it would use the default when it still have the css markup after hitting submit.

[RaynorC1emen7]

Have you use any of the debugging tools on the browser to see maybe something malformat? Like the chrome/ie/firefox developer tools.

[ACuffman · Accepted solution]

Good call. I checked the dev tools before, but I did not inspect every element. On the header div, Chrome said that some of the css attributes were actually named improperly. Like instead of "height", it had "              height" and it couldn't recognize the attribute name. I just removed all unnecessary white space from the css (it's all on one line now) and now it works. The style is still there after an error.

So somewhere along the line, the whitespace in my style was confusing something. I'm still not sure why that would be, but I'm not complaining now. Thanks for the help.