Difference in discount code field between IE and Firefox

[fatcatclothing]

Hi, I am testing a discount code I just entered and it works just fine. However, in IE 8, as I type the code in the box, the cursor moves but the text color must be white because I can't see what I'm typing. In Firefox 3.5.7, no cursor shows up at all while typing and no text shows up either so I can't see what I'm typing there either. But if I put in the right code, it is accepted. This will confuse my buyers and think that field doesn't work. How can that field's text color be changed so that customers can see what they are typing on the cart page?



Note: these are the browser versions I have and have not been able to test other browser versions. However, I feel like it should work with all browsers as the other text field (i.e. zip code field) works just fine when typing in text...

[E-junkie_Ninja]

Can you send us the URL of your live sales page?

[fatcatclothing]

http://fatcatclothingco.com/ and just add any item to the cart...

[fatcatclothing]

I'm sorry I should have sent a link to a product to make it easier for you: http://fatcatclothingco.com/tops-slogansweater.html.

[fatcatclothing]

any updates/thoughts/ideas?

[E-junkie_Guru]

That would be caused by your site's CSS; since the overlay-style cart works as a part of your page, it inherits CSS from the page where it's rendered. To help you troubleshoot this, you can install the View Source Chart extension for Firefox:

https://addons.mozilla.org/en-US/firefox/addon/655



Then Add to Cart an item, and while the cart is still showing, View Source Chart for your page; you'll see the cart's HTML added near the end of your page's regular source, which you can examine to help you figure out how your CSS is affecting the text in the discount code field.

[fatcatclothing]

okay so the question becomes why are the zipcode and discount code fields in the e-junkie cart doing different things...





here's the code for the zipcode field:



<td style="border: 0pt none ; margin: 0pt; padding: 2px; color: rgb(0, 0, 0); text-align: left;">

<input name="zipcode" id="fldZipcode" maxlength="50" onfocus="javascript:ejcurzipcode=this.value;" onblur="javascript:if (this.value && (this.value!=ejcurzipcode)) document.getElementById('btnUpdtCart').click();" value="" style="border-style: solid; border-color: rgb(102, 102, 102); margin: 0pt; padding: 0pt; width: 65px; font-size: 11px; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: none;" type="text">

 

</td>





here's the code for the discount code (renamed to promo code on my site) field:



<td style="border: 0pt none ; margin: 0pt; padding: 2px; color: rgb(0, 0, 0); text-align: left;">

<div id="dscnt_cd" style="text-align: left;">

Promo Code

</div>

</td>





My CSS doesn't include neither the IDs of "fldZipcode" or "dscnt_cd" that these fields use so I assume it's part of the e-junkie code/css/naming.



I don't see where my CSS changes the field color just for this field with any special IDs and I don't have any CSS that specifies white or hidden text anywhere else.



Any other ideas? Or am I able to change the code on the e-junkie cart?

[fatcatclothing]

Okay E-junkieGuru, I don't consider myself an expert but I finally found out a way to customize the cart since you stated earlier that it's based on my CSS. Basically using View Source Chart Firefox extension (thanks for letting me know about it by the way!), I found out the ID of the e-junkie form and just added a new CSS item to my code that specifies that all input fields' text should be black and it works now!!!!



This item can now be closed and I appreciate your help!