Forms, CSS and Mozilla Firefox

[kundalini]

Forms and Mozilla Firefox


my site has lots of simple forms linked to autoresponders (aweber)

But when viewed on Firefox there is this weird gap between the title or heading and the form, that doesn't appear on microsoft explorer.

I can't for the life of me understand how to fix this.

Code is quite simple but uses CSS too.

Any ideas?

The site is http://www.employee-retention-guide.com

An example page is:

http://www.employee-retention-guide....ngPage21b.html


The code is:
<h3><strong>Sign up now for your free pdf guide to Exit Interviews </strong></h3><br />
<form method="post" action="<A href="http://www.aweber.com/scripts/addlead.pl"><input">http://www.aweber.com/scripts/addlead.pl"><input type="hidden" name="PHPSESSID" value="b070c9eb293f26ce8b2fcfee211601b4" />
<input type="hidden" name="meta_web_form_id" value="1302791665">
<input type="hidden" name="meta_split_id" value="">
<input type="hidden" name="unit" value="exit-interviews">
<input type="hidden" name="redirect" value="http://www.employee-retention-guide.com/Thankyou1">
<input type="hidden" name="meta_adtracking" value="87">
<input type="hidden" name="meta_message" value="1">
<input type="hidden" name="meta_required" value="from,name">
<input type="hidden" name="meta_forward_vars" value="0">
<label for="name">Name</label><br />
<input id="name" name="name" value=""><br />
<label for="email">Email Address</label><br />
<input id="text" name="from"><br />
<input class="maroon" type= "submit" name="submit" value="Submit">
</form><br /><br />
<p>Your email address will never be given out to any other person or business at any time for any reason</p>


The relevant CSS is:

label, input {
display: block;
width: 175px;
float: left;
margin-bottom: 10px;
}
label {
text-align: center;
width: 125px;
padding-right: 0px;
}
br {
clear: left;
}
input.maroon {
background-color: maroon;
font-weight: bold;
font-size: 12px;
color: white;
}



Any code wizards understand where the error is?

[bumfluff]

I haven't tested it, but I'm guessing it's all those hidden inputs being rendered differently in each engine.

What's in http://www.aweber.com/scripts/addlead.pl? would that affect it?

[TWD-Tony]

It's the following line in your CSS that is causing the issue in Firefox

PHP Code:

 margin-bottom: 10px; 


Reduce the margin to see the gap reduce, I'm just not 100% what effect editing this will have in IE

[kundalini]

Originally Posted by TWD-Tony

It's the following line in your CSS that is causing the issue in Firefox

PHP Code:

 margin-bottom: 10px; 


Reduce the margin to see the gap reduce, I'm just not 100% what effect editing this will have in IE

thanks for that.

Much appreciated. Will have a test and see what happens.

[clau]

There is a known difference between how Mozilla and IE render web sites. If you change something maybe if won't run on IE normaly.