Frustrated with an alignment issue :-(

  • Profile Image
    MiamiValleyMarketing
    Asked on January 23, 2011 at 04:25 PM

    For the life of me, I cannot figure out why the name filed (first filed in the form) is so far to the left on the page.  All the other fields are aligned properly within the page.  I've tried adjusting the css and all kinds of other things, all to no avail!  Can anyone suggest a fix for this issue please?

    http://www.stvincentdayton.org/new_donation_form.html

    Thanks!

    Bill

  • Profile Image
    abajan
    Answered on January 23, 2011 at 05:30 PM

    Oh my! Looks like you have a real problem there. There are other display issues on that page. Have you seen how it looks in Internet Explorer 8? Off the top of my head it appears that the content DIV or some DIV element or the other needs widening to properly accommodate the page's contents. I'll try to see what solution I can come up with but it could take a while. A long while! In the meantime, I hope others more knowledgeable than myself in such matters come to your rescue.

  • Profile Image
    MiamiValleyMarketing
    Answered on January 23, 2011 at 05:43 PM

    Didn't even check it in IE yet, thanks for the heads up!  I am on my Mac right now so only tried it so far in Firefox and Safari.  Leads me to think for sure it's a css issue...

  • Profile Image
    abajan
    Answered on January 24, 2011 at 04:35 AM

    Yes, it's a fair bet that it's a CSS issue because when I disable CSS in the local duplicate I constructed of your page, the form looks fine in all five of the browsers on my Windows XP computer: Chrome 8.0, Firefox 3.6, Internet Explorer 8.0, Opera 11.0 and Safari 5.0. These are the major browsers and if you can get your page looking right in all of them, you're pretty much good to go.

    I'm working on the problem and I think I'm making some headway (insofar as the "Home > Donate > General Donations > General Donations Form" section is concerned — from the screenshots you'll notice there's a problem there too) but for the time being, have a look at how your live page looks on the browsers noted above:

    Chrome

    Firefox

    Internet Explorer

    Opera

    Safari

    Those screenshots just focus of the area of your page that is not being rendered correctly. As you can see, Internet Explorer (IE) is the worst of the bunch (no surprises there) but all of the rest have issues too.

    There's a webmaster forum called Webmaster Forum (but of course!) to which I belong but have not visited in a while. See if they can offer any additional assistance. Tell them abajan sent you. (If they have difficulty remembering me, just tell them the v7n Mentor from the sunny island of Barbados where Rihanna's from. That ought to jog their memories! LOL)

  • Profile Image
    serkan
    Answered on January 24, 2011 at 05:28 AM

    @MiamiValleyMarketing Maybe you should try other embedding options. For example script or Iframe I'm sure it will fit your page perfectly.

    EDIT: I've also checked your page code and it seems you have a CSS reset on your page which removes all padding and margins of all elements. When you use CSS reset you should set every padding and margin manually. It's seems SCRIPT embed is the best solution for you.

  • Profile Image
    MiamiValleyMarketing
    Answered on January 25, 2011 at 12:21 AM

    Thanks everyone, I went ahead and just used the embed option, which seemes to have worked.  It's a nasty CSS issue, and I don't feel like re-coding that whole page for just a simple form. 

     

    All good now, thanks :-)

  • Profile Image
    abajan
    Answered on January 25, 2011 at 03:53 AM

    Super! However, there's another issue which you might want to have a look at:

    When you said your solution worked, I went to the page and everything looked the same way. Okay, no problem there because I figured you either may not have updated the live page yet or, decided to change the URL. So, using Chrome (version 8.0.552.237) I went to your Donate link which is supposedly a secure page and saw this in the address bar.

    According to a thread on the issue at Google's official support forum, this is a fairly widespread issue that is specific to Chrome. The thing is, due to security concerns, visitors to your page who see that warning in the address bar may have second thoughts about using your form. My suggestion is to place a notice on the page (preferably, visible only to Chrome users) explaining that it's a known issue and that the form is in fact safe to use. In that notice you could also include a link to the thread to which I alluded above. Even when Google eventually fixes the problem, you should leave the notice in place to accommodate users who either don't have automatic updates enabled in their Chrome browser or don't manually update it.

    UPDATE: IE 8 and Opera 11 are also reporting security issues with that page. So, you might want to investigate further.