The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Formatting Help

leftwaveleftwave Member
in Help edited October 2009

I'm a bit new to FoxyCart and am not a CSS expert so please forgive me for this post :)

I'm having a heck of a time formatting the checkout page on this site:

1. I just can not get things to align properly on "step 4" of the checkout. I've spent hours overwriting my own CSS, but it just never looks aligned and even. Is there some sort of trick to the CSS here?

2. To top this off, even though the rest of the page looks great in Firefox, when I load the checkout page in Internet Explorer, the vertical gray lines (on step 1,2,3 and 4) only seem to show up on the bottom half of each section.

Can anyone out there help me with these issues??

Thanks a bunch,
  • brettbrett FoxyCart Team
    About #2: You're in IE8 when you see that, I assume? IE8 is just plain weird when it comes to those vertical lines. If it bothers you I'd suggest just removing them from all browsers rather than trying to get IE8 to play nicely.

    #1: Are you able to change things at all? Or are you having trouble applying styles to the elements in the first place?
  • Hi Brett,

    Yup, it's IE8. I think I'll just leave it for now.

    As for "step 4".... it's really strange. It's as if some styles "take" and others do not. I've tried so many combinations of so many different styles and can NOT get this area to align and look right. Any tips?? Anyone??

  • brettbrett FoxyCart Team
    Have you tried !importants and adding more specificity like prefixing all your rules with the div#container_id_name? The more specific you get, the better.

    Also, make sure the rules you're using are coming _after_ any other rules.

    I can take a look a little later if you are still having problems. Let us know.
  • Hi Brett,

    I think I'm doing all of the CSS stuff correctly like you said and it just won't "take". For example, I did a test checkout and got to the page with the final order number:

    and even after replacing this header graphic:

    with my own, using this:

    /*This sets the main checkout image (cart -> checkout -> receipt)*/
    padding: 100px 5px 50px;
    background: url( no-repeat top center;

    it is STILL showing the default graphic. AHHHH! i've cleared the image cache, refreshed my page, cleared my browser cache and i'm still seeing the old graphic. WTF??? i've even looked at the CSS and can see the changes there all the way at the bottom where they should be:

    I must be doing something very wrong... but what??
  • PS: while on this subject, how do I get the "continue" button at the bottom of the order confirmation page to link somewhere other than
  • brettbrett FoxyCart Team
    PS: while on this subject, how do I get the "continue" button at the bottom of the order confirmation page to link somewhere other than

    That's session-based to go back to the initial referrer, so sometimes in testing it gets weird. That said, in v060 we're looking at changing that behavior, and you can set an explicit link from the receipt in the admin (in v060).

    Back to your CSS, the CSS you pasted above isn't actually in your receipt page at all... I mean, it's just not there. Are you sure you're caching and then saving your template after caching it? I ask because somebody else recently was having issues but it was because they hit the "cache" button but then didn't save it after it was cached. Could that be it? Sorry if that's just a super obvious question, but it did affect somebody just a few days ago ;)

    If that's not it... I don't know. Check your code. I'm just not seeing any override for the #fc_receipt_container, nor the string "titleOrderThanks" anywhere in your receipt's CSS. Thoughts?
  • Thanks for letting me know about the "continue" link. Can I assume when the site is live and out of test mode, it will go to the clients homepage instead? (

    As for this CSS, I must be doing something really lame! Here is the CSS file that I'm writing all of my CSS changes to:

    Is this not in the right place?!?

    LOL!!!!!!!! DUH. I had no idea there was a "receipt" template AND a "checkout" template :) I updated my "receipt" template and of course the changes "took" now.

    But...... we're still not done. I'm so stuck on formatting "step 4" of the checkout page. Any ideas there?
  • brettbrett FoxyCart Team
    Ok, so for the step 4 piece, how about you paste in the rule you think should be working, then we'll figure out why it isn't. That'd probably be easiest.

    Hooray CSS!
  • truth is, i don't KNOW what rules should be working. i've tried adjusting every property possible, but can not:

    1. get the "encrypt my card..." checkbox to vertically align with the text
    2. remove the padding (?) under the expiration date.

    see attached image: step4.jpg

    I'm just going to launch the site as-is. is there a way to continue to test this without my credit card actually getting charged?
  • tookingstookings Member
    edited November 2009
    Hi leftwave.

    Is this about what you were looking for:

    The changed I made were (in bold):
    #fc_payment_list SPAN.fc_input_checkbox_container
    width: inherit;
    margin: 3px 0px 28px;
    text-align: left;

    FIELDSET#fc_payment LI#li_cc_number, FIELDSET#fc_payment LI#li_cc_cvv2 /* removed FIELDSET#fc_payment LI#li_cc_exp_month */
    padding-left: 17px;
    height: 52px;

    FIELDSET#fc_payment LI#li_cc_exp_month /* new block */
    padding-left: 17px;
    height: 20px;

    It's just from a quick look in Firefox though, based on tweaking the CSS you already have...if you don't enter a CC or CVV number the error text will still be way off. Does that help get you started, at least?
  • Hi tookings,

    YES! What you did is exactly what I am trying to do! Thank you. However, I inserted your CSS into mine and it's still not loading or "taking". WHY???? I cleared my cache, reloaded the checkout template, did a hard refresh on my browser and everything still looks the same. UGH THIS IS DRIVING ME CRAZY
  • lukeluke FoxyCart Team
    When you say you "reloaded the checkout template" do you mean you re-cached it in the FoxyCart admin?
  • brettbrett FoxyCart Team
    Stacie, are you sure you're looking at the right place? Do you perhaps have another test store or something you're looking at? As far as I can see:

    That's correct, right? I'm seeing the CSS that Tookings provided in your local copy as well as on your checkout. Is something still missing? I feel like maybe there's some small issue that's causing big problems, like you're perhaps testing the wrong store or something? (Things like that happen to the best of us. Spend 30 minutes trying to figure out why something's not working only to realize you're uploading to the wrong server or something.)
Sign In or Register to comment.