/    Sign up×
Community /Pin to ProfileBookmark

padding in IE vs Firefox

I have the following form, where the padding between the fields looks fine in FireFox, but in IE 7, there much more space in between the fields. How can I fix it so that it looks good in both? If I change the padding-bottom of .contactform p to anything less than 15px, in FireFox, the fields are bunched up against each other. Below is the css for the form:

[code]
.contactform {width:635px; margin:2.0em 0 0 0; padding:10px 10px 0 10px; border:solid 1px rgb(200,200,200); background-color:rgb(240,240,240);}
.contactform fieldset {padding:20px 0 5px 0 !important /*Non-IE6*/; padding:0 /*IE6*/; margin:0 10px 20px 0; border:solid 1px rgb(220,220,220);}
.contactform fieldset legend {margin:0 0 0 5px !important /*Non-IE*/; margin:0 0 20px 5px /*IE6*/; padding:0 2px 0 2px; color:rgb(80,80,80); font-weight:bold; font-size:130%;}
.contactform label.left {float:left; width:205px; margin:0px 0px 0px 0px; padding:2px; font-size:110%; text-align:right;}
.contactform select.combo {float: left; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%; white-space:nowrap;}
.contactform input.field {float:left; width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform input.date {float: left; width:100px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform textarea {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform textarea.html {width:610px; margin: 0px 0px 0px 0px; padding:0px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform input.button {float:right; width:auto; margin:10px 141px 0px 0px; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;}
.contactform input.button:hover {cursor: pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}
/*.main .contactform img {float:none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 5px; position: absolute; border-style:none;}*/
.main .contactform img {border-style:none; margin: 0; padding: 0; position: absolute;}
/*.main .contactform a {float:left; padding: 0; margin-left: 5px;}*/
/*.main .contactform a img {float:none; padding: 0; margin: 0; position: absolute; border-style:none;}*/
.main .contactform a img:hover { border-style: none;}
.contactform-clear {clear:both; width:610px; height:0.1em; border:none; background:rgb(210,210,210);}
.contactform img.switch {margin:3px 5px 0px 213px; border:solid 1px rgb(150,150,150); position: relative;}
.contactform p {width: 100%; padding-bottom: 15px;}
[/code]

Here is the link [URL]http://www.zluth.org/contact_us/[/URL]

Thanks!

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@CentauriApr 11.2008 — The 100% width on the <p>s involkes "HasLayout" in IE and forces the <p>s to surround the floated contents, but does not happen in FF. Setting the overflow property on the <p>s will force them to surround floats in FF, then you can get rid of the padding and control the margin instead :[CODE].contactform p {overflow: hidden; margin: 5px 0; width: 100%;}[/CODE]
Copy linkTweet thisAlerts:
@jrthor2authorApr 11.2008 — Thanks, works great.
×

Success!

Help @jrthor2 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...