Question

I face some layout differences in IE and in Chrome. I have searched Stack overflow high and low for solutions and tried some of it… I tried setting box-sizing to initial…it did not work…there fore tried setting height of the text box it did work but still a big differences. I also tried changing doctype to strict. I encounter this problem as part of my project.

The Problem:
I have form in a div tag. In the form there are 4 rows of text field. I put the preview on IE and the preview on Chrome side by side to compare and realise that it is the spacing between the text area that causes the differences in height.

The Code on my html file:

  <div class="leftdetails">
    <form class="form2" name="form2" method="post" action="">
      <label for="fname">First Name: </label>
      <input type="text" name="fname" id="fname" class="regfields"/>
      <br />
      <label for="cdsid">CDSID: </label>
      <input type="text" name="cdsid" id="cdsid" class="regfields"/>
      <br />
      <label for="mail">Mail Drop: </label>
      <input type="text" name="mail" id="mail" class="regfields"/>
      <br />
     <label for="dateofbirth">D.O.B.: </label>
     <input type="text" name="dateofbirth" id="dateofbirth" class="regfields"/>
     <br />
    </form>
  </div>

The code on my CSS (external)

    .leftdetails
    {
font-family:Myriad Pro;
font-size:18px;
float:left;
width:50%;
text-align:center;
    }

    .regfields
    {
width:200px;
height:20px;
vertical-align:bottom; 
    }

     .form2
    {
text-align:right;
margin-right:50px;
    }

This is not published online yet therefore there is not link…but I will be glad to provide screenshot. Its a very minor difference but I just want to understand why.

Answer 1

Try to set the padding-top and padding-bottom to 0px in the regfields CSS class. Maybe also margin-top and margin-bottom