Default padding/margin for a table in IE?

[mboehler3]

Hi I have a form placed inside a table, and it seems to be giving a lot of unwanted padding and margins in IE, while FireFox looks good. Here is an image of what it looks like in FF:But in IE, you will see there is padding at the top of the table and in some of the fields as well:Now, "Get a personalized quote!" is outside of the table. But, the table settings have cellpadding=0; cellspacing=0; and border=0;. I tried setting a style to it as well, with margin:0; padding:0; but it doesn't change anything in IE.Any ideas? Thanks in advance.

[jeffman]

Make sure you are using a strict DTD.Try setting the CSS border-collapse property to collapse. Note that style for a table element in CSS has less effect than you might think. <td> elements mostly control padding. <tr> elements might also. Don't remember.Are all the things that look like they are on new lines in different table rows, or are you using the <br> element to start new lines? Table rows are to be preferred.

[mboehler3]

Make sure you are using a strict DTD.Try setting the CSS border-collapse property to collapse. Note that style for a table element in CSS has less effect than you might think. <td> elements mostly control padding. <tr> elements might also. Don't remember.Are all the things that look like they are on new lines in different table rows, or are you using the <br> element to start new lines? Table rows are to be preferred.

I'm using a Strict DTD. I tried setting the border-collapse to collapse... I did this in the <table>, the <tr> and the <td> and nothing changed in IE. I am using table rows for everything that appears on a new line. ("First Name" is in a <td> and "Last Name" is in a <td> as well on the same row, and then the row breaks and a new row begins.

[jeffman]

Nothing left to do but post some code or a link.

[mboehler3]

Here's the XHTML:

<div class="homepage-form">		<div class="fontsize18 color64828c"><strong>Get a personalized quote!</strong></div>		<script language="JavaScript" src="/quote/960/check.js" type="text/javascript"></script>	<form class="fpq" action="/quote/quote.asp" method="POST" id="quotesform1" name="quotesform1" onSubmit="return checkquotevalues();">	<input name="ReferralCode" type="hidden">	<table cellpadding="0" cellspacing="0" border="0" width="120">	<tr>	<td align="left">	<div id="inputWrapper"><input class="bmargin5" type="text" size="15" maxlength="50" id="FirstName" name="FirstName" value="First Name" tabindex="1" onfocus="if(this.value == 'First Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'First Name';}" /></div>	</td>	<td align="right">	<div id="inputWrapper"><input class="bmargin5" type="text" size="15" maxlength="50" id="LastName" name="LastName" value="Last Name" tabindex="2" onfocus="if(this.value == 'Last Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Last Name';}" /></div>	</td>	</tr>	<tr>	<td align="left">	<div id="inputWrapper"><input class="bmargin5" type="text" size="15" maxlength="50" id="Email" name="Email" value="Email" tabindex="3" onfocus="if(this.value == 'Email') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Email';}" /></div>	</td>	<td align="right">	<div id="inputWrapper"><input class="bmargin5" type="text" size="15" maxlength="50" id="NumberOfEmployees" name="NumberOfEmployees" value="# of Employees" tabindex="4" onfocus="if(this.value == '# of Employees') {this.value = '';}" onblur="if (this.value == '') {this.value = '# of Employees';}" /></div>	</td>	</tr>	<tr>	<td colspan="2" valign="middle" align="right">	Phone #	<span id="inputWrap" class="lpadding40">	<input onKeyUp="return autoTab(this, 3, event);" type="text" class="width40" maxlength="3" id="text2" name="phone1" value="" tabindex="5" /> <input onKeyUp="return autoTab(this, 3, event);" type="text" class="width40" maxlength="3" id="text1" name="phone2" value="" tabindex="6" /> <input type="text" class="width45" maxlength="4" id="text3" name="phone3" value="" tabindex="7" />	</span>	</td>	</tr>	<tr>	<td colspan="2">	What's Your Payroll Frequency?	<div id="inputWrap">	<select name="PayrollFrequency" tabindex="8" class="width240" />	<option value='0'>Select one</option>	<option value="W">Weekly</option>	<option value="BW">Bi-Weekly</option>	<option value="S">Semi-Monthly</option>	<option value="M">Monthly</option>	</select></div>	</p>	</td>	</tr>	<tr>	<td colspan="2">	What's Your Current Payroll Method?	<div id="inputWrap">	<select name='PayrollMethod' tabindex="9" class="width240" />	<option value='0'>Select one</option>	<option value='New Business'>New Business</option>	<option value='In House'>In House</option>	<option value='Not Currently Processing'>Not Currently Processing</option>	<option value='Accountant'>Accountant/Bookkeeper</option>	<option value='Payroll Service'>Payroll Service</option>	<option value='PEO/Leasing Company'>PEO/Leasing Company</option>	<option value='Other'>Other</option>	</select></div>	</p>	</td>	</tr>	<tr>	<td colspan="2" align="center">	<input type="image" src="/images/960/continue.gif" tabindex="10" id="Image1" name="submit2" />	<br />	<a target="_blank" href="https://www.scanalert.com/RatingVerify?" rel="nofollow"><img width="115" height="30" border="0" src="//images.scanalert.com/meter/32.gif" alt="HACKER SAFE certified sites prevent over 99.9% of hacker crime." oncontextmenu="alert('Copying Prohibited by Law - HACKER SAFE is a Trademark of ScanAlert'); return false;"></a>	   </td>	</tr>	</table>   	<input type="hidden" name="ContactRegarding" value="Q">	<input type="hidden" name="SaveData" value="True">	<input type="hidden" name="ReferralCode" value="<% =fm_refcode%>">		</form>	</div>

