Credit Card Icons not showing

Nike Bentley 2

Hello,



Brandon had pointed out our credit card icons don't show on our giving pages, which was something I'd been meaning to ask about since they do appear in my preview. The following was offered as a solution:



***



If you paste this code just below where you are embedding your form (or add these styles to the bottom of your stylesheet), the problem should be solved.



.BBCardImage {



z-index:1!important;



padding-bottom:8px; }



******


Our Marketing web person responded, "I pasted the code in as BB recommended within the html (see forwarded message below) and that did not work. It actually just shows as text in the body content. We don't have access to the stylesheet. This is an issue on all NW sites for the Blackbaud forms for foundation."



I noticed one of our sister hospitals who also uses BBOX is not having this issue, but they have retained the standard formatting. Is the issue actually that we've applied colors to our giving page? We are using #edeff5 as the entire background color for the form. When I defaulted back to #0000 the credit card icons did show up.

Brandon Granger

Hi Nike,



If it is showing in the body content, try pasting the text above into Notepad first and then copying from Notepad into your HTML. That should give you just the HTML you need and not other formatting/special characters you don't need.



Regarding your colors. With CSS, Z-index is used to stack elements on your HTML page. So the image is appearing behind everything because all image on your site are styled with "Z-index:-1".



Not sure why #0000 would work instead of #edeff5, but removing your background color would likely work. Because even though the image is "behind" the page, nothing is blocking it from view if that makes sense.



Lemme know if that doesn't work for you!

Brandon Granger

Nike!



I just realized the problem! The text must be wrapped in a tag like this below.



<br /><br/> <style> <br /><br /><br/> &#46;BBCardImage { <br /><br /><br/> z-index:1!important; <br /><br /><br/> padding-bottom:8px; } <br /><br /><br/> </style> <br /><br /><br/>


I'm so sorry for confusion!