Problems with spacing around forms and no-show in IE. WordPress

Josh Sauberman comments:

Hi idt,

Thank you for trying to help. I entered the CSS you suggested, but to no avail. It did not work.

I have taken it back out, but thank you for the suggestion. If you have any other thoughts, please let me know.

- Josh

idt comments:

Can you try it with this please? This is just to remove the spacing between them.

#mc-embedded-subscribe-form table td {

padding: 0 !important;

}

The reason your form is not showing in IE because for some reason on IE your code is generating empty tags that pushing the form to the bottom that's why it's not visible.

idt comments:

If possible after you add it please let me know before removing it so I can see why it's not taking effect. Thanks!

Josh Sauberman comments:

I put it in there. It's in there now, but no change. I'll leave it until I hear back from you.

idt comments:

Please refresh your browser. I'm seeing it on my end.

idt comments:

Ok I was trying to fix on the wrong one. Sorry. I was thinking the spacing for each input box.

So the reason why it was too far from the copy is the same reason why the form in the main page is not showing up.

The reason your form is not showing in IE because for some reason on IE your code is generating empty tags <> before each <td> tags. that pushing the form to the bottom that's why it's not visible.

If you can give me access to the the code that was generating the form, I should be able to fix it. You could email it to me at [email protected].

Josh Sauberman comments:

You must be using Firefox. I've been able to get it working better in firefox too, but you'll see in this [[LINK href="http://screencast.com/t/4wv9mAo9orz"]]video[[/LINK]], or if you look through on your own, it's not getting fixed in Chrome or IE. ...and we haven't even looked at Safari yet.

idt comments:

Please see my comment above. That is the reason why this is having different spacing between the copy and the form. Your mail chimp code is somehow generating empty tags that's causing this.

Josh Sauberman comments:

Sounds reasonable. I'm not sure we'll be able to edit that, but I'll see if I can get it. This site is not mine so I'll contact the person I'm working on it with and see if I can get it. Just to be clear, you need to edit the CSS for the mailchimp forms, right?

idt comments:

For IE, it needs more than editing the CSS. The form html is seriously malformed in IE so it needs to be fixed. I believe that when that's fixed, the probably would also solve the issue for both Chrome and Firefox.

How did you get the mail chimp form code?

idt comments:

I suppose it was generated using the mailchimp widget... But it's weird it's generating those empty tags for IE.

idt comments:

If it was not using the mailchimp plugin, you can take a look at it here: http://wordpress.org/extend/plugins/mailchimp/

Josh Sauberman comments:

Hi idt,

I'm not sure we're going to be able to edit the CSS for the forms because that code is managed by mailchimp, but I'm checking.

The actual form code is:
Get your copy of <strong><em>"The 7 Must-Have Productivity Systems"</em></strong> to start increasing your productivity and profitability today!
<div id="mc_embed_signup">
<form action="http://customlivingsolutions.us1.list-manage.com/subscribe/post?u=f7a89b20ca72c94b850e0c452&amp;id=a9f008b741" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<table cellspacing="5" cellpadding="0" border="0">
    <tr>
      <td style="padding: 5px 5px 5px 0;">Name: </td>
      <td style="padding: 5px 5px 5px 0;"> <input type="text" value="" name="FNAME" class="required" id="mce-FNAME"/> </td>
    </tr>
    <tr>
      <td style="padding: 5px 5px 5px 0;">Email: </td>
      <td style="padding: 5px 5px 5px 0;"> <input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL"/> </td>
    </tr>
    <tr>
      <td style="padding: 5px 5px 5px 0;">&nbsp;</td>
      <td><input type="submit" value="Send Me My Report!" name="subscribe" id="mc-embedded-subscribe" class="btn"/>
<input type="hidden" name="group[4096]" id="mce-group-14-0" value="4096" />
        </td>
    </tr>
  </table>
</form>
You'll also receive a FREE subscription to our "Profitable Productivity" newsletter!

Josh Sauberman comments:

Ok, I see what it's doing.... it's using [[LINK href="http://wordpress.org/extend/plugins/analytics360/"]]analytics360[[/LINK]] to pull MailChimp data directly into the pages or sidebar.

There are a lot of files there....

Any ideas?

idt comments:

For the code you pasted above, it's missing a closing </div> for this: <div id="mc_embed_signup">

idt comments:

It seems though that analytics360 is not the one generating the form. It even suggests using the Mailchimp Wordpress plugin(http://www.mailchimp.com/plugins/mailchimp-wordpress-plugin/) for the signup form. Please see the FAQ of analytics360.

idt comments:

The code you pasted above should be something like this:

Get your copy of "The 7 Must-Have Productivity Systems" to start increasing your productivity and profitability today!

<div id="mc_embed_signup">
<form action="http://customlivingsolutions.us1.list-manage.com/subscribe/post?u=f7a89b20ca72c94b850e0c452&amp;id=a9f008b741" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<table cellspacing="5" cellpadding="0" border="0">
<tr>
<td style="padding: 5px 5px 5px 0;">Name: </td>
<td style="padding: 5px 5px 5px 0;"> <input type="text" value="" name="FNAME" class="required" id="mce-FNAME"/> </td>
</tr>
<tr>
<td style="padding: 5px 5px 5px 0;">Email: </td>
<td style="padding: 5px 5px 5px 0;"> <input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL"/> </td>
</tr>
<tr>
<td style="padding: 5px 5px 5px 0;">&nbsp;</td>
<td><input type="submit" value="Send Me My Report!" name="subscribe" id="mc-embedded-subscribe" class="btn"/>
<input type="hidden" name="group[4096]" id="mce-group-14-0" value="4096" />

</td>
</tr>
</table>
</form>
</div>
You'll also receive a FREE subscription to our "Profitable Productivity" newsletter!

Update that with this and let's see what happens.

Josh Sauberman comments:

That worked in the text widget. I'll try it in the other places.

idt comments:

It's looking good in IE now. The huge gap is gone.

idt comments:

I'll be away for an hour... I'll check back later when I'm back.

Josh Sauberman comments:

idt,

You've solved my problems. Thank you so much! Please send me your contact info. I'm sure I'll need your help again soon!

- Josh ([email protected])

Many thanks!