How Can I Line Up Images With My Form

  • Profile Image
    Asked on January 11, 2012 at 09:02 AM

    First let me say I love JotForm.

    I have a form being used in the Ordering Information tab of this page:

    I want to line up images directly to the right of each form element section, but can't find how to do this in the Jotform tool. Sooo, I've divided up using a <table> as a hack solution. However, the images don't line up perfectly in both Firefox and IE.

    Any idea on how I can line up images directly to the right of each element using my Jotform?

    Any help is appreciated. Thanks in advance :-)

  • Profile Image
    Answered on January 11, 2012 at 11:29 AM

    It might be a bit of a longshot but instead of combining margin and padding values to position the images, try using just padding, with just a single class to define that padding for each image.

    Of course, the problem with this method is that you wouldn't be able to have the 1px thick gray border around each image. However, making the border actually part of the image instead of having it rendered via CSS would fix that. (Although, that's not the preferable solution.)

    Some "googling" I did on browser inconsistencies re margins seems to suggest that there's a better solution involving floating content (as discussed here) but I'll need to research it some more before I can provide a definite solution.

    Hopefully, in the meantime my colleagues can provide a solution or two.

  • Profile Image
    Answered on January 12, 2012 at 09:43 PM

    Ahhh ...  I see. Thanks for the sample code. I'll give that a shot.