[CSS] Default padding on input box?

[burns]

Hi,

I'm pulling my hair out over this one. I have been creating a form using lists and css but IE seems to be adding a 2px padding around the input boxes and I can't for the life of me overide it.

http://img510.imageshack.us/img510/7742/untitled3fi8.th.png (http://img510.imageshack.us/my.php?image=untitled3fi8.png)

I have tried pretty much everything but i can't remove the 2px gap in IE7.



<div id="RegisterContent_Organisationdetails">
<fieldset style="height: 250px;">
<legend>Organisation details</legend>
<ol>
<li><label for="Organisation">Organisation:*</label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></li>
<li><label for="Password:">Password:*</label>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></li>
<li><label for="Confirm">Confirm:*</label>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></li>
<li><label for="Address">Address:*</label>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></li>
<li><label for="Address">Address:</label>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox></li>
<li><label for="Town">Town:*</label>
<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox></li>
<li><label for="Postcode">Postcode:*</label>
<asp:TextBox ID="TextBox7" runat="server"></asp:TextBox></li>
<li><label for="County">County:</label>
<asp:TextBox ID="TextBox8" runat="server"></asp:TextBox></li>
<li><label for="Country">Country:*</label>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList></li>
</ol>
</fieldset>
</div>
<div id="RegisterContent_Contactdetails">
<fieldset style="height: 250px;">
<legend>Contact details</legend>
<ol>
<li><label for="First name">First name:*</label>
<asp:TextBox ID="TextBox9" runat="server"></asp:TextBox></li>
<li><label for="Last name">Last name:*</label>
<asp:TextBox ID="TextBox10" runat="server"></asp:TextBox></li>
<li><label for="Job Title">Job Title:</label>
<asp:TextBox ID="TextBox11" runat="server"></asp:TextBox></li>
<li><label for="Email">Email:*</label>
<asp:TextBox ID="TextBox12" runat="server"></asp:TextBox></li>
<li><label for="Landline Tel">Landline tel:*</label>
<asp:TextBox ID="TextBox13" runat="server"></asp:TextBox></li>
<li><label for="Fax">Fax:</label>
<asp:TextBox ID="TextBox14" runat="server"></asp:TextBox></li>
<li><label for="Reseller Code">Reseller code:</label>
<asp:TextBox ID="TextBox15" runat="server"></asp:TextBox> (if applicable)</li>
</ol>
</fieldset>
</div>


<!-- styles--->




#RegisterPageRightContent label
{
width:10em;
float:left;
font-size:10px;

}

#RegisterPageRightContent legend
{
font-weight:bold;

}

#RegisterPageRightContent fieldset
{
background: url(../Images/Control_BG.png) left bottom repeat-x;
border: solid 1px #C0BDA5;
border-bottom: none;
padding:0px;
margin: 0px;
}
#RegisterPageRightContent ol
{
list-style-type: none;
list-style: none;
margin: 0px;
padding: 5px;
}

#RegisterPageRightContent input
{

padding:0px;
margin:0px;
}


Please help

[MTsoul]

IE and Firefox render textboxes with different sizes. That's just something you'll have to deal with using hacks.

Try the hack


* html body element { property }

which only IE6 will render. IE7.. well, you'll have to tweak the padding / height sizes until it's just right.

[burns]

thanks for the reply, when you say they render textboxes differently, do they put different margins etc around them?

[MTsoul]

Not just that, but with the same CSS rule (e.g. height: 20px), IE gives it a different height from Firefox. It's hard to get it looking exactly the same.