And the CSS used:

.homepage-form {margin-top:17px; width:240px; height:319px; background-color:#e8e8ce;}.fontsize18 {font-size:18px;}.color64828c {color:#64828c;}.bmargin5 {margin-bottom:5px;}

.inputWrapper and .inputWrap do not have classes set up.

[thescientist]

do you know the differences between ID's and classes? ID's can only be used once per page, while classes can be used for multiple tags. Validating your code would highlight these errors.

[mboehler3]

do you know the differences between ID's and classes? ID's can only be used once per page, while classes can be used for multiple tags. Validating your code would highlight these errors.

Yes, thanks for pointing this out. Unfortunately I don't believe that is causing this problem.

[ShadowMage]

You might be surprised at the issues caused by invalid code.Try adding a universal selector to your CSS to reset all the margins and padding to 0 to see if that brings about any changes.* {margin: 0px;padding: 0px;}That changes all elements so that they have no margin or padding. This eliminates problems that arise from different browsers applying different default values.

[thescientist]

Yes, thanks for pointing this out. Unfortunately I don't believe that is causing this problem.

but then what's the point of using a Strict DTD if your page is full of errors? Might as well run in quirks mode. I think most would agree a page that validates is by far more likely to offer easier debugging than one that might be throwing a wobbly because of validation errors when running in Strict mode. It's like making the page out of straw or sticks...sure it will stand but would you really trust it to hold up when the wind blows? It's easier to fix problems when there's less of them to being with.however, jkloths advice is very practical, and is definitely a good start.

[mboehler3]

You might be surprised at the issues caused by invalid code.Try adding a universal selector to your CSS to reset all the margins and padding to 0 to see if that brings about any changes.* {margin: 0px;padding: 0px;}That changes all elements so that they have no margin or padding. This eliminates problems that arise from different browsers applying different default values.

Ok, adding that margin and padding reset does fix the problem in IE. Now both FF and IE look alike.So I removed the reset from the CSS and then changed all of the <div id="inputWrapper"> and <div id="inputWrap"> instances to just <div> containers. When I hit refresh in the IE browser, it went back to the old look, with the unwanted margin/padding.Is there any way to apply the margin/padding reset to just the form? I even tried adding margin:0; padding:0; to the .homepage-form class, and to the table, and nothing changed.Thanks in advance for the help.

[thescientist]

Ok, adding that margin and padding reset does fix the problem in IE. Now both FF and IE look alike.So I removed the reset from the CSS and then changed all of the <div id="inputWrapper"> and <div id="inputWrap"> instances to just <div> containers. When I hit refresh in the IE browser, it went back to the old look, with the unwanted margin/padding.Is there any way to apply the margin/padding reset to just the form? I even tried adding margin:0; padding:0; to the .homepage-form class, and to the table, and nothing changed.Thanks in advance for the help.

well, are you surprised that removing the CSS reset declaration would change things back? You could try making a class called .reset and apply it to all elements you want to remove defaults from. I mean every tag, not just the form tag, but all form elements within it. And try to use values for your CSS declarations.

.reset{margin: 0[b]px[/b];padding: 0[b]px[/b];}

Also, just change your ID's to classes, no need to get rid of them completely, then you just lose any of the styling's you had added to those elements, if applicable.

[ShadowMage]

Try this:.homepage-form * {margin: 0px;padding: 0px;}I think that will work. That should change all elements that are contained within the element with the class name homepage-form, in this case your form.I haven't tested that though so I'm not sure if the universal selector can be nested like that.

[mboehler3]

Try this:.homepage-form * {margin: 0px;padding: 0px;}I think that will work. That should change all elements that are contained within the element with the class name homepage-form, in this case your form.I haven't tested that though so I'm not sure if the universal selector can be nested like that.

Yes, that does the trick. Thank you very much for all your help